Reputation: 808
I want to make dropdown right on the navbar.the problem is that the element always float left not right and also the css of li element is lost. I'm missing something. can anyone suggest for help Thanks in advance.
header html
<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
var windowWidth = (parseInt($(window).width())/2);
$('#menu-right').css({'width': windowWidth});
$('#bars').bind('click', function(event) {
event.preventDefault();
$("#menu-right").toggle();
});
css
#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;
}
here is the link of js file
Upvotes: 0
Views: 370
Reputation: 21
I think you should move the #menu-right in the that plus li.
<li>
<a href="#" id="bars" data-icon="custom" data-iconpos="notext" data-iconshadow="false"> </a>
<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>
</li>
And change the css
#menu-right{
margin:0;
padding: 0;
}
Upvotes: 1
Reputation: 83
In the CSS for #menu-right, rather use
right:0;
instead of
float: right !important;
Absolute positioning and floating does not work together.
To fix the CSS:
Add data-role="listview" data-inset="true" to your ul called "menu-right".
Upvotes: 2