Menus not added to drop down after resizing screen
Question
I am building responsive menus for that i have taken ordered list and unordered list and using css for look and feel for menus.I have wrote script for adding menus dynamically to the drop down but the problem is that when i resizes screen nothing shown on screen except background color of bodyin a script i am trying to build dynamic drop down which will hold your actual menus
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/mycss.css" />
</head>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li><a href="#">Home</a></li>
<li>
<a href="#">Movies <span class="arrow">▼</span></a>
<ul class="sub-menu">
<li><a href="#">In Cinemas Now</a></li>
<li><a href="#">Coming Soon</a></li>
<li><a href="#">On DVD/Blu-ray</a></li>
<li><a href="#">Showtimes & Tickets</a></li>
</ul>
</li>
<li><a href="#">T.V. Shows</a></li>
<li class="current-item"><a href="#">Photos</a></li>
<li><a href="#">Site Help</a></li>
</ul>
</nav>
</div>
<script>
$("<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");
});
$("nav select").change(function () {
window.location = $(this).find("option:selected").val();
});
</script>
</body>
</html>
This is my css file where i am displaying and hiding menus according to the screen sizes
nav select
{
display: none;
}
@media (max-width: 600px) {
nav ul { display: none; }
nav select { display: inline-block; }
}
<!-- end snippet -->
nav select
{
display: none;
}
@media (max-width: 600px) {
nav ul { display: none; }
nav select { display: inline-block; }
}
2 answers
solution1
0 2015-09-24 08:51:58
Your tags suggest you are using Bootstrap. But I don't see any Bootstrap-Classes in your HTML.
Did you already look at the Bootstrap NavBar Example ? Isn't this exactly what you want?
So how about using Bootstrap's NavBar Component , add the Bootstrap-JavaScript, which needs to have the Collapse-Plugin , and have Boostrap do that for you?
solution2
0 2015-09-24 09:48:18
Here you have the navbar created using Bootstrap
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
<a href="#">Home</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Movies <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">In Cinemas Now</a></li>
<li><a href="#">Coming Soon</a></li>
<li><a href="#">On DVD/Blu-ray</a></li>
<li><a href="#">Showtimes & Tickets</a></li>
</ul>
</li>
<li>
<a href="#">T.V. Shows</a>
</li>
<li>
<a href="#">Photos</a>
</li>
<li>
<a href="#">Site Help</a>
</li>
</ul>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.