I am trying to create a dropdown menu on the right side of my navbar, but I'm running into some issues. The element keeps floating left instead of right and the CSS for the li element is not being applied. I must be missing something. Can anyone offer some help or suggestions? Thanks in advance.
HTML code for header:
<div data-role="header" data-theme="b" id="header">
<div data-role="navbar" data-iconpos="bottom" class="nav-custom">
<ul>
<li>
<a href="#" class="back" data-rel="back" data-transition="fade" data-theme="" data-icon="back">
Back
</a>
</li>
<li>
<a href="#" id="bars" data-icon="custom" data-iconpos="notext" data-iconshadow="false"> </a>
</li>
</ul>
</div>
<ul id="menu-right">
<li data-icon="false"><a href="#a1">Option B1</a></li>
<li data-icon="false"><a href="#a1">Option B2</a></li>
</ul>
</div>
Javascript code:
var windowWidth = (parseInt($(window).width())/2);
$('#menu-right').css({'width': windowWidth});
$('#bars').bind('click', function(event) {
event.preventDefault();
$("#menu-right").toggle();
});
CSS code:
#header #menu-right{
display: none; /* Hide */
z-index:500; /* Ensure visibility over other elements on page */
margin-top: 0px; /* Bring menu closer to button; not needed on mobile */
}
#header #menu-right li{
display: block; /* JQM makes a inline-blocks... reset it to block */
}
#header ul li a{
white-space: normal; /* Stop long menu names from truncating */
}
#menu-right{
position: absolute;
float: right !important;
margin-right:0.5em;
}
Link to the JavaScript file: