App Library

[Note: Have you already ordered your copy of our Printed Smashing Book #3? The book is a professional guide on how to redesign websites and it also introduces a whole new mindset for progressive Web design, written by experts for you.]

Step1. HTML

First create an unordered list for your base top navigation. Then simply nest another unordered list for your sub navigation.

view plaincopy to clipboardprint?

1. <ul class="topnav">  
2.     <li><a href="#">Home</a></li>  
3.     <li>  
4.         <a href="#">Tutorials</a>  
5.         <ul class="subnav">  
6.             <li><a href="#">Sub Nav Link</a></li>  
7.             <li><a href="#">Sub Nav Link</a></li>  
8.         </ul>  
9.     </li>  
10.     <li>  
11.         <a href="#">Resources</a>  
12.         <ul class="subnav">  
13.             <li><a href="#">Sub Nav Link</a></li>  
14.             <li><a href="#">Sub Nav Link</a></li>  
15.         </ul>  
16.     </li>  
17.     <li><a href="#">About Us</a></li>  
18.     <li><a href="#">Advertise</a></li>  
19.     <li><a href="#">Submit</a></li>  
20.     <li><a href="#">Contact Us</a></li>  
21. </ul>  

Step2. CSS

Next, it’s time to style the navigation wireframe with CSS.

view plaincopy to clipboardprint?

1. ul.topnav {  
2.     list-style: none;  
3.     padding: 0 20px;  
4.     margin: 0;  
5.     float: left;  
6.     width: 920px;  
7.     background: #222;  
8.     font-size: 1.2em;  
9.     background: url(topnav_bg.gif) repeat-x;  
10. }  
11. ul.topnav li {  
12.     float: left;  
13.     margin: 0;  
14.     padding: 0 15px 0 0;  
15.     position: relative; /*--Declare X and Y axis base for sub navigation--*/  
16. }  
17. ul.topnav li a{  
18.     padding: 10px 5px;  
19.     color: #fff;  
20.     display: block;  
21.     text-decoration: none;  
22.     float: left;  
23. }  
24. ul.topnav li a:hover{  
25.     background: url(topnav_hover.gif) no-repeat center top;  
26. }  
27. ul.topnav li span { /*--Drop down trigger styles--*/  
28.     width: 17px;  
29.     height: 35px;  
30.     float: left;  
31.     background: url(subnav_btn.gif) no-repeat center top;  
32. }  
33. ul.topnav li span.subhover {background-position: center bottombottom; cursor: pointer;} /*--Hover effect for trigger--*/  
34. ul.topnav li ul.subnav {  
35.     list-style: none;  
36.     position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/  
37.     left: 0; top: 35px;  
38.     background: #333;  
39.     margin: 0; padding: 0;  
40.     display: none;  
41.     float: left;  
42.     width: 170px;  
43.     border: 1px solid #111;  
44. }  
45. ul.topnav li ul.subnav li{  
46.     margin: 0; padding: 0;  
47.     border-top: 1px solid #252525; /*--Create bevel effect--*/  
48.     border-bottom: 1px solid #444; /*--Create bevel effect--*/  
49.     clear: both;  
50.     width: 170px;  
51. }  
52. html ul.topnav li ul.subnav li a {  
53.     float: left;  
54.     width: 145px;  
55.     background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;  
56.     padding-left: 20px;  
57. }  
58. html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/  
59.     background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;  
60. }  

Step3. jQuery

For those who are new to jQuery, you can learn about it here.
The following script contains comments explaining which jQuery actions are being performed.

view plaincopy to clipboardprint?

1. $(document).ready(function(){  
2.   
3.     $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)  
4.   
5.     $("ul.topnav li span").click(function() { //When trigger is clicked...  
6.   
7.         //Following events are applied to the subnav itself (moving subnav up and down)  
8.         $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click  
9.   
10.         $(this).parent().hover(function() {  
11.         }, function(){  
12.             $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up  
13.         });  
14.   
15.         //Following events are applied to the trigger (Hover events for the trigger)  
16.         }).hover(function() {  
17.             $(this).addClass("subhover"); //On hover over, add class "subhover"  
18.         }, function(){  //On Hover Out  
19.             $(this).removeClass("subhover"); //On hover out, remove class "subhover"  
20.     });  
21.   
22. });  

*To degrade gracefully, we only show the drop down menu trigger to those who have javascript enabled.

This is what it looks like when javascript is disabled: