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

<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

Related

Creating a Static/Fixed Nav Bar with Only HTML

hope you're doing well.
My boss recently asked me to rebuild the nav bar on our site.
He wants to move away from our current method of just having the nav code on each and every web page - so we can make edits to the nav bar periodically that will be automatically implemented across the website.
He built our website back in the early days of web dev, and as such it is basically an HTML animal that really just gets the job done (and has for years) but is not responsive or pretty.
He's adamantly against using any sort of PHP or JS, since my initial thought was a JQuery script to grab a nav.html file on each page. Bummer!
That being said, does anyone know how I can essentially create the same results? Having a singular file or block of code that can be changed and then reflected on all pages across our site , using only HTML?
Thanks in advance everyone!
Here is the code we currently have copied to all of our pages, which was created long ago:
<div id="navbox">
<!----BEGIN NAV----->
<!-- #BeginLibraryItem "/library/mainsite_nav.lbi" -->
<link href="css_files/nav_control_main2.css" rel="stylesheet" type="text/css" />
<ul id="nav_horiz">
<li class="navbar"></li>
<li class="navbar">Products
<ul>
<li class="navdrop">Underwater Lasers
<ul class="flyout">
<li class="navdrop">Underwater Scanners</li>
<li class="navdrop">Subsea Scanners</li>
<li class="navdrop">Nuclear Underwater Scanner</li>
<li class="navdrop">Laser Scanner PanTilt Arm</li>
<li class="navdrop">Angle/Distance Scanner</li>
<li class="navdrop"> </li>
</ul>
</li>
<li class="navdrop">Nuclear Inspection
<ul class="flyout1">
<li class="navdrop">Core Verification System</li>
<li class="navdrop">Nuclear Underwater Scanner</li>
<li class="navdrop">Inspector In-Tank Robot</li>
<li class="navdrop">Upper RPV Measuring Robot</li>
<li class="navdrop">Restricted Area Access Control</li>
<li class="navdrop"> </li>
</ul>
</li>
<li class="navdrop">Robotics<a href="robot_inspector_land.html">
<ul class="flyout2">
<li class="navdrop">Inspector In-Tank Robot</li>
<li class="navdrop">Surveyor Inspection Robot</li>
<li class="navdrop">Press Die Vision System</li>
<li class="navdrop">Upper RPV Measuring Robot</li>
<li class="navdrop"> </li>
</ul>
</li>
<li class="navdrop">Machine Vision
<ul class="flyout3">
<li class="navdrop">Line & Area Scanning</li>
<li class="navdrop">Non-Contact Gauging</li>
<li class="navdrop">Surface Defects</li>
<li class="navdrop">Pattern Matching</li>
<li class="navdrop">Assembly Verification</li>
<li class="navdrop"></li>
<li class="navdrop">FME Console</li>
<li class="navdrop">QuadCam Zoned Surveillance</li>
<li class="navdrop"> </li>
</ul>
</li>
<li class="navdrop"> </li>
</ul>
</li>
<li class="navbar">Industries
<ul>
<li class="navdrop">Nuclear Power</li>
<li class="navdrop">Oil and Gas</li>
<li class="navdrop">Marine</li>
<li class="navdrop">Automotive</li>
<li class="navdrop">Bottling & Canning</li>
<li class="navdrop">Aerospace</li>
<li class="navdrop">Other Industries</li>
<li class="navdrop"> </li>
</ul>
</li>
<li class="navbar3">Technologies
<ul>
<li class="navdrop">Underwater Laser Scanning</li>
<li class="navdrop">Nuclear Core Validation</li>
<li class="navdrop">Inspector In-Tank Robot</li>
<li class="navdrop">Line & Area Scanning</li>
<li class="navdrop">Non-Contact Gauging</li>
<li class="navdrop">Surface Defects</li>
<li class="navdrop">Pattern Matching</li>
<li class="navdrop">Assembly Verification</li>
<li class="navdrop">Robotics<a href="robot_inspector_land.html">
<li class="navdrop"> </li>
</ul>
</li>
<li class="navbar">Newsroom</li>
<li class="navbar">About Us
<ul>
<li class="navdrop">Core Competence</li>
<li class="navdrop">Company Background</li>
<li class="navdrop">Academic Website</li>
<li class="navdrop">Careers at Newton</li>
<li class="navdrop"> </li>
</ul>
</li>
<li class="navdrop">Contact Us</li>
</ul><!-- #EndLibraryItem -->
</div>

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

Multilevel Dropdown in Bootstrap 3.3.5

I have the following HTML code and I've structured it to how I think it should be achieved based on the mark-up in the Bootstrap docs.
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li class="dropdown">
Hospital<span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdown">
Consultants <span class="caret"></span>
<ul class="dropdown-menu">
<li>Adult cardiac surgery</li>
<li>Bariatric surgery</li>
<li>Colorectal surgery</li>
<li>Endocrine and thyroid surgery</li>
<li>Head and neck cancer surgery</li>
<li>Interventional cardiology</li>
<li>Lung Cancer</li>
<li>Neurosurgery</li>
<li>Orthopaedic surgery</li>
<li>Upper gastro-intestinal surgery</li>
<li>Urological surgery</li>
<li>Vascular surgery</li>
</ul>
</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>
</div>
However, this isn't working, it gives me this:
When I click on the Consultants, it simply gets rid of the dropdown. Can multilevel drop-downs be achieved with Bootstrap CSS/JS alone? Or must we write custom CSS for it?
Any easy solutions that would work similar to how a single nest level work, and are responsive and touch-friendly (for tablets and phones)?
Thanks
I don't recall any default example from bootstrap 3 having 3 level drop down nav menu, but you can do like this, little bit of customization and java-script and it's fully responsive.
HTML
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"> Home
</li>
<li class="dropdown">Hospital<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">Consultants
<ul class="dropdown-menu">
<li>Adult cardiac surgery
</li>
<li>Bariatric surgery
</li>
<li>Colorectal surgery
</li>
<li>Endocrine and thyroid surgery
</li>
<li>Head and neck cancer surgery
</li>
<li>Interventional cardiology
</li>
<li>Lung Cancer
</li>
<li>Neurosurgery
</li>
<li>Orthopaedic surgery
</li>
<li>Upper gastro-intestinal surgery
</li>
<li>Urological surgery
</li>
<li>Vascular surgery
</li>
</ul>
</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>
</div>
CSS
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu>a:after {
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
border-left-color:#555;
}
.dropdown-submenu.pull-left {
float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left:-100%;
margin-left:10px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
}
JS
(function ($) {
$(document).ready(function () {
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
Working Example

Make a sub menu

I would like to combine my two entries in a new submenu
I have this
<li class="dropdown" ng-controller="MenuPropertiesCtrl">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Properties <span
class="caret"></span></a>
<ul class="dropdown-menu" role="menu" ng-click="$event.stopPropagation()"
style="width: 450px !important">
<li>Creer</li>
<li class="divider"></li>
<li>Comparer properties par versions</li>
<li class="divider"></li>
<li>Comparer properties par plateformes</li>
</ul>
</li>
I have this
Properties
|
|_Creer
|
|_Comparer properties par versions
|
|_Comparer properties par plateformes
So i want to do this ..?
Properties
|
|_Creer
|
|__Comparer
|
|_Comparer properties par versions
|
|_Comparer properties par plateformes
Example in JS Fiddle
you are using the bootstrap make easily drop dun menu. put this html script in your menu
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
and more info to refer this link http://getbootstrap.com/components/#nav

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

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.