I am attempting to create a responsive menu that behaves similarly to the one on Google Plus. In this menu, main options are either added to or removed from the "more" dropdown as the window is resized.
Here is the current appearance of my menu:
Below is the code snippet:
// JQuery
$(document).ready(function() {
$("a.drop-menu").click(function () {
$('#drop-menu').toggle();
});
});
<!-- HTML -->
<ul id="navigation">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Calendar</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="javascript:;" class="drop-menu">More</a>
<ul id="drop-menu">
<li><a href="#">Contact</a></li>
<li><a href="#">Contact</a></li>
</ul></li>
</ul>
/* CSS */
#navigation {
list-style-type: none;
padding: 0px;
margin: 0px;
}
#navigation li {
display: inline-block;
}
#navigation li a:link, #navigation li a:visited, #navigation li a:active {
display: block;
width: 120px;
line-height: 50px;
text-align: center;
font-weight: bold;
text-decoration: none;
background-color: #27383F;
color: #CCC8C0;
}
#navigation li a:hover, #navigation li a.active {
background-color: #2C3C53;
}
#drop-menu {
display: none;
position: absolute;
padding: 0px;
margin: 0px;
}
#drop-menu li {
display: block;
}
Currently, when resizing the browser window, the menu options collapse in this manner:
However, this image displays what I aim to achieve:
I am curious if there is a way to achieve this without utilizing media queries. More specifically, I have two questions:
- How can I dynamically determine whether the window size is adequate to display all
litags in the main navigation on a single line? - How do I switch the placement of the
litags between the main menu and the "more" menu?