Expanding bootstraps dropdown-submenu, keeping it inline with the parent menu - html

I want the submenu from the dropdown nav to be inline with its parent. The first link is inline fine because - .dropdown-submenu > .dropdown-menu {top:0;} but with the other links in the submenu the "top" position changes in relation to its parent menu link. Please look at http://bootply.com/66517
<ul class="dropdown-menu">
<li class="dropdown-submenu">
More options
<ul class="dropdown-menu">
<li>Second level link</li>
<li>Second level link</li>
<li>Second level link</li>
<li>Second level link</li>
<li>Second level link</li>
</ul>
</li>
<li class="dropdown-submenu">
More options
<ul class="dropdown-menu">
<li>Second level link</li>
<li>Second level link</li>
<li>Second level link</li>
<li>Second level link</li>
<li>Second level link</li>
</ul>
</li>
<li class="dropdown-submenu">
More options
<ul class="dropdown-menu">
<li>Second level link</li>
<li>Second level link</li>
<li>Second level link</li>
<li>Second level link</li>
<li>Second level link</li>
</ul>
</li>
<hr>
</ul>
</li>
</ul>

you can try this
this will works fine
.dropdown-submenu {
position: static !important;;
}
you can find this css in you min. version css of bootstrap but i prefer you modified it on that particular page in which you include this dropdown.

Related

Bootstrap sub menu just with hover

