Some times we have to show Menu or Navigation Bar with dynamic items. Because of various screen resolutions like Mobile and PC the Menu Items might be hidden or overflown. To avoid disturbance with User Interface, it is better to move overflown menu items to MORE option. In this article I am going to explain how can we make Responsive Menu or Navigation Bar by moving overflown elements to MORE option.
How it works :
- Calculate total-width of Navigation Bar or Menu
- Calculate summation of individual widths of Menu Items by iterating them.
- Find the overflown elements by comparing widths.
- Add overflown elements to More Option.
Observe the below Markup and CSS. This Markup needs more than 1000px width to display. If your screen resolution is less then Menu Items will be overflown.
Markup :
<ul id="horizontal">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
<li><a href="#">item 5</a></li>
<li><a href="#">item 6</a></li>
<li><a href="#">item 7</a></li>
<li><a href="#">item 8</a></li>
<li><a href="#">item 9</a></li>
<li><a href="#">item 10</a></li>
<li><a href="#">item 11</a></li>
<li><a href="#">item 12</a></li>
<li><a href="#">item 13</a></li>
<li><a href="#">item 14</a></li>
<li><a href="#">item 15</a></li>
<li><a href="#">item 16</a></li>
<li><a href="#">item 17</a></li>
<li><a href="#">item 18</a></li>
<li><a href="#">item 19</a></li>
</ul>
CSS :
ul#horizontal, #horizontal ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#horizontal li {
float: left;
}
#horizontal {
height: 50px;
float: left;
width:100%;
}
#horizontal a:visited {
font-weight: bold;
background-color: #98bf21;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
#horizontal a:link, div.horizontal a:visited {
font-weight: bold;
background-color: #98bf21;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
#horizontal a {
display: block;
line-height:50px;
padding:38px 36px;
color: #6e6e6e;
font: bold 12px Helvetica, Arial, sans-serif;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
-webkit-transition: border-color .218s;
-moz-transition: border .218s;
-o-transition: border-color .218s;
transition: border-color .218s;
background: #f3f3f3;
background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
}
#horizontal a:hover {
color: #333;
border-bottom:3px solid rgb(1,202,255);
padding-bottom:35px;
}
#horizontal li.hideshow ul{
position:absolute;
background: #f3f3f3;
display:none;
left:0px;
}
#horizontal li.hideshow
{
position:relative;
}
jQuery :
$(function() {
alignMenu();
$(window).resize(function() {
$("#horizontal").append($("#horizontal li.hideshow ul").html());
$("#horizontal li.hideshow").remove();
alignMenu();
});
function alignMenu() {
var w = 0;
var mw = $("#horizontal").width() - 150;
var i = -1;
var menuhtml = '';
jQuery.each($("#horizontal").children(), function() {
i++;
w += $(this).outerWidth(true);
if (mw < w) {
menuhtml += $('<div>').append($(this).clone()).html();
$(this).remove();
}
});
$("#horizontal").append(
'<li style="position:relative;" href="#" class="hideshow">'
+ '<a href="#">more '
+ '<span style="font-size:13px">↓</span>'
+ '</a><ul>' + menuhtml + '</ul></li>');
$("#horizontal li.hideshow ul").css("top",
$("#horizontal li.hideshow").outerHeight(true) + "px");
$("#horizontal li.hideshow").click(function() {
$(this).children("ul").toggle();
});
}
});
