We also discuss about the Creating A Responsive Web Design And Template. Do you want to create your own responsive menu for your website but don't know how ? In this post we will show 4 awesome responsive menus that you can use to build your own website. For simple navigation, the solutions can be straight-forward. However, if you’re working on something a bit more complex, maybe with multiple nested lists and dropdowns, a more dramatic rearrangement may be in order. In this approach to responsive navigation, we’re going to use an approach that can accommodate large, multi-level navigation menus using media queries, whilst trying to keep our markup simple and our external resources minimal. In this article you will see how you can build an awesome CSS3 animated Responsive dropdown menu.
Live Preview Download Source
Be sure to view on a mobile or small screen, and take a while to inspect the code.
Let's Start
Firstly, simple markup of multi-leveled unordered lists with a little bit of HTML5 flavor. My example consists of three levels. Three is not the limit, you may have infinite levels on your next super project.
Step 1. Creating HTML Structure
<div class="nav-container">
<div>
<label class="responsive_menu" for="responsive_menu">
<span>Menu</span>
</label>
<input id="responsive_menu" type="checkbox">
<ul class="menu">
<li><a href="#">Home</a></li>
<li class="dropdown"><a href="#">Categoriesˇ</a>
<ul>
<li><a href="#">SEO</a></li>
<li><a href="#">Webmaster Tools</a></li>
<li><a href="#">Google News</a></li>
<li class="dropdown"><a href="#">Web Design ›</a>
<ul>
<li><a href="#">Social Plugin</a></li>
<li><a href="#">Plugins</a></li>
<li class="dropdown"><a href="#">Templates ›</a>
<ul>
<li><a href="#">Blogger</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">Jomla</a></li>
<li><a href="#">Website Template</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#">Tutorialsˇ</a>
<div class="columndrop">
<div class="col">
<h3>± SEO</h3>
<ul>
<li><a href="#">Basic</a></li>
<li><a href="#">Off Page</a></li>
<li><a href="#">On Page</a></li>
<li><a href="#">Blogger SEO</a></li>
</ul>
</div>
<div class="col">
<h3>± Navigation</h3>
<ul>
<li><a href="#">Website Menu</a></li>
<li><a href="#">Blogger Menu</a></li>
<li><a href="#">Wordpress Menu</a></li>
<li><a href="#">All in One</a></li>
</ul>
</div>
<div class="col">
<h3>± Plugins</h3>
<ul>
<li><a href="#">Social</a></li>
<li><a href="#">Blogger</a></li>
<li><a href="#">Wordpress</a></li>
<li><a href="#">Website</a></li>
</ul>
</div>
</div>
</li>
<li class="dropdown"><a href="#">Resourcesˇ</a>
<div class="megadrop">
<div class="col">
<h3>Graphic</h3>
<ul>
<li><a href="#">Illustrator</a></li>
<li><a href="#">CorelDraw Styles</a></li>
<li><a href="#">Adobe Plugin</a></li>
</ul>
</div>
<div class="col">
<h3>Vector Graphic</h3>
<ul>
<li><a href="#">Vectors</a></li>
<li><a href="#">Icons</a></li>
<li><a href="#">UI Kit</a></li>
</ul>
</div>
<div class="col">
<h3>Template</h3>
<ul>
<li><a href="#">HTML Templates</a></li>
<li><a href="#">Wordpress Themes</a></li>
<li><a href="#">Blogger Templates</a></li>
</ul>
</div>
<div class="col">
<h3>Social Media</h3>
<ul>
<li><a href="#">Social Plugin</a></li>
<li><a href="#">Social Icons</a></li>
<li><a href="#">Social Vector Icons</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#">Faqs</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</li>
</ul>
</div>
</div>
Now let's just give a sense to the HTML above with the CSS below.
Step 2. Let’s add some very basic styling to get our list looking like a navigation bar:
.menu-container {
width:100%;
margin: 0 auto;
padding: 20px 0;
}
.menu {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 15px;
position: relative;
padding: 0 0 0 4px;
margin: 0;
background-color: #005b68;
}
/* Reset Links */
.menu a, .menu a:link, .menu a:visited, .menu a:focus, span {
color: #fff;
text-decoration: none;
}
.menu a:hover {
color: #c4c4c4;
text-decoration: none;
}
/* Main element */
.menu > li {
display: inline-block;
text-align: center;
margin-left: -4px;
border-left: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: -1px 0 0 rgba(255, 255, 255, 0.2);
}
/* Link Style */
.menu > li > a {
padding:20px 18px;
display: block;
}
.menu > li:hover > a{
color: #005b68;
}
.menu > li:hover {
background-color: #fff;
}
.menu > li:first-child {
border-left: none;
box-shadow: none;
}
Step 3. Next, let’s get the horizontal dropdown menus happening. While this could be done with pure CSS using the:hover .
/* Simple multilevel dropdown */
.menu > li > ul {
opacity: 0;
visibility: hidden;
position: absolute;
list-style: none;
top:55px;
background-color: #005b68;
width: 200px;
text-align: left;
margin-top:30px;
padding: 0px;
z-index: 99;
}
/* First level appear */
.menu > li:hover > ul {
opacity: 1;
visibility: visible;
margin-top: 0px;
}
/* Style for dropdown links */
.menu li > ul li {
font-size: 13px;
position: relative;
display: block;
padding: 15px 10px;
}
.menu > li > ul li:hover {
background-color: #fff;
}
.menu ul li:hover > a {
color: #005b68;
}
/* Second and third dropdown level */
.menu > li > ul li ul {
opacity: 0;
visibility: hidden;
position: absolute;
list-style: none;
top:0px;
left: 200px;
background-color: #005b68;
width: 200px;
text-align: left;
padding: 0px;
margin-left: 30px;
}
.menu > li > ul li ul li:hover {
background-color: #fff;
}
input#responsive_menu { display: none; }
.menu > li > ul li ul li ul {
background-color: #005b68;
}
.menu > li > ul li ul li ul li:hover {
background-color: #fff;
}
/* Second and third level appears */
.menu > li ul li:hover > ul {
opacity: 1;
visibility: visible;
margin-left: 0px;
}
We’ve just floated our list items into a horizontal line, set some colors up and hidden the submenus off the screen using absolute positioning….!!!
Step 4. Here is we are going to stylize our column dropdown and mega dropdown list.
/* columndrop dropdown */
.menu .columndrop {
opacity: 0;
visibility: hidden;
position: absolute;
list-style: none;
top:55px;
background-color: #005b68;
min-height: 100px;
text-align: left;
margin-top:30px;
padding: 0;
padding: 0 10px;
z-index: 99;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.menu > li:hover .columndrop {
opacity: 1;
visibility: visible;
margin-top: 0px;
color: #fff;
}
.menu .columndrop .col {width: 130px;margin:0 9px;}
/*.coldrop full width dropdown */
.menu .col {
width: 14.1%;
float: left;
color:white;
margin: 0 0 0 2.2%;
}
.menu .col ul {
padding: 0;
margin: 0;
}
.menu .col ul li {
padding: 0;
list-style: none;
font-size: 11px;
}
.menu .col h3 {
font-size: 16px;
padding: 14px 0;
font-weight: 400;
margin: 5px 0 5px 0;
}
.menu .col ul li a {
display: block;
padding: 0 0 15px 0;
}
.menu .col ul li a:hover {
color: #111;
text-decoration: underline;
}
/*Animation Effect for Dropdown */
.menu > li > ul li ul, .menu li >ul li, .menu > li > .megadrop, .menu > li > .columndrop, .menu > li > ul, .menu > li {
transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out; /* Firefox 4 */
-webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */
-ms-transition: all 0.2s ease-in-out; /* IE 11 */
-o-transition: all 0.2s ease-in-outs; /* Opera */
}
Step 5. Our lovely horizontal dropdown menu unfortunately looks quite tiny on mobile screens, so let’s make sure mobile browsers will be fully zoomed-in when they load our page by adding the viewport meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1">
Of course, now our dropdown menu looks even worse on mobile devices, and most of it doesn’t even fit on the screen! Let’s add in some media queries to style our list into a vertical list below our breakpoint. Our breakpoint is determined by the point at which our menu breaks onto two lines.
Step 6. At our breakpoint, we’ll remove the floats and set the list items and unordered lists to width: 100%. Right now, when we hover over our parent items, their child lists are displayed over top of the items beneath it.
/* Responsive container Setting */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.menu-container {
width:768px;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.menu-container {
width: 420px;
}
}
@media only screen and (max-width: 479px) {
.menu-container {
width: 300px;
}
}
label.responsive_menu span {
margin-left: 10px;
color: white;
display: none;
}
@media only screen and (max-width: 959px) {
/* New direction for third dropdown level */
.menu > li > ul li ul li ul {
left: -200px;
z-index: 3;
}
.menu > li > a{
padding: 20px 12px;
font-size: 12px;
}
.menu .columndrop .col {width: 120px;margin:0 5px;}
}
@media only screen and (max-width: 767px) {
.menu {
display: none;
}
label.responsive_menu span {
display: inline;
font-size: 20px;
font-variant: small-caps;
font-weight:400;
}
label.responsive_menu {
position: relative;
display: block;
width: 100%;
background-color: #005b68;
padding: 15px 0;
}
.menu {
padding: 0;
}
.menu li {
width: 100%;
display:block;
text-align: left;
margin-left: 0;
}
.menu > li {
border-right: none;
padding: 18px 0px;
position: relative;
}
.menu > li > a {
display: inline;
}
.menu li ul, .menu li .megadrop, .menu li .columndrop {
top:45px;
}
.menu li ul {
padding: 0;
}
.menu .megadrop, .menu .columndrop {
width: 100%;
padding: 0 2.5%;
}
.menu li > ul li {
padding: 18px 0px;
}
.menu .col, .menu .columndrop .col {
width: 94%;
padding: 0 3%;
}
.menu > li > ul {
width: 100%;
}
.menu > li > ul li ul {
width: 100%;
top:43px;
left: 0;
margin-top: 30px;
z-index: 2;
}
.menu > li > ul > li:hover ul {
margin-top: 0;
}
#responsive_menu:checked+.menu {
display: block;
}
label:after {
position: absolute;
top:9px;
right: 10px;
content: "\2263";
font-size: 35px;
color: #FFF;
}
.menu > li > ul li ul li ul {
width: 100%;
top:43px;
left: 0px;
margin-left: 0;
margin-top: 30px;
}
.menu > li > ul > li ul li:hover ul{
margin-top: 0;
}
.menu > li > ul li{
padding: 15px 0 15px 6%;
width: 94%;
}
.menu > li > ul li ul li{
padding: 15px 0 15px 9%;
width: 91%;
}
.menu > li > ul li ul li ul li{
padding: 15px 0 15px 12%;
width: 88%;
}
.menu ul li.dropdown:after {
left: 90%;
}
/* Disable animation for dropdown */
.menu > li > ul li ul, .menu li >ul li, .menu > li > .megadrop, .menu > li > .columndrop, .menu > li > ul, .menu > li {
transition: none;
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
-o-transition: none;
}
}
Though this technique may be well-suited to certain situations and menu structures, there are still a lot of other options out there for taming navigation on mobile devices. In our next Tutorial we are going to tell you how add it to blogger. stay tuned for our next tutorial.