Responsive WEB design: converts a navigation menu to a drop-down menu to adapt to small-screen devices.

Responsive WEB design: converts a navigation menu to a drop-down menu to adapt to small-screen devices.

With the advent of the mobile Internet era, we should respond to and adjust the user behavior and the device environment (System Platform and screen size) when designing and developing pages, this concept is also called responsive WEB design. Today, I will explain how to convert a horizontal menu to a drop-down menu when the screen size is changed.

 

This article uses HTML5 labels and CSS3 technology. when viewing the demo, you need your browser to support HTML5 and CSS3. We recommend that you use modern browsers such as Chrome, Firefox, and IE9.

HTML

<Nav> <ul> <li> <a href = "/"> homepage </a> </li> <a href = "/server.html"> service </a> </li> <a href = "/case.html"> case </a> </li> <a href = "/about.html"> about </a> </li> <a href = "/blog.html"> BLOG </a> </li> </ul> </nav>

We use the HTML5 tag nav to define the navigation link, that is, navigation. Next we will use css to side navigation menus.

CSS

nav ul{width:500px;margin:20px auto;}nav ul li{float:left; width:100px; height:24px; line-height:24px}

So when we zoom out the screen, we need to convert the horizontal menu into a drop-down select menu. What should we do? Do not worry. First, you must create a select drop-down menu in html in two ways. One is to directly write a select menu in html, and the other is to dynamically generate a select menu through javascriot. Because the first method directly generates two select statements in html, we use the second method to dynamically generate the select statement.

JQuery

We use jQuery to conveniently create a select statement dynamically.

$ (Function () {// create a select tag $ ("<select/> "). appendTo ("nav"); // create the default option "Go... "$ (" <option/> ", {" selected ":" selected "," value ":" "," text ":" Go... "}). appendTo ("nav select"); // obtain the drop-down menu options, including text and link $ ("nav a") based on the links in the navigation menu "). each (function () {var el = $ (this); $ ("<option/>", {"value": el. attr ("href"), "text": el. text ()}). appendTo ("nav select") ;}); // jump to $ ("nav select") when selecting an option in the selected drop-down box "). change (function () {window. location = $ (this ). find ("option: selected "). val ();});});

Save the page at this time. You can see that there is a horizontal navigation menu and a drop-down select menu, both of which exist at the same time, how can we achieve different menu effects in different screen sizes?

Back to CSS, you need to use the CSS3 tool Media Queries to achieve the switching effect.

CSS

Nav select {display: none;} // hide select @ media (max-width: 960px) {nav ul {display: none;} nav select {display: inline-block; float: right; margin: 20px 100px }}

First, hide the selelct menu generated by javascript. When the window size is smaller than 960px, hide the horizontal navigation menu and display the drop-down menu.

On a desktop browser, when you change the window size to 960 pixels, you will see a change in the layout. Note that the max-width section above is only for testing. If you do not want the user to change the window size in the desktop browser, you can remove the max-width part, but only for those mobile devices.

Now you can use the mobile phone address xxx/demo/menu2drop on your Iphone or Android platform to check the effect.