How to make a response navigation menu using CSS3

about using responsive design to create a mobile navigation bar, I have written a tutorial before. Now I've found a new way to implement a response menu without using JavaScript. It completely uses neat and semantically HTML5 tags, and menus can be left, centered, and right-aligned. Unlike the previous tutorial, which needs to be clicked to expand, this menu can be hover and friendlier to the user. It also contains an indicator to display the currently active menu item. This approach can work in all mobile and desktop browsers, even ie.

Demonstrate

Goal

The goal of this tutorial is to show you how to convert a traditional list menu to an extensible menu on a smaller screen.

This is useful for navigation with many links in the following figure. You can turn all the buttons into an elegant stretch bar.

HTML code

The following is the HTML code for the navigation.

The

tag is used to create an extension bar that contains absolutely positioned CSS attributes. I'll explain this later, the current class represents the currently active menu link.

CSS code copy content to clipboard

　　

　　

　　

• Portfolio

　　

• Illustration

　　

• Web Design

　　

• Print Media

　　

• Graphic Design

　　

　　

Css

The CSS style of navigation (desktop view) is very simple, so I'm not going to introduce the details. Please be aware of my navigation

The

• element specifies the Display:inline-block to replace the float:left. This allows us to control the menu buttons to the left, center, or right alignment by setting the Text-align property for the
  element.

  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;

  }

  Align Center to right

  As mentioned above, you can use the Text-align property to change the way the button is.

  CSS code copy content to clipboard

  * Right NAV * *

  . nav.rightright UL {

  Text-align:rightright;

  }

  /* Center NAV * *

  . nav.center UL {

  Text-align:center;

  }

  IE support

  IE8 or earlier versions do not support HTML5

  label and media Query (Mediaquery). We need to quote css3-mediaqueries.js (or respond.js) and html5shim.js to provide support. If you are not going to use html5shim.js, you can use the tag instead.

  xml/html code to copy content to clipboard

  　　

  　　

  　　

  　　

  Response-Type Design

  Now is the most interesting part-create a response menu using media queries. If you are not familiar with the response design, you can look at my previous articles on response design and media queries.

  On a 600-pixel node, I set the navigation element to relative positioning, so I can put the top

  The
  menu list style is replaced with absolute positioning. By setting Display:none I hide all the
  • elements, but keep the currently active
  • item. Then, when the mouse hover on the navigation bar, I set all the
  • elements to Display:block (which produces a stretch list). I added a check icon to show the activation status in the current column. For a centered and right-aligned menu, use the left and right properties of position to locate the
    list. You can view the final results based on the demo.

     

    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 10px11px;

    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;

      }

      }