dlthumbs-ConvertMenuToDropdownNow a days its most needed to make any website responsive  because of the wide range of devices and variety of display size.  Now I am going to help you telling  “How to Convert Menu to a Dropdown for Mobile “. Its quit easy. I use CSS3 and jQuery in this case. Hopefully this tutorial will help you.

STEP  1 : Write standard HTML and make a menu with list( li ).
<li><a href=”#” class=”active”>Home</a></li>
<li><a href=”#books”>Books</a></li>
<li><a href=”#blog”>Blog</a></li>
<li><a href=”#about”>About Us</a></li>
<li><a href=”#support”>Support</a></li>
STEP 2: Define CSS3 code for HTML coding.
* { margin: 0; padding: 0;}
nav {display: block; width: 960px; margin: 100px auto; text-align: center;}
nav ul {list-style: none;}
nav li {display: inline-block;}
nav a {display: inline-block; background: #333; color: white; padding: 5px 15px; border: 1px solid white; text-decoration: none;}
nav a:hover {border: 1px solid #f00; background: #f00;}
nav a:active {background: blue;}
nav select {display: none;}
STEP 3: Now add CSS3 code for responsive design.
@media (max-width: 960px) {
nav ul { display: none; }
nav select { display: inline-block; }
STEP 4: Write jQuery to convert Menu ( List ) to DropDown ( Select-Option)
<script>// DOM ready
$(function() {

// 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”);

// To make dropdown actually work
$(“nav select”).change(function() {
window.location = $(this).find(“option:selected”).val();



Thanks for reading my Blog. Hope those codes will help you. If You have any question let me know through comment.