Home » Tutorials

Creating a Toggle CSS3 Bottom Navigation Bar

Image Tutorials
Author Reading 12 min Views 749 Published by Modified by

Today I prepared nice CSS3 bottom navigation menu for you. This is will sliding drop down menu with fixed position in bottom of screen. Also, I going to use jQuery for sliding effects.

 

Here are final result (what we will creating):

CSS3 Bottom menu

Here are samples and downloadable package:

Contents
  1. Step 1. HTML
  2. index.html
  3. Step 2. CSS
  4. css/menu.css
  5. Step 3. jQuery
  6. js/script.js
  7. Step 4. Images
  8. Conclusion
Live Demo
download in package

Ok, download the example files and lets start coding !

Step 1. HTML

Here are html source code of our page with menu. Whole menu built on UL-LI elements.

index.html

01 <!DOCTYPE html>
02 <html lang="en" >
03     <head>
04         <meta charset="utf-8" />
05         <title>CSS3 Bottom navigation menu | Script Tutorials</title>
06
07         <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
08         <link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">
09
10         <!--[if lt IE 9]>
11           <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
12         <![endif]-->
13         <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
14         <script type="text/javascript" src="js/script.js"></script>
15     </head>
16     <body>
17         <div class="menuContent">
18             <a class="slider"><img alt="" id="bot" src="images/arrow_bottom.png"></a>
19             <ul id="nav">
20                 <li><a href="#"><img src="images/t1.png" /> Home</a></li>
21                 <li>
22                     <ul id="1">
23                         <li><a href="#"><img src="images/empty.gif" />Link 1</a></li>
24                         <li><a href="#"><img src="images/empty.gif" />Link 2</a></li>
25                         <li><a href="#"><img src="images/empty.gif" />Link 3</a></li>
26                         <li><a href="#"><img src="images/empty.gif" />Link 4</a></li>
27                         <li><a href="#"><img src="images/empty.gif" />Link 5</a></li>
28                     </ul>
29                     <a href="#" class="sub" tabindex="1"><img src="images/t2.png" />HTML/CSS</a>
30                 </li>
31                 <li>
32                     <ul id="2">
33                         <li><a href="#"><img src="images/empty.gif" />Link 6</a></li>
34                         <li><a href="#"><img src="images/empty.gif" />Link 7</a></li>
35                         <li><a href="#"><img src="images/empty.gif" />Link 8</a></li>
36                         <li><a href="#"><img src="images/empty.gif" />Link 9</a></li>
37                         <li><a href="#"><img src="images/empty.gif" />Link 10</a></li>
38                     </ul>
39                     <a href="#" class="sub" tabindex="1"><img src="images/t3.png" />jQuery/JS</a>
40                 </li>
41                 <li><a href="#"><img src="images/t2.png" />PHP</a></li>
42             </ul>
43         </div>
44         <footer>
45             <h2>CSS3 Bottom navigation menu</h2>
46             <a href="http://www.script-tutorials.com/css3-bottom-navigation-menu/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
47         </footer>
48     </body>
49 </html>

Step 2. CSS

Here are the CSS styles of our menu. Maybe you’ve noticed – that in our html – I have two CSS files: layout.css and menu.css. The first file (layout.css) contain the styles of our test page. We will not publish these styles in this article, but if you wish – you can find these styles in the package.

css/menu.css

01 .menuContent {
02     background-color:#FFF;
03     background-image: -moz-linear-gradient(center top, #FFF, #FFF, #FFF, #ddd);
04     background-image: -webkit-gradient(linear, center top, center bottom, from(#FFF), color-stop(0.5, #FFF), to(#ddd));
05     border:1px solid #C7C7C7;
06     bottom: 70px;
07     left: 300px;
08     padding: 0 15px 5px;
09     position: fixed;
10     width:520px;
11
12     -moz-border-radius-topright: 10px;
13     -moz-border-radius-topleft: 10px;
14     border-top-right-radius: 10px;
15     border-top-left-radius: 10px;
16     -moz-box-shadow: 3px -3px 5px #B8B8B8;
17     -webkit-box-shadow: 3px -3px 5px #B8B8B8;
18     box-shadow: 3px -3px 5px #B8B8B8;
19 }
20
21 .menuContent a.slider {
22     background-color:#fff;
23     background-image: -moz-linear-gradient(center top , #ddd, #FFF);
24     background-image: -webkit-gradient(linear, center top, center bottom, from(#ddd), to(#FFF));
25     border: 1px solid #C7C7C7;
26     border-bottom:none;
27     cursor: pointer;
28     float:right;
29     height: 8px;
30     margin:-15px 30px 0 0;
31     padding:3px 20px;
32     width: 8px;
33     z-index: 2001;
34
35     -moz-border-radius-topright: 7px;
36     -moz-border-radius-topleft: 7px;
37     border-top-right-radius: 7px;
38     border-top-left-radius: 7px;
39     -moz-box-shadow: 3px -2px 3px #B8B8B8;
40     -webkit-box-shadow: 3px -2px 3px #B8B8B8;
41     box-shadow: 3px -2px 3px #B8B8B8;
42 }
43
44 .menuContent a.slider img {
45     padding-bottom: 3px;
46 }
47
48 #nav {
49     list-style: none;
50 }
51
52 #nav li {
53     display: inline-block;
54     margin: 10px;
55 }
56
57 #nav li a {
58     border: 1px solid #ccc;
59     color:#858585;
60     display: block;
61     padding: 5px 10px;
62     text-align:center;
63     text-decoration:none;
64     width: auto;
65
66     -moz-border-radius-bottomright: 10px;
67     -moz-border-radius-topleft: 10px;
68     border-bottom-right-radius: 10px;
69     border-top-left-radius: 10px;
70 }
71
72 #nav li a:hover, #nav li a.active {
73     background-color:#ddd;
74 }
75
76 #nav li ul {
77     display:none;
78 }
79
80 #nav li ul li {
81     margin: 5px 0;
82     display: block;
83 }
84
85 #nav li a img {
86     border-width: 0px;
87     margin-right: 8px;
88     vertical-align: middle;
89 }
90
91 #nav ul li a img {
92     background: url("../images/bulb.png") no-repeat;
93     border-width:0px;
94     height:16px;
95     line-height:22px;
96     margin-right:5px;
97     vertical-align:middle;
98     width:16px;
99 }

Step 3. jQuery

Finally, here are a little of JS code for our menu (for different slide effects).

js/script.js

01 $(function(){
02     $('.slider').click(function () {
03         $('#nav').slideToggle(300);
04
05         var img = $(this).find('img');
06         if ($(img).attr('id') == 'bot') {
07             $(img).attr('src', 'images/arrow_top.png');
08             $(img).attr('id', 'top');
09         } else {
10             $(img).attr('src', 'images/arrow_bottom.png');
11             $(img).attr('id', 'bot');
12         }
13     });
14
15     $('.sub').click(function () {
16         var cur = $(this).prev();
17         $('#nav li ul').each(function() {
18             if ($(this)[0] != $(cur)[0])
19                 $(this).slideUp(300);
20         });
21         $(cur).slideToggle(300);
22     });
23 });

Step 4. Images

Last step – used images:

bg.jpg
t1.png
t2.png
t3.png
bulb.png
arrow_bottom.png
arrow_top.png
Live Demo
download in package

Conclusion

Hope you enjoyed with our new css3 bottom sliding menu, don’t forget to tell thanks and leave a comment :) Good luck!

Rate article
© 2025 Script Tutorials