Responsive Select Nav with Optgroup – demo doesn’t work

[crystalrh]

Hi,
At the bottom of this article

https://css-tricks.com/convert-menu-to-dropdown/

There is this variation that indents child navigation items:

“A variation of the same concept, where there is nested menus and it makes optgroups in the select based on the parent/child relationships.”

https://css-tricks.com/examples/ConvertMenuToDropdown/optgroup.php

Looks simple, but the links don’t work(even in the demo). It adds the space and the dash into the URL as well as the select nav.

// DOM ready
$(function() {

// Create the dropdown base
$(““).appendTo(“nav”);

// Create default option “Go to…”
$(““, {
“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) {

$(““, {
“label”: el.find(“> a”).text()
}).appendTo(“nav select”);

children.each(function() {

$(““, {
“text”: ” – ” + $(this).text()
}).appendTo(“optgroup:last”);

});

} else {

$(““, {
“value” : el.attr(“href”),
“text” : el.text()
}).appendTo(“nav select”);

}

});

// To make dropdown actually work
// To make more unobtrusive: https://css-tricks.com/4064-unobtrusive-page-changer/
$(“nav select”).change(function() {
window.location = $(this).find(“option:selected”).val();
});

});

Any javascript experts know how to fix this?
Thanks

ps: there’s no visible search on this forum.

[Kulsha]

Hi, I have noticed the same problem and would love to use the drop down menu option for a 2 level nav, but it doesn’t work in your demo (the select drop down works but the links themselves are carried through with the list (page) name rather than its actual URL. Could anyone assist with a fix. I assume the javascript needs editing but I don’t know javascript, have tried a few things but no luck …

Thanks

[Author]

Posts