The response-folding menu sharing made by pure CSS

This menu can be left, center and right aligned, unlike the previous article mentioned in the menu need to click on the display and hide between the switch. It also has a tag to display the activation/current menu item, and it can function on all mobile platforms and all desktop browsers including IE.

First, look at the results of the demo: Demo

I. Purpose

The purpose of this tutorial is to show how to turn a regular list menu into a smaller display drop-down menu.

This technique is useful in navigation with many links, such as the screenshot below, which compresses all the buttons into an elegant drop-down.

　　Second, Nav HTML tags

xml/html Code copy content to clipboard

2. < nav class="nav">
4. < ul >
6. < li class = "current" > < a href = "#" > portfolio</ a span class= "tag" >> </ li
8. < Li > < a href="#">illustration</a></ li>
10. < Li > < a href="#">Web design</a> </ Li >
12. < Li > < a href="#">Print Media</a></ li>
14. < Li > < a href="#">Graphic design</a> </li>
16. </ ul >
18. </ nav >

Third, CSS

CSS code copy content to clipboard

* 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 a {

PADDING:3PX 12px;

Text-decoration:none;

Color: #999;

line-height:100%;

}

. Nav a:hover {

Color: #000;

}

. Nav. Current a {

Background: #999;

Color: #fff;

border-radius:5px;

}

Four, center and right alignment

As mentioned earlier, you can change the alignment with the Text-align property.

CSS code copy content to clipboard

* Right NAV * *

. nav.rightright UL {

Text-align:rightright;

}

/* Center NAV * *

. nav.center UL {

Text-align:center;

}

V. IE support

In IE 8 and earlier versions, HTML5 NAV tags and media queries are not supported. The introduction of Css3-mediaqueries.js (or respond.js) and Html5shim.js provides backing for compatibility processing. If you don't want to use html5shim.js, you can use DIV instead of NAV.

　　CSS Code copy content to clipboard

1. <!--[If Lt IE 9]>
2. <script src="Http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"> </script>
3. <script src="Http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
4. <! [endif]->

Six, Response-type

Now here's the interesting part--the responsiveness of the Media query menu. If you are unfamiliar with the response design, you can read the previous article I wrote about responsive (later translation) and media query.

In the PX breakpoint, I set the nav element relative positioning, so that I can be the UL element for absolute positioning. By Display:none, I hid all the LI elements, but kept the current Li element displayed as a block element. Then, when the mouse hovers over the nav element, all Li is added Display:block. To mark the current Li element, I will add an icon. For center and right alignment, use the left and right-hand attributes on the UL element for positioning. Look at the final demo effect:

CSS code copy content to clipboard

@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

• Items */

   

  margin:0;

  }

  . Nav. Current {

  Display:block/* Show only current

• item */

   

  }

  . Nav a {

  Display:block;

  padding:5px 5px 5px 32px;

  Text-align:left;

  }

  . Nav. Current a {

  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.rightright ul {

  Left:auto;

  Rightright:0;

  }

  /* Center NAV */

  Nav.center ul {

  left:50%;

  Margin-left: -90px;

  }

  }