Css navigation menu implementation code

This tutorial aims to teach you how to create an adaptive navigation menu that uses HTML5 + CSS. It does not need javascript and can be left, center, or right. This menu is not displayed by clicking, it is displayed when the mouse slides over and is compatible with various browsers, including mobile clients and IE browsers.

This tip is useful when there are many navigation menus that can be folded into an element drop-down menu. I hope you will like it.

HTML code
The <nav> flag in this example is required for creating a drop-down menu. In the following tutorial, I will explain how this works. In addition,. current is used as an active/current menu style.

The code is as follows:	Copy code
<Nav> <Ul> <Li> <a href = "#"> Portfolio </a> </li> <Li> <a href = "#"> statement </a> </li> <Li> <a href = "#"> Web Design </a> </li> <Li> <a href = "#"> Print Media </a> </li> <Li> <a href = "#"> Graphic Design </a> </li> </Ul> </Nav>

CSS code
The following CSS code can be implemented on the desktop version. We noticed that the inline-block is used to replace float: left; as the list form, this is because inline-block enables the menu button to be centered or right in UL.

The code is as follows:

Copy code

/* Nav */ . Nav { Position: relative; Margin: 20px 0; } . Nav ul { Margin: 0; Padding: 0; } . Nav li { Margin: 0 5px 10px 0; Padding: 0; List-style: none; Display: inline-block; } . Nav { Padding: 3px 12px; Text-decoration: none; Color: #999; Line-height: 100%; } . Nav a: hover { Color: #000; } . Nav. current { Background: #999; Color: # fff; Border-radius: 5px; } Center or right /* Right nav */ . Nav. right ul { Text-align: right; } /* Center nav */ . Nav. center ul { Text-align: center; }

Internet Explorer supported
The following browsers in IE9 do not support <nav> labels. We can introduce JavaScript for support. If you do not want to use js, you can change nav to div.

The code is as follows:	Copy code
<! -- [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] -->

Adaptive
If you are not clear about Adaptive Web design, you can read the articles we have written and the responsive design process.

In the form below 600, I changed the UL under nav to fixed, and then hidden the sub-menu below and kept it. at the same time, when the mouse slides over, all the sub-menu is displayed and modified. current sub-menu style.

The center and right are set by the UL position. For details, refer to the code

The code is as follows:

Copy code

@ Media screen and (max-width: 600px ){ . Nav { Position: relative; Min-height: 40px; } . Nav ul { Width: 180px; Padding: 5px 0; Position: absolute; Top: 0; Left: 0; Border: solid 1px # aaa; Background: # fff url (images/icon-menu.png) no-repeat 10px 11px; Border-radius: 5px; Box-shadow: 0 1px 2px rgba (0, 0, 0,. 3 ); } . Nav li { Display: none;/* hide all <li> items */ Margin: 0; } . Nav. current { Display: block;/* show only current <li> item */ } . Nav { Display: block; Padding: 5px 5px 5px 32px; Text-align: left; } . Nav. current { Background: none; Color: #666; } /* On nav hover */ . Nav ul: hover { Background-image: none; } . Nav ul: hover li { Display: block; Margin: 0 0 5px; } . Nav ul: hover. current { Background: url (images/icon-check.png) no-repeat 10px 7px; } /* Right nav */ . Nav. right ul { Left: auto; Right: 0; } /* Center nav */ . Nav. center ul { Left: 50%; Margin-left:-90px; } }

This tutorial is a site from outside China. Here, I think his idea is very novel and reasonable, and his code is clearly written. It is worth using this method when designing such menus in the future.