An example of a Drop-down menu in a CSS response

Html

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

The code is as follows

Copy Code

<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 step

CSS

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

The code is as follows	Copy Code
Nav Select { Display:none; }

Then use the media query, for some specific width of the abrupt changes. You can design according to the actual situation (standard breakpoint Reference)

The code is as follows	Copy Code
@media (max-width:960px) { Nav ul {display:none;} Nav select {display:inline-block;} }

Do you need to maintain two menus now?

Well, it's a question to worry about. Perhaps your menu is dynamically created and you are not well controlled by the output, perhaps you have the technology to process the menu but want to make sure that there are no occasional sync two menus. One way to find it is to create a drop-down menu dynamically from the start. With jquery, it's easy to achieve:

The code is as follows	Copy Code
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 menu items $ ("Nav a"). each (function () { var el = $ (this); $ ("<option/>", { "Value": el.attr ("href"), "Text": El.text () }). appendto ("Nav select"); });

Then make sure that the Pull-down menu can be used

The code is as follows	Copy Code
$ ("Nav select"). Change (function () { Window.location = $ (this). Find ("option:selected"). Val (); });

Is the Pull-down menu a little abrupt?

A little. The 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 that it works without JavaScript,