Consider you have two separate menu and you want to combine those menu into one drop down menu for responsive mobile devices. Let's see how that is working.

<nav>
Menu 1
<ul>
<li><a href="#" class="active">Home 1</a></li>
<li><a href="#">Home 2</a></li>
<li><a href="#">Home 3</a></li>
<li><a href="#">Home 4</a></li>
<li><a href="#">Home 5</a></li>
</ul>
</nav>

Now let's see other menu source code.

<nav>
Menu 2
<ul>
<li><a href="#" class="active">Home 6</a></li>
<li><a href="#">Home 7</a></li>
<li><a href="#">Home 8</a></li>
<li><a href="#">Home 9</a></li>
<li><a href="#">Home 10</a></li>
</ul>
</nav>

As we want to combine this two menu into one drop down menu, so our final output will look like as follows:

<select>
<option selected="selected" value="">Go to...</option>
<option value="#">Home 1</option>
<option value="#">Home 2</option>
<option value="#">Home 3</option>
<option value="#">Home 4</option>
<option value="#">Home 5</option>
<option value="#">Home 6</option>
<option value="#">Home 7</option>
<option value="#">Home 8</option>
<option value="#">Home 9</option>
<option value="#">Home 10</option>
</select>

Now to do this you need at first to call some jquery to make it happen. So let's call jquery library and call some custom jquery like as follows:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function() {

$("<select />").appendTo("#responsive");

$("<option />", {
"selected": "selected",
"value" : "",
"text" : "Go to..."
}).appendTo("nav select");

$("nav a").each(function() {
var el = $(this);
$("<option />", {
"value" : el.attr("href"),
"text" : el.text()
}).appendTo("nav select");
});

$("nav select").change(function() {
window.location = $(this).find("option:selected").val();
});

});
</script>

Now Create two html menu like as follows:

<nav>
Menu 1
<ul>
<li><a href="#" class="active">Home 1</a></li>
<li><a href="#">Home 2</a></li>
<li><a href="#">Home 3</a></li>
<li><a href="#">Home 4</a></li>
<li><a href="#">Home 5</a></li>
</ul>
</nav>

<nav>
Menu 2
<ul>
<li><a href="#" class="active">Home 6</a></li>
<li><a href="#">Home 7</a></li>
<li><a href="#">Home 8</a></li>
<li><a href="#">Home 9</a></li>
<li><a href="#">Home 10</a></li>
</ul>
</nav>

Finally we need to create a space, where responsive select box will call. So let's create a nav and give it an id. See below code:

<nav id="responsive"></nav>

Finally when you will render the code you will see you got one combined select box for mobile devices. Complete source code will be as follows:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function() {

$("<select />").appendTo("#responsive");

$("<option />", {
"selected": "selected",
"value" : "",
"text" : "Go to..."
}).appendTo("nav select");

$("nav a").each(function() {
var el = $(this);
$("<option />", {
"value" : el.attr("href"),
"text" : el.text()
}).appendTo("nav select");
});

$("nav select").change(function() {
window.location = $(this).find("option:selected").val();
});

});
</script>
</head>

<body>

<nav>
Menu 1
<ul>
<li><a href="#" class="active">Home 1</a></li>
<li><a href="#">Home 2</a></li>
<li><a href="#">Home 3</a></li>
<li><a href="#">Home 4</a></li>
<li><a href="#">Home 5</a></li>
</ul>
</nav>

<nav>
Menu 2
<ul>
<li><a href="#" class="active">Home 6</a></li>
<li><a href="#">Home 7</a></li>
<li><a href="#">Home 8</a></li>
<li><a href="#">Home 9</a></li>
<li><a href="#">Home 10</a></li>
</ul>
</nav>

<nav id="responsive"></nav>
</body>

</html>

Add comment


Security code
Refresh