Previously I wrote a tutorial on how to make a mobile navigation for responsive design, now I've discovered a new technique to produce a responsive menu without having to use Javascript. It uses clean and semantic HTML5 markup. The menu can be aligned left, center or right. Unlike the previous tutorial where it is clicked to toggle, this menu toggles on hover which is more user friendly. It also has an indicator to show the active/current menu item. It works on all mobile and desktop browsers including Internet Explorer!VIEWDemo Responsive MenuThe Purpose
The purpose of this tutorial is to show you how turn a regular list menu into a dropdown menu on smaller display.
This trick is more useful on navigation with a lot of links like the screenshot below. You can condense all the buttons into an elegant dropdown.
Nav HTML Markup
Here is the markup for the navigation. The <nav> tag is required to create the dropdown with the css property absolute position. I will explain this later in the tutorial. The .current class indicates the active/current menu link.
<nav class="nav"><ul>class="current"><a href="#">Portfolio</a></li> <li<li ><a href="#">Illustration</a></li>> <li><a href="#">Print Media</a></<li><a href="#">Web Design</a></l ili> <li><a href="#">Graphic Design</a></li> </ul></nav>CSS
The CSS for the navigation (desktop view) is pretty straight forward, so I'm not going to get into the details. Note that I specifieddisplay:inline-block
instead offloat:left
for the nav <li> element. This allows the menu buttons to be able to align left, center or right by specifyingtext-align
on the <ul> element.
/* nav */.nav {on: relative; margiposit in: 20px 0; } .nav ul {} .nav limargin: 0; padding: 0 ;{ margin: 0 5px 10px 0;none; displpadding: 0; list-style: ay: inline-block; } .nav a {ration: none; colopadding: 3px 12px; text-dec or: #999; line-height: 100%; } .nav a:hover {#999; color:color: #000; } .nav .current a { background: #fff; border-radius: 5px;}Center and Right Alignment
As mentioned above, you can change the alignment of the buttons by using text-align property.
/* right nav */.nav.right ul {ht; } /* center natext-align: ri gv */ .nav.center ul {text-align: center;}Internet Explorer Support
HTML5 <nav> tag and media query is not supported by Internet Explorer 8 or older. Include css3-mediaqueries.js (or respond.js) and html5shim.js to provide fallback support. If you don't want to add html5shim.js, replace the <nav> tag with a <div> tag.
<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->Responsive
Now here comes the fun part - making the menu responsive with media query! Read my previous articles on responsive design and media query if you are not familar with responsive design.On 600px breakpoint, I set the nav element to relative position so I can place the <ul> menu list on top with absolute position. I hide all <li> elements by specifying display:none, but keep the .current <li> displaying as block. Then on the nav hover, I set all <li> back to display:block (this will produce the dropdown list result). I added a check icon graphic on the .current element to indicate it is the active item. For the center and right alignment menu, use left and right property to position the <ul> list. View the demo to see the final result.
@media screen and (max-width: 600px) {.nav { position: relative;ul { width: 180pxmin-height: 40px; } .nav ; padding: 5px 0; position: absolute;aa; bactop: 0; left: 0; border: solid 1px #akground: #fff url(images/icon-menu.png) no-repeat 10px 11px;border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3);gi} .nav li { display: none; /* hide all <li> items */ ma rn: 0; } .nav .current {nly current <li> item */ } .nav a { display: bldisplay: block; /* show oock; padding: 5px 5px 5px 32px; text-align: left; } .nav .current a {background-image:background: none; color: #666; } /* on nav hover */ .nav ul:hover { none; } .nav ul:hover li { display: block; margin: 0 0 5px; } .nav ul:hover .current {{ left: auto; right: 0; } /* center nav */ .nav.cenbackground: url(images/icon-check.png) no-repeat 10px 7px; } /* right nav */ .nav.right u lter ul { left: 50%; margin-left: -90px; }}
Sunday, August 24, 2014
Posted By:Unknown | At:12:57 PM
Be the first to comment!
مرسلة بواسطة
Unknown
Subscribe to:
Post Comments (Atom)
0 التعليقات:
Post a Comment