CSS3 Responsive menu
Today I’m going to tell how to create a responsive navigation menu using only CSS3. Why responsive? I think it is important and essential. As you know, today, many people browse the Internet via mobile devices (such as ipad, iphone or android). And it is important that mobile members could navigate through your website. Some solutions which you can find in internet offer you to use jquery or javascript to achieve a necessary behavior. But today I will give you a solution without the use of javascript.
By default, this is usual UL-LI drop-down menu. But, if our screen is small (in case of mobile browsers), this menu turns into a click-based menu. In this case your visitors will be able to click to top elements of menu to open submenus. Please look how it works:
Live Demo
download in package
Step 1. HTML
Here is the markup for the demo page with our responsive menu:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta charset="utf-8" />
<meta name="author" content="Script Tutorials" />
<title>Responsive menu | Script Tutorials</title>
<!-- add styles -->
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#s1">Menu 1</a>
<span id="s1"></span>
<ul class="subs">
<li><a href="#">Header a</a>
<ul>
<li><a href="#">Submenu x</a></li>
<li><a href="#">Submenu y</a></li>
<li><a href="#">Submenu z</a></li>
</ul>
</li>
<li><a href="#">Header b</a>
<ul>
<li><a href="#">Submenu x</a></li>
<li><a href="#">Submenu y</a></li>
<li><a href="#">Submenu z</a></li>
</ul>
</li>
</ul>
</li>
<li class="active"><a href="#s2">Menu 2</a>
<span id="s2"></span>
<ul class="subs">
<li><a href="#">Header c</a>
<ul>
<li><a href="#">Submenu x</a></li>
<li><a href="#">Submenu y</a></li>
<li><a href="#">Submenu z</a></li>
</ul>
</li>
<li><a href="#">Header d</a>
<ul>
<li><a href="#">Submenu x</a></li>
<li><a href="#">Submenu y</a></li>
<li><a href="#">Submenu z</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="http://www.script-tutorials.com/css3-responsive-menu/">Back to Responsive menu tutorial</a></li>
</ul>
</div>
</body>
</html>
You can notice here one trick – meta with name=’viewport’. This tag is required to scale page content inside your screen properly. At can be any screen – of your monitor or a screen of your mobile device. Rest code should be easy to understand – multilevel UL-LI menu.
Step 2. CSS
Now – styles. In the most beginning I defined base styles for our page:
css/main.css
* {
margin: 0;
padding: 0;
}
html {
background-color: #fff;
height: 100%;
}
body {
color: #333333;
font: 0.75em/1.5em Arial,sans-serif;
}
.container {
margin-left: auto;
margin-right: auto;
margin-top: 30px;
width: 96%;
}
Now, we can define styles for top level elements:
/* common and top level styles */
#nav span {
display: none;
}
#nav, #nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav {
background-color: #F5F5F5;
border-bottom: 5px solid #333333;
float: left;
margin-left: 1%;
margin-right: 1%;
position: relative;
width: 98%;
}
#nav ul.subs {
background-color: #FFFFFF;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
color: #333333;
display: none;
left: 0;
padding: 2%;
position: absolute;
top: 54px;
width: 96%;
}
#nav > li {
border-bottom: 5px solid transparent;
float: left;
margin-bottom: -5px;
text-align: left;
-moz-transition: all 300ms ease-in-out 0s;
-ms-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
transition: all 300ms ease-in-out 0s;
}
#nav li a {
display: block;
text-decoration: none;
-moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
white-space: normal;
}
#nav > li > a {
color: #333333;
display: block;
font-size: 1.3em;
line-height: 49px;
padding: 0 15px;
text-transform: uppercase;
}
#nav > li:hover > a, #nav > a:hover {
background-color: #F55856;
color: #FFFFFF;
}
#nav li.active > a {
background-color: #333333;
color: #FFFFFF;
}
And now – styles for drop down (submenu):
/* submenu */
#nav li:hover ul.subs {
display: block;
}
#nav ul.subs > li {
display: inline-block;
float: none;
padding: 10px 1%;
vertical-align: top;
width: 33%;
}
#nav ul.subs > li a {
color: #777777;
line-height: 20px;
}
#nav ul li a:hover {
color: #F55856;
}
#nav ul.subs > li > a {
font-size: 1.3em;
margin-bottom: 10px;
text-transform: uppercase;
}
#nav ul.subs > li li {
float: none;
padding-left: 8px;
-moz-transition: padding 150ms ease-out 0s;
-ms-transition: padding 150ms ease-out 0s;
-o-transition: padding 150ms ease-out 0s;
-webkit-transition: padding 150ms ease-out 0s;
transition: padding 150ms ease-out 0s;
}
#nav ul.subs > li li:hover {
padding-left: 15px;
}
Well done. Now, the most interesting part – how can we apply responsive rules? Actually, this is easy, we can use media queries (CSS3) which is made to define custom styles for certain screen resolutions (breakpoints). As you know, different mobile devices have different screen resolution, so – we can use it to define our own custom styles. I’m going to turn our dropdown menu into click-action menu using another one simple trick. Did you notice hidden SPAN elements which I put right after top level menu elements? I’m going to pass active state to them (:target pseudo element) by clicking on top level elements, it will open sub-levels then. Please look what I did:
/* responsive rules */
@media all and (max-width : 980px) {
#nav > li {
float: none;
border-bottom: 0;
margin-bottom: 0;
}
#nav ul.subs {
position: relative;
top: 0;
}
#nav li:hover ul.subs {
display: none;
}
#nav li #s1:target + ul.subs,
#nav li #s2:target + ul.subs {
display: block;
}
#nav ul.subs > li {
display: block;
width: auto;
}
}
Live Demo
download in package
Conclusion
We have just made the great responsive menu for your website from scratch. I’m sure that it will be very useful for you. Good luck and welcome back
Related Articles
Pure CSS3 LavaLamp Menu
CSS3 multicolor menu
Flying CSS3 Navigation Menu
Interesting, but width could be reduced to 600px.
Why? I think that 980px is good, because my HTC Evo 3D has width – 960px, and, I hope that all we know, that usual resolution for 15″ monitors is 1024×768. I’m not sure if someone else use smaller monitors nowadays
For tablet PC, for example.
Nicely done – I like it. Just curious, though, why Menu 2 is “highlighted” – even when you mouse off it, it doesn’t return to the default colors. Of is that just my Safari acting up again??
John
Becouse it has class “active”. You could change it dynamicly depending on which page you are.
Yes, I know, but this demo has only single page. You need to care about ‘active’ pages in case if you use it for multiple pages. I just prepared all the necessary styles for active element.
How possible to set ‘active’ a link where I am? This is not working for me:
#nav a:active {
background-color: #000000;
color: #fdb400;
}
All you need – it so apply ‘active’ class for a LI element for your active page.
Let’s assume that Menu1 is linked to page1.php, and Menu2 is linked to page2.php, then, if you are on page1.php, you should apply ‘active’ class for ‘Menu1′ element, in case if you are on page 2, you should set ‘active’ for ‘Menu2′ element
easy and effectively
Very very good – just perfect for use in a mobile version of the site
trieed using the menu but when screen goes into lower pixels the menu covers the content of the page, i do not know how to place it above the content ad not over it
Hi Joe,
I think that you should check styles of layout of your page. Make sure that your content is not places as a static (or absolute) block on your page.
Try to make it in ‘relative’ position.