We’ve seen many sites with static menus. In the past, people used frames to deal with this stuff, but nowadays we can find coolest things. One of this coolest things is the way we “transform” a normal menu to an static one which can accompany the viewer while they make scroll on the site.
This is what i am gonna explain right now.
I will use two menus:
- The normal one
- The static one
I will mostly use the same CSS styles for both but I will apply some different styles for both containers.
Then, with jQuery and JavaScript I will make the magic. Don’t forget to add the jQuery at your HTML header:
Then, with jQuery and JavaScript I will make the magic. Don’t forget to add the jQuery at your HTML header:
1
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> |
This is our HTML for both menus:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <div id="header"> <ul> <li><a href="">Home</a></li> <li><a href="">Section 1</a></li> <li><a href="">Contact</a></li> </ul> </div> <div id="staticHeader" style="display:none"> <ul> <li><a href="">Home</a></li> <li><a href="">Section 1</a></li> <li><a href="">Contact</a></li> </ul> </div> |
As you can see, i used the container ID as a way to determine whether it is the normal menu or the static one, which i called “staticHeader”.
The static header will be hidden by default and that’s why i used style=”display:none”
The static header will be hidden by default and that’s why i used style=”display:none”
Ok, now lets take a look at both styles, staticHeader and header:
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
| /* Menu normal container*/#header{ height: 30px; width: 100%; background:#FF7E14; box-shadow: 0 1px 5px #333;}/* Menu static container. The key!!*/#staticHeader{ /* same properties as the normal one */ background:#FF7E14; height: 30px; box-shadow:0 1px 5px #333; /* Fixed property would keep it fixed */ position: fixed !important; /* I will fix it to the top of the site */ top: 0px; width: 865px; /* I have to had a z-index in order to maintain it over any other element on the site */ z-index: 7;} |
That’s almost all. One is fixed, the other not. The fixed is hidden for now, but before making the magic, lets apply some more CSS modeling to make it more like a real menu:
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
| /* Defining the menu list container, for both, static and normal menu.*/#header ul, #staticHeader ul{ display: block; float: left; font-family: 'Trebuchet ms',Arial,Verdana,sans-serif; font-size: 1em; font-weight: 700; list-style: none outside none; margin: 0; padding: 0; text-align: left; text-decoration: none;}/* Defining the menu list, for both, static and normal menu.*/#header li, #staticHeader li{ border-width: 0; display: inline; float:left; }/* Defining the links style, for both, static and normal menu.*/#header li a, #staticHeader li a{ color:#fff; display: block; padding: 6px 25px 5px 17px; text-decoration: none;}/* Defining the hover event for links, for both, static and normal menu.*/#header li a:hover, #staticHeader li a:hover{ color:#222; background:#ffb57a; background: rgba(255, 255, 255, 0.3);} |
That’s it. I applied this styles to both menus, the static and the normal one. Now, lets make the magic with JavaScript and jQuery!!
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
| $(document).ready(function(){ //by default, the static menu is hidden var showStaticMenuBar = false; //when scrolling... $(window).scroll(function() { //if the static menu is not yet visible... if(showStaticMenuBar == false){ //if I scroll more than 40px, I show it if($(window).scrollTop() >= 40){ //showing the static menu $("staticHeader").style.display = "block"; //hidding the normal one document.getElementById("header").style.display = "none"; //I define it as showed showStaticMenuBar=true; } } //if the static menu is already visible... else{ //if I didnt scroll more than 40 px... lets hide it!! if($(window).scrollTop() <= 40){ //hidding the static menu one document.getElementById("staticHeader").style.display = "none"; //showing the normal one document.getElementById("header").style.display = "block"; //I define it as hidden showStaticMenuBar=false; } } } ); }); |
So simple right?
Here you can see and download the one-file version demo:
You can also find it at my gitHub account:
Hiç yorum yok:
Yorum Gönder