i am having an issue with a menu using bootstrap. The small drop down menus open fine and are aligned however the large drop down menus always align left even if the menu heading is on the far right of the screen
i am looking to have one of the following happen
1 - open in the middle below the heading
2 - open to the right if its to far left
3 - open to the left if its to far right
i have created a fiddle of the issue
https://jsfiddle.net/fu847jnw/2/
how can i acheive the above
<div class="navbar-cont">
<div class="container">
<div class="row">
<div class="span12">
<div class="navbar navbar-default " role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-left">
<li>Home
</li>
<li>Products
</li>
<li>About Us
</li>
<li>Contact Us
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Single Drop Down <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>About Us
</li>
<li>Contact Us
</li>
<li>My Account
</li>
<li>Wish List
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
Large Dropdown <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li>Available glyphs
</li>
<li class="disabled">How to use
</li>
<li>Examples
</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li>Example
</li>
<li>Aligninment options
</li>
<li>Headers
</li>
<li>Disabled menu items
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Button groups</li>
<li>Basic example
</li>
<li>Button toolbar
</li>
<li>Sizing
</li>
<li>Nesting
</li>
<li>Vertical variation
</li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li>Single button dropdowns
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Input groups</li>
<li>Basic example
</li>
<li>Sizing
</li>
<li>Checkboxes and radio addons
</li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li>Tabs
</li>
<li>Pills
</li>
<li>Justified
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li>Default navbar
</li>
<li>Buttons
</li>
<li>Text
</li>
<li>Non-nav links
</li>
<li>Component alignment
</li>
<li>Fixed to top
</li>
<li>Fixed to bottom
</li>
<li>Static top
</li>
<li>Inverted navbar
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
This Is Really Large Title <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li>Available glyphs
</li>
<li class="disabled">How to use
</li>
<li>Examples
</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li>Example
</li>
<li>Aligninment options
</li>
<li>Headers
</li>
<li>Disabled menu items
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Button groups</li>
<li>Basic example
</li>
<li>Button toolbar
</li>
<li>Sizing
</li>
<li>Nesting
</li>
<li>Vertical variation
</li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li>Single button dropdowns
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Input groups</li>
<li>Basic example
</li>
<li>Sizing
</li>
<li>Checkboxes and radio addons
</li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li>Tabs
</li>
<li>Pills
</li>
<li>Justified
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li>Default navbar
</li>
<li>Buttons
</li>
<li>Text
</li>
<li>Non-nav links
</li>
<li>Component alignment
</li>
<li>Fixed to top
</li>
<li>Fixed to bottom
</li>
<li>Static top
</li>
<li>Inverted navbar
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
Just Another Menu Type<b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li>Available glyphs
</li>
<li class="disabled">How to use
</li>
<li>Examples
</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li>Example
</li>
<li>Aligninment options
</li>
<li>Headers
</li>
<li>Disabled menu items
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Button groups</li>
<li>Basic example
</li>
<li>Button toolbar
</li>
<li>Sizing
</li>
<li>Nesting
</li>
<li>Vertical variation
</li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li>Single button dropdowns
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Input groups</li>
<li>Basic example
</li>
<li>Sizing
</li>
<li>Checkboxes and radio addons
</li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li>Tabs
</li>
<li>Pills
</li>
<li>Justified
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li>Default navbar
</li>
<li>Buttons
</li>
<li>Text
</li>
<li>Non-nav links
</li>
<li>Component alignment
</li>
<li>Fixed to top
</li>
<li>Fixed to bottom
</li>
<li>Static top
</li>
<li>Inverted navbar
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Single Drop Down <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>About Us
</li>
<li>Contact Us
</li>
<li>My Account
</li>
<li>Wish List
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
Tmenu <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li>Available glyphs
</li>
<li class="disabled">How to use
</li>
<li>Examples
</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li>Example
</li>
<li>Aligninment options
</li>
<li>Headers
</li>
<li>Disabled menu items
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Button groups</li>
<li>Basic example
</li>
<li>Button toolbar
</li>
<li>Sizing
</li>
<li>Nesting
</li>
<li>Vertical variation
</li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li>Single button dropdowns
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Input groups</li>
<li>Basic example
</li>
<li>Sizing
</li>
<li>Checkboxes and radio addons
</li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li>Tabs
</li>
<li>Pills
</li>
<li>Justified
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li>Default navbar
</li>
<li>Buttons
</li>
<li>Text
</li>
<li>Non-nav links
</li>
<li>Component alignment
</li>
<li>Fixed to top
</li>
<li>Fixed to bottom
</li>
<li>Static top
</li>
<li>Inverted navbar
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Here is an example using your code. In the HTML I added a class tmenu-menu to your last menu item, like this:
Tmenu <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row tmenu-menu">
Then added this code in the CSS
#media (min-width: 1200px) {
.tmenu-menu {
right: 0;
left: inherit;
}
}
Now when you view your site and the width of your browser is 1200px or bigger you will see the large menu sit on the right hand side of your screen. Then when you shrink down the menu once below 1200px the menu will go back to the left side. One SO answer provides the various break points sizes but these are also available on the bootstrap website.
You will have to add your own custom classes and position the menus based on where you want them for each width size. I have updated your js.fiddle with my example code (I also left in the different media sizes that BS uses). This code isn't complete but should help you get pointed in the right direction. Hope that helps.
Related
I'm working with a menu. If the user moves the cursor over principal elements of the menu, it shows a sub-menu (it has a delay to hide), but if I move the cursor over another principal element, the previous element is still showing behind the new element (and is only hide passing the delay).
How can hide the previous element when I pass the cursor over another principal element?
Below is the menu:
$('li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(100);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(1000).fadeOut(100);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="main-menu" class="nav navbar-nav ref">
<li class="dropdown dropdown-large option">
<a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-4 option-sm">
<ul>
<li> </li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
<li> </li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-4 option-sm">
<ul>
<li> </li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
</ul>
</li>
</ul>
</li>
</ul>
I changed your second menu id to #drop-two.
$(document).ready(function(){
$('.dropdown-menu, .dropdown-menu2').hide();
$('#drop-to').mouseover(function() {
$('.dropdown-menu').fadeIn();
})
$('#drop-to').mouseout(function() {
$('.dropdown-menu').fadeOut(1000);
})
$('#drop-two').mouseover(function() {
$('.dropdown-menu2').fadeIn();
})
$('#drop-two').mouseout(function() {
$('.dropdown-menu2').fadeOut(1000);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="main-menu" class="nav navbar-nav ref">
<li class="dropdown dropdown-large option">
<a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-4 option-sm">
<ul>
<li> </li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
<li> </li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option">
<a id="drop-two" href="#" class="dropdown-toggle firstTextOption">P element</a>
<ul class="dropdown-menu2 dropdown-menu-large row change-f">
<li class="col-sm-4 option-sm">
<ul>
<li> </li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
</ul>
</li>
</ul>
</li>
</ul>
In Zurb foundation, I've found top-bar to be working good. But whenever large no of menu Items are added, the menu items float down instead of collapsing.
Normal Image:
Issue Image:
Expected Image:
Code:
<div class="fixed">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="has-dropdown">WIKISAN
<ul class="dropdown">
<li>Choose Another Program</li>
<li>Home</li>
</ul>
</li>
<li class="has-dropdown">Organization
<ul class="dropdown">
<li>List Organization</li>
<li>Add Organization</li>
</ul>
</li>
<li class="has-dropdown">Group
<ul class="dropdown">
<li>List Group</li>
<li>Add Group</li>
</ul>
</li>
<li class="has-dropdown">Individual
<ul class="dropdown">
<li>List Individual</li>
<li>Add Individual</li>
<li>Add Individual To Program</li>
</ul>
</li>
<li class="has-dropdown">Program
<ul class="dropdown">
<li class="has-dropdown">Kisan
<ul class="dropdown">
<li>Kisan Training Form</li>
<li>Kisan Training List </li>
<li>Kisan Leverage Form</li>
<li>Kisan Leverage List</li>
<li>Kisan Asset </li>
<li>Kisan Seed </li>
</ul>
</li>
</ul>
</li><li class="has-dropdown">Settings
<ul class="dropdown">
<li>Land Unit Converter</li><li>Add Indicator</li><li>Add District</li><li class="has-dropdown">Individual Lookup
<ul class="dropdown">
<li>Individual Activity</li>
<li>Individual Education</li>
<li>Language</li>
<li>Latrine Type</li>
<li>Occupation List</li>
<li>Project List</li>
<li>Religion</li>
<li>Social Group</li>
</ul>
</li><li class="has-dropdown">Organization Lookup
<ul class="dropdown">
<li>Organization Category</li>
<li>Organization Component</li>
<li>OCAT Stage List</li>
<li>Organization Sector</li>
<li>Organization Type</li>
</ul>
</li><li class="has-dropdown">Group Lookup
<ul class="dropdown">
<li>Group Registration</li>
<li>Group Sector</li>
<li>Group Type</li>
</ul>
</li><li class="has-dropdown">Training Lookup
<ul class="dropdown">
<li>Training Sector</li>
<li>Beneficiary Type</li>
<li>Training Type</li>
</ul></li><li class="has-dropdown">Leverage Lookup
<ul class="dropdown">
<li>Leverage Scheme</li>
</ul></li></ul></li> <li class="has-dropdown">Report
<ul class="dropdown">
<li>Report Dashboard</li>
<li>Summary Query Report</li>
</ul>
</li>
</ul>
<ul class="right">
<li class="has-dropdown"> Logged in as Sujit Prasad Baniya
<ul class="dropdown">
<li>Change Password</li><li>User Location Settings</li><li class="has-dropdown">Admin
<ul class="dropdown"><li>Add users</li>
<li>List users</li>
<li>Set Program Targets</li>
<li>Set Default Location</li>
<li>Query Log Report</li><li>Debug Mode On</li><li>Add Program</li>
<li>List Program</li>
<li>Add Activity</li>
<li>Add Activity To Program</li></ul></li>
<li>Logout</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
Here is the code that generated following result
It seems that the code is fine but on browser the drop down menu does not work the menu is simply not dropping down... I have attached the js script string as well... I don't know what to do, I can't find the problem...
Thanks,
Max
<div class="row">
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-arrow-down"></span>MENU</button>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav">
<li class="active" class="dropdown">Home<span class="caret"></span>
<ul class="dropdown-menu">
<li>Last Minute</li>
<li>News Letter</li>
<li>Blog</li>
<li>Privacy Policy</li>
</ul>
</li>
<li class="dropdown">Africa<span class="caret"></span>
<ul class="dropdown-menu">
<li>Info</li>
<li>Health</li>
<li>Flights</li>
<li>Ferry</li>
<li>Bus</li>
<li>Train</li>
<li>Overland</li>
</ul>
</li>
<li class="dropdown">Destinations<span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdown">Burundi<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Info</li>
<li>Bujumbura</li>
<li>Pacakges</li>
<li>Gorilla</li>
<li>Safaris</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Excursions</li>
</ul>
</li>
<li class="dropdown">Kenya<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Info</li>
<li>Nairobi</li>
<li>Mombasa</li>
<li>Pacakges</li>
<li>Safaris</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Excursions</li>
</ul>
</li>
<li class="dropdown">Rwanda<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Info</li>
<li>Kigali</li>
<li>Pacakges</li>
<li>Gorilla</li>
<li><a href="#"Safaris</a></li>
<li>Hotels</li>
<li>Transfers</li>
<li>Excursions</li>
</ul>
</li>
<li class="dropdown">Tanzania<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Info</li>
<li>Dar es Salaam</li>
<li>Arusha</li>
<li>Pacakges</li>
<li>Safaris</li>
<li>Kilimanjaro</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Excursions</li>
</ul>
</li>
<li class="dropdown">Zambia<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Info</li>
<li>Lusaka</li>
<li>Zambezi River</li>
<li>Pacakges</li>
<li>Safaris</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Excursions</li>
</ul>
</li>
<li class="dropdown">Zanzibar<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Info</li>
<li>Stonetown</li>
<li>Beach</li>
<li>Pacakges</li>
<li>Festivals</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Excursions</li>
</ul>
</li>
</ul>
</li>
<li>Gallery</li>
<li class="dropdown">Serene<span class="caret"></span>
<ul class="dropdown-menu">
<li>About</li>
<li>Team</li>
<li>Services</li>
<li>Contact</li>
<li>Reservations</li>
<li>Payments</li>
<li>Admin</li>
</ul>
</li>
<li class="dropdown">Members<span class="caret"></span>
<ul class="dropdown-menu">
<li>Specials</li>
<li class="dropdown">Rates<span class="caret"></span>
<ul class="dropdown-menu-right">
<li class="dropdown">Burundi<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Pacakges</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Activities</li>
</ul>
</li>
<li class="dropdown">Kenya<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Pacakges</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Activities</li>
</ul>
</li>
<li class="dropdown">Rwanda<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Pacakges</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Activities</li>
</ul>
</li>
<li class="dropdown">Tanzania<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Pacakges</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Activities</li>
</ul>
</li>
<li class="dropdown">Zambia<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Pacakges</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Activities</li>
</ul>
</li>
<li class="dropdown">Zanzibar<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Pacakges</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Activities</li>
</ul>
</li>
</ul>
</li>
<li>Admin</li>
<li>High Resolutions Pictures</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- javascript -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/dist/js/jquery-2.1.1.min.js"></script>
<script src="/dist/js/bootstrap.js"></script>
<script src="/dist/js/docs.min.js"></script>
<script>$(function () {$('.nav-tabs a:first').tab('show');});</script>
<script>$('a.btn-info').tooltip()</script>
<script>$('.dropdown-toggle').dropdown()</script>
<!-- End Body -->
This works when I throw it into a sample rails 4 app with bootstrap-sass setup. Are you sure that your dropdown menu isn't opening? I had an issue with a previous app where I thought it wasn't opening, but it was just being hidden by the containing element which was accidentally set to 'overflow: hidden;'.
Either way, there doesn't seem to be anything wrong with the code you posted.
I've been trying to get a the menu to drop, from an navbar navbar fixed top navbar inverse, additionally there is a toggle button to make the menu responsive on a small screen... menu is drop down and then drop right... well it doesn't drop down...
also I'm wondering if we can combine a drop down with an accordion? as the menu is contains a quite a few categories and a lot of sub categories?
Thanks,
Max
<div class="row">
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-arrow-down"></span>MENU</button>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav">
<li class="active" class="dropdown">Home<span class="caret"></span>
<ul class="dropdown-menu">
<li>Last Minute</li>
<li>News Letter</li>
<li>Blog</li>
<li>Privacy Policy</li>
</ul>
</li>
<li class="dropdown">Africa<span class="caret"></span>
<ul class="dropdown-menu">
<li>Info</li>
<li>Health</li>
<li>Flights</li>
<li>Ferry</li>
<li>Bus</li>
<li>Train</li>
<li>Overland</li>
</ul>
</li>
<li class="dropdown">Destinations<span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdown">Burundi<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Info</li>
<li>Bujumbura</li>
<li>Pacakges</li>
<li>Gorilla</li>
<li>Safaris</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Excursions</li>
</ul>
</li>
<li class="dropdown">Kenya<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Info</li>
<li>Nairobi</li>
<li>Mombasa</li>
<li>Pacakges</li>
<li>Safaris</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Excursions</li>
</ul>
</li>
<li class="dropdown">Rwanda<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Info</li>
<li>Kigali</li>
<li>Pacakges</li>
<li>Gorilla</li>
<li><a href="#"Safaris</a></li>
<li>Hotels</li>
<li>Transfers</li>
<li>Excursions</li>
</ul>
</li>
<li class="dropdown">Tanzania<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Info</li>
<li>Dar es Salaam</li>
<li>Arusha</li>
<li>Pacakges</li>
<li>Safaris</li>
<li>Kilimanjaro</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Excursions</li>
</ul>
</li>
<li class="dropdown">Zambia<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Info</li>
<li>Lusaka</li>
<li>Zambezi River</li>
<li>Pacakges</li>
<li>Safaris</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Excursions</li>
</ul>
</li>
<li class="dropdown">Zanzibar<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Info</li>
<li>Stonetown</li>
<li>Beach</li>
<li>Pacakges</li>
<li>Festivals</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Excursions</li>
</ul>
</li>
</ul>
</li>
<li>Gallery</li>
<li class="dropdown">Serene<span class="caret"></span>
<ul class="dropdown-menu">
<li>About</li>
<li>Team</li>
<li>Services</li>
<li>Contact</li>
<li>Reservations</li>
<li>Payments</li>
<li>Admin</li>
</ul>
</li>
<li class="dropdown">Members<span class="caret"></span>
<ul class="dropdown-menu">
<li>Specials</li>
<li class="dropdown">Rates<span class="caret"></span>
<ul class="dropdown-menu-right">
<li class="dropdown">Burundi<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Pacakges</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Activities</li>
</ul>
</li>
<li class="dropdown">Kenya<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Pacakges</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Activities</li>
</ul>
</li>
<li class="dropdown">Rwanda<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Pacakges</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Activities</li>
</ul>
</li>
<li class="dropdown">Tanzania<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Pacakges</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Activities</li>
</ul>
</li>
<li class="dropdown">Zambia<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Pacakges</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Activities</li>
</ul>
</li>
<li class="dropdown">Zanzibar<span class="caret"></span>
<ul class="dropdown-menu-right">
<li>Pacakges</li>
<li>Hotels</li>
<li>Transfers</li>
<li>Activities</li>
</ul>
</li>
</ul>
</li>
<li>Admin</li>
<li>High Resolutions Pictures</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
With reference to the following page:
http://www.myorange.ca/theme/jarvisadmin/
Upon page loading, all of the accordions on the left momentarily unfold and then hide again. How can I stop this momentary unfolding as the page is loading?
Give all of the non open LI's that are suppose to be closed a class of closed
change your navigation html
add class="closed" in main li on which menu open
like
<ul class="menu" id="accordion-menu-js">
<li class="closed"><a href="javascript:void(0)"><i class="icon-off"></i>Dashboard <span
class="badge">2</span></a>
<ul>
<li>Dashboard </li>
<li>Logout
</li>
</ul>
</li>
<li class="closed"><a href="inbox.html" class="expanded"><i class="icon-envelope"></i>
Inbox</a> </li>
<li class=""><i class="icon-check"></i>Forms<span class="badge">3</span>
<ul>
<li>Form Elements </li>
<li>Validation </li>
<li>Wizards </li>
</ul>
</li>
<li class="closed"><a href="javascript:void(0)"><i class="icon-user"></i>Interface<span
class="badge">3</span></a>
<ul>
<li>Interface Elements </li>
<li>Buttons & Icons </li>
<li>Tables </li>
</ul>
</li>
<li class="closed"><a href="javascript:void(0)"><i class="icon-signal"></i>Charts &
Graphs<span class="badge">3</span></a>
<ul>
<li>Basic Charts </li>
<li>Advanced Charts </li>
<li>Raphael Engine </li>
</ul>
</li>
<li class="closed"><i class="icon-refresh"></i>Smart Widgets
</li>
<li class="closed"><a href="javascript:void(0)"><i class="icon-plus"></i>Bonus<span
class="badge">4</span></a>
<ul>
<li>Invoice </li>
<li>Typography </li>
<li>Chat </li>
<li>Error Page </li>
</ul>
</li>
</ul>