A Simple Responsive JQuery Menu For Blogger
There are already tons of other responsive menus for you available on jQuery plugins inventory. But I found many difficulties when I was trying to install them on my Blogger site. So I decided to create a super simple and easy to install jQuery responsive menu for Blogger and finally I was able to make one. Today I will share a small but a powerful jQuery menu that will help you to install a responsive menu in your Blogger Blog.
In-fact it’s my own creation, have a look at the DEMO by clicking on the following button:
DEMO
Just re-size your browser window and make it less than 320px(width). Or useMobileTest.me and enter the URL of the DEMO page to have a look of this super simple menu.
Well, to install it first create an ordinary HTML5 menu which should look like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| </pre><nav><ul> <li>Home</li> <li>Tutorials</li> <li>Portfolio</li> <li>Gadgets</li> <li>Snapshots<ul> <li>List #1</li> <li>List #2</li> <li>List #3</li> <li>List #4</li></ul></li></ul></nav><pre><span class="menu">Menu<img src="http://articlesteller.com/wp-content/uploads/2015/08/nav-button2.jpg" alt="" width="20px" height="20px" /></span> |
Note: Do not forget to also add the <span> section in the code.
Now it’s time to add jQuery in your Javascript sheet:
1
2
3
4
5
6
7
8
9
10
11
12
| $(document).ready(function(){ $('.menu').click(function(){$('nav').slideToggle();});});$(window).on('resize', function(event){ var windowWidth = $(window).width(); if(windowWidth > 1000) {$('nav').fadeIn();} }); |
Now add few of CSS styles for the menu in your stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
| nav {height: 40px;background-color: #E0E0E0;width: 100%;float: left;border-bottom: 1px solid #C8C8C8;}nav ul {width: 100%;list-style: none;float: left;}nav ul li {background-color: #E0E0E0;font-family: 'Source Sans Pro', sans-serif;padding-top: 9px;padding-left: 20px;padding-right: 20px;display: inline-block;float: left;padding-bottom: 10px;}nav ul li:hover {color: black;background-color: #C8C8C8;}nav li li {margin: 1px 0 0 0;padding: 9px 12px 10px 12px;display: block;float: none;position: relative;background-color: #C0C0C0;width: 115px;z-index: 9999;}nav li ul {padding-left: 0px;background-color: gainsboro;z-index: 9999;width: 115px;display: none;position: absolute;opacity: 0;-webkit-transition: all 0.5s;transition: all 0.5s;animation-name: opacityC;animation-duration: 0.5s;}nav li:hover > ul {display: block;opacity: 1;}nav li li:hover {color: black;background-color: #E0E0E0;} |
Now we should make this menu responsive, for this just below all of your existing CSS code paste these CSS styles:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| @media only screen and (max-width: 720px) {nav {display: none;float: none;}nav ul ul {background-color: #565252;width: 80%;}nav ul li, nav li li {margin-top: 4px;padding: 5px;display: block;float: none;width: 92%;text-align: center;}nav li li {width: 100%;}} |
0 comments:
Post a Comment