Drop-down menu under response

Original: Convert a Menu to a Dropdown for Small Screens

Conversion menu is drop-down to fit small screen

Translator: Dwqs

Five Simple Steps (PS: called FSS) website has an elegant responsive design feature, when the browser window is changed into hours, the top right corner of the menu is converted from one line of the rule to a drop-down menu. (PS: Originally written in 2011, the design of FSS website has changed, can be referred to the original text.) ）

Html

The HTML code for the two menus is different, because so far you can't design the <select> and <option> styles to have the same look and behavior, and vice versa. So both of them need to be designed, and all you have to do is write the two marks. The FSS practice is as follows:

<nav>   <ul>     <li><a href= "/"  class= "Active" >home</a></li>     <li><a href= "/collections/all ">books</a></li>     <li><a href="/blogs/ Five-simple-steps-blog ">blog</a></li>     <li><a href="/ Pages/about-us ">about us</a></li>     <li><a href=" /pages/support ">Support</a></li>   </ul>     < Select>     <option value= ""  selected= "selected" >Select</option >         <option value= "/" >Home</option>      <option value= "/collections/all" >Books</option>      <option  value= "/blogs/five-simple-steps-blog" >Blog</option>     <option  Value= "/pages/about-us" >about us</option>     <option value= "/ Pages/support ">Support</option>   </select> </nav>

Continue to the next

Css

By default we use Display:none to hide the Select menu, which is well accepted. For the screen reader, the extra menu will be hidden.

Nav select {display:none;}

Then take advantage of media queries, for some specific width of the sudden change. You can design according to the actual situation (standard breakpoint Reference)

@media (max-width:960px) {nav ul {display:none;} Nav select {display:inline-block;}}

Do you need to maintain two menus now?

Well, that's a problem to worry about. Maybe your menu is dynamically created and you can't control the output well, maybe you have the technology to handle the menu but want to make sure that you don't accidentally sync up two menus. One way to find it is to dynamically create a drop-down menu from the start. With jquery, it's easy to achieve:

Create the dropdown base$ ("<select/>"). AppendTo ("NAV");//create Default option "Go to ..." $ ("<option/>", {"Selected": "Selected", "Value": "", "Text": "Go to ..."}). AppendTo ("Nav select");//Populate dropdown with the menu items$ ("Nav a"). each (function () {var el = $ (this); $ ("<option/& gt; ", {" Value ": el.attr (" href ")," text ": El.text ()}). AppendTo (" Nav select ");});

Then make sure the drop-down menu can be used

$ ("Nav select"). Change (function () {window.location = $ (this). Find ("option:selected"). val ();});

is the drop-down menu a bit abrupt?

A little. Small screens are mostly mobile devices, and their support for JavaScript is friendly, so don't worry too much. But if you want to make sure it works without JavaScript, you can refer to my other article: I have a article about that.

Effect Demo: http://jsfiddle.net/Web_Code/j810jta8/embedded/result/

Original starting: http://www.ido321.com/1348.html

Drop-down menu under response