I have menu with sub menus. When i hover an li it works fine and show me the sub menu and hide. But if i click in menu it shows the sub menu but doesn't hide. I don't want allow to click on menu. Just show sub menu with hover.
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">menu</a>
<ul class="dropdown-menu">
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
<li>submenu 4</li>
</ul>
</li>
How can i solve that?
Thank you
Please add below css in your css file
.open > .dropdown-menu{display:none;}
li.dropdown:hover .dropdown-menu {display: block;}
Here is the working solution:
body {
padding-top: 60px;
padding-bottom: 40px;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown:hover .dropdown-menu {
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-pills">
<li class="active">Regular link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu" id="menu1">
<li>
2-level Menu <i class="icon-arrow-right"></i>
<ul class="dropdown-menu sub-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
Menu
</li>
<li class="dropdown">
Menu
</li>
</ul>
For the responsive you can find demo from here

Nested Hierarchy CSS Issue

Here is the fiddle:
https://jsfiddle.net/3h1hxy2w/4/
I'm trying to make a reusable set of CSS rules so that items under .ancestor class the first < l i>'s in .children groups would be visible, but their children would remain hidden. The problem is it seems to travel down opening all 'children' groups.
First I close all of the children with display: none, then open any descendants of .ancestor
In this situation, I cannot add any helpful classes or use jQuery. The current output is like this:
Item One
more items
STUFF!
more stuff
even more stuff
more items
More items
more items 2
more items
more items
More items
more items
more items
more items
More items
Item Two
Item Three
but I'm shooting for
Item One
more items
STUFF!
more stuff
even more stuff
more items
More items
more items 2
more items
Item Two
Item Three
Any ideas?
This is the html
<ul id="hier">
<li class="ancestor">
Item One
<ul class="children">
<li class="ancestor">more items
<ul class="children">
<li class="ancestor current-parent">
Parent
<ul class="children">
<li class="current-cat">STUFF!</li>
<li>more stuff</li>
<li>even more stuff</li>
</ul>
</li>
<li>more items</li>
<li>More items</li>
</ul>
</li>
<li>more items 2
<ul class="children">
<li>more items</li>
<li>more items</li>
<li>More items</li>
</ul>
</li>
<li>more items
<ul class="children">
<li>more items</li>
<li>more items</li>
<li>More items</li>
</ul>
</li>
</ul>
</li>
<li>
Item Two
<ul class="children">
<li>more items
<ul class="children">
<li>more items</li>
<li>more items</li>
<li>More items</li>
</ul>
</li>
<li>more items
<ul class="children">
<li>more items</li>
<li>more items</li>
<li>More items</li>
</ul>
</li>
<li>more items
<ul class="children">
<li>more items</li>
<li>more items</li>
<li>More items</li>
</ul>
</li>
</ul>
</li>
<li>
Item Three
<ul class="children">
<li>more items
<ul class="children">
<li>more items</li>
<li>more items</li>
<li>More items</li>
</ul>
</li>
<li>more items
<ul class="children">
<li>more items</li>
<li>more items</li>
<li>More items</li>
</ul>
</li>
<li>more items
<ul class="children">
<li>more items</li>
<li>more items</li>
<li>More items</li>
</ul>
</li>
</ul>
</li>
</ul>
And here is the CSS so far
ul { list-style-type: none; }
#hier li .children li { display: none; }
.ancestor .children li { display: block !important;}
ul { list-style-type: none; }
.children li { display: none; }
.ancestor > .children > li { display: block; }
It is always important to avoid !important. In this instance, the direct descendant selector (>) is your friend. If you require the id component of the rule, just be sure to apply it to both rules.

nav pills with dropdown in bootstrap3

I would like have a nav-pill with a dropdown showing a few different options. To this end, this is what I have:
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active">Home</li>
<li role="presentation">FAQ's</li>
<li role="presentation" class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</nav>
This does not seem to work however. I can see the dropdown but when I click, nothing happens. Wondering if anyone has encountered the same issue.
Thanks.
Your code seems to work fine I have a working fiddle at the following link Fiddle.
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active">Home</li>
<li role="presentation">FAQ's</li>
<li role="presentation" class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</nav>
Make sure that you have your libraries loaded in the correct order loading jquery.js first then bootstrap.js. If this is not the problem then you more than likely have conflicting javascript. Take out javascript files one by one and see what javascript is conflicting with bootstrap's javascript.
As wrote Drinkin People, you have working code! just load your jquery.js script before bootstrap.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
jsfiddle-link

how to show sub menu in a two column drop down menu

<ul class="dropdown-menu1 pull-left twoColumns">
<li class="dropdown submenu">
Welcome Slip<b class="caret1" style="margin-left:98px"></b>
<ul class="dropdown-menu left33">
<li>System Manual - L1</li> <li class="divider"></li>
<li>Procedure Manual-L-II </li> <li class="divider"></li>
<li>ROR</li> <li class="divider"></li>
<li>Key Process Maps</li>
</ul>
</li>
<li class="divider"></li>
<li>Is HelpDesk</li>
<li class="divider"></li>
<li>Meeting Manager System</li><li class="divider"></li>
<li>Outlook (Email on Intranet) </li><li class="divider"></li>
<li>BPCL(R) Material Movement</li><li class="divider"></li>
<li>Online Estates Services System</li><li class="divider"></li>
<li>Online Housekeeping System</li><li class="divider"></li>
<li>Electrical Maintenance Services</li><li class="divider"></li>
<li>Spares Inventory Management </li><li class="divider"></li>
<li>TECTrack - File Tracking System</li><li class="divider"></li>
<li>Action Taken Report </li><li class="divider"></li>
<li>Material Codification Request</li><li class="divider"></li>
<li>Asset Disposal Tracking System</li><li class="divider"></li>
<li class="dropdown submenu">
Online Purchase Requisition System<b class="caret1" style="margin-left:98px"></b>
<ul class="dropdown-menu left33">
<li>System Manual - L1</li> <li class="divider"></li>
<li>Procedure Manual-L-II </li> <li class="divider"></li>
<li>ROR</li> <li class="divider"></li>
<li>Key Process Maps</li>
</ul>
</li><li class="divider"></li>
<li>Contract Monitoring System</li><li class="divider"></li>
<li>License Tracking System</li><li class="divider"></li>
<li>CyberDOCS Application</li><li class="divider"></li>
<li>Scaffolding Material IssueTraker System</li><li class="divider"></li>
<li>Scaffolding Material IssueTraker System</li><li class="divider"></li>
<li>Telephone Directory</li><li class="divider"></li>
<li>Vehicle Pass Management System</li><li class="divider"></li>
<li>Access To Honeywell Network Camera</li><li class="divider"></li>
<li>Access To Network Cameras</li><li class="divider"></li>
<li>Public Relations Services</li><li class="divider"></li>
<li>Online Fire & Safety Exam</li>
</ul>
the sub menu is hidden behind the ul. How can it be shown above the ul. The twoColumns class gives css property columns:2 which makes the list appear in two columns. When i hover on "welcome list" the sub menu goes behind the second column of the list. Please help.
Try something simpler, see this fiddle.
<div id="navbar">
<ul id="dropdown">
<li class="topnav">ITEM ONE
<ul>
<div class="column">
<li>Subitem One</li>
<li>Second Subitem</li>
</div>
<div class="column">
<li>Subitem One</li>
<li>Second Subitem</li>
</div>
<div class="column">
<li>Subitem One</li>
<li>Second Subitem</li>
</div>
</ul>
</li>
</ul>
</div>
Does it makes sense for you?
.submenu{position:relative;}
.submenu .dropdown-menu{position:absolute;z-index:999;}
Hope it will work, if not please share your css also to find out the issue

Foundation 5.2 - dropdown submenu direction

I am trying to have my Share dropdown submenu content right aligned, not below Share
Here is my code:
<a href="#" data-dropdown="drop1" data-options="is_hover:true" >More</a>
<ul id="drop1" class="f-dropdown" data-dropdown-content>
<li>Infos</li>
<li class="has-dropdown" >Share
<ul class="dropdown" >
<li>This is a link</li>
<li>This is another</li>
<li>Yet another</li>
</ul>
</li>
<li>Third option</li>
</ul>
with custom css added to the original foundation one:
.has-dropdown ul{display:none;}
.has-dropdown:hover ul{display:block;}
The problem is that I cannot access Third option link, so I would like to have the This i a link, This another, Yet another submenu not below Share but just on the right...
As I found in the docs, I tried to add some data-options="align:right" like this:
<li class="has-dropdown" ><a data-options="align:right" href="#">Share</a>
... with no success... :(
EDIT1
With Sai Ram Sudheer answer, I have:
Not really better..
one way of doing is by aligning text in ul to right
.has-dropdown ul{display:none;}
.has-dropdown:hover ul{display:block;text-align:right;}
or you can use class right over li elements
<a href="#" data-dropdown="drop1" data-options="is_hover:true" >More</a>
<ul id="drop1" class="f-dropdown" data-dropdown-content>
<li>Infos</li>
<li class="has-dropdown" >Share
<ul class="dropdown" >
<li class="right">This is a link</li>
<li class="right">This is another</li>
<li class="right">Yet another</li>
</ul>
</li>
<li>Third option</li>
</ul>
oops i didn't get the question before.
I tried with data-options="align:left" but unable to get it to the right of main menu.
Check the navigation in this link that i did a while back .I used jquery and some css to get it.