CODEWITHSUNDEEP
androidjqueryhtmlcssjquery-mobile
ANonmous Change
ANonmous Change

Reputation: 808

Is there a way by which I can make my dropdown menu appear on the right using jquery mobile?

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">&nbsp;</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

Jsfiddle

Upvotes: 0

Views: 370

Answers (2)

Mohsen.Khakbiz
Mohsen.Khakbiz

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">&nbsp;</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

Ruan
Ruan

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

Related Questions