Issue with responisve menu converting to drop down
I have a <ul><li> list that I am using JQuery to convert into a <select><option> drop down, then using responsive CSS to hide it and unhide it depending on browser size. I am having some issues with the code that converts the menu into a drop down.
It looks to me like the code is just taking the text and making a list. I am trying to take the href value and add that value to the option value.
For example, this code will populate the drop down with the menu items text and their value with no iseeues at all.:
$("nav a").each(function() {
var el = $(this);
$("<option />", {
"value" : el.attr("href"),
"text" : el.text()
}).appendTo("nav select");
});
However, there is no list form to this code, its just one long list of pages, which makes it unusable to me.
This code creates the drop down with the following format
main page
-page1
-page2
maine page
-page1
-page2
Here is that code:
$("nav > ul > li").each(function() {
var el = $(this);
var hasChildren = el.find("ul"),
children = el.find("li");
if (hasChildren.length) {
$("<optgroup />", {
"label": el.find("> a").text()
}).appendTo("nav select");
children.each(function() {
$("<option />", {
"text": " - " + $(this).text()
}).appendTo("optgroup:last");
});
} else {
$("<option />", {
"value" : el.attr("href"),
"text" : el.text()
}).appendTo("nav select");
}
});
However, the issue I have its its not adding the href value ("value" : el.attr("href"),) to the option item.
Here is the full code:
<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 > ul > li").each(function() {
var el = $(this);
var hasChildren = el.find("ul"),
children = el.find("li");
if (hasChildren.length) {
$("<optgroup />", {
"label": el.find("> a").text()
}).appendTo("nav select");
children.each(function() {
$("<option />", {
"text": " - " + $(this).text()
}).appendTo("optgroup:last");
});
} else {
$("<option />", {
"value" : el.attr("href"),
"text" : el.text()
}).appendTo("nav select");
}
});
// To make dropdown actually work
// To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/
$("nav select").change(function() {
window.location = $(this).find("option:selected").val();
});
});
</script>
<nav>
<ul class='menu'>
<li style='border-right: 1px solid #000;'><a href='/' class='top_menu'>WHO</a>
<ul class ='sub_menu menu1'>
<li><a href='/who/brain-trust'>Brain Trust</a></li>
<li><a href='/'>Locations</a></li>
<li><a href='/who/mission-vision-and-values'>Mission/Values</a></li>
<li><a href='/who/corporate-leadership'>Corporate Leadership</a></li>
<li><a href='/media'>Media</a></li>
<li><a href='/'>The Company</a></li>
</ul>
</li>
<li style='border-right: 1px solid #000;'><a href='/' class='top_menu'>WHAT</a>
<ul class ='sub_menu menu2'>
<li><a href='/'>Dimensions</a></li>
<li><a href='/'>Products</a></li>
<li><a href='/'>Solutions</a></li>
<li><a href='/'>Events</a></li>
</ul>
</li>
<li style='border-right: 1px solid #000;'><a href='/' class='top_menu'>HOW</a>
<ul class ='sub_menu menu3'>
<li><a href='/'>Distribution</a></li>
<li><a href='/'>Best Practices</a></li>
</ul>
</li>
<li><a href='/' class='top_menu'>WHY</a>
<ul class ='sub_menu menu4'>
<li><a href='/'>Legal</a></li>
<li><a href='/'>Validity</a></li>
<li><a href='/'>Testimonials</a></li>
<li><a href='/'>Case Studies</a></li>
</ul>
</li>
</ul>
</nav>
If you have any thoughts, please send them my way. Thanks.