Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Menu transformation - ul li to select option
<div id="main-menu">
<nav>
<ul class="menu"><li class="current-menu-item"><a href="#link1">Link1</a></li>
<li><a href="#link2">Link2</a></li>
<li><a href="#link3">Link3</a></li>
<li><a href="#link4">Link4</a>
</li>
</ul>
</nav>
</div>
<p class="hint">Resize this window to see the effect</p>

Menu transformation - ul li to select option

In this Pen I'll show you how to transform website menu to dropdown menu automatically.

A Pen by Paweł Mansfeld on CodePen.

License.

$(document).ready(function(){
if (matchMedia) {
var mob = 0;
var mq = window.matchMedia("(max-width: 767px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
function WidthChange(mq) {
if (mq.matches) {
mob = 1;
$("nav").append("<select />");
$("<option />", {
"selected": "selected",
"value" : "",
"text" : "Menu..."
}).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();
});
$('.menu').hide();
}
else {
$("nav select").hide();
$('.menu').show();
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
li {
display:inline;
margin:12px;
}
.hint{
font-size:10px;
color:#aaa;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment