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
Related
I was struggling wit this and found some way, I think I need to borrow power of css for this. please land me some skill if you know how.
I have navbar like this,
<div class = "header">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li 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>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
and second header
<div class="subheader" style="background:yellow;>
<p>you</p>
</div>
now I want to bring these two blocks together so they look like one navbar divided by background color. how do I do this? I tried setting padding, margin to zero for both but won't work
Supposing you are using bootstrap, just set margin-bottom: 0 for the .navbar. You might want to remove borders as well.
See fiddle: https://jsfiddle.net/yyw99nky/
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
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I would like to add a column to academic affairs so I can have two groups of four links adjacent to each other but I have failed at every attempt. Any help will be greatly appreciated.
</button><div class="navbar navbar-inverse">
<div class="navbar-header">
<button
IBHE
</div><!--enf of navbar-header -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home">Home</li>
<li>Executive Director's Corner
<ul class="dropdown-menu">
<li>Meet Dr. James Applegate</li>
<li>Blog</li>
<li>Media</li>
</ul>
</li>
<li> Academic Affairs
<ul class="dropdown-menu">
<li>IBHE Approval & Review</li>
<li>Academic Degree Programs</li>
<li>Colleges & Universities </li>
<li>SARA</li>
<li class="divider"></li>
<li>Enrollment & Degrees</li>
<li>Transfer of Academic Credits</li>
<li>P-20 Education Pipeline</li>
<li>Underrepresented Groups</li>
<li>Distance Education</li>
I am guessing you are using bootstrap, here is what i recomend below will give you an example of a few different Column layouts in dropdown part of the menu.
.dropdown-menu {
min-width: 200px;
}
.dropdown-menu.columns-2 {
min-width: 400px;
}
.dropdown-menu.columns-3 {
min-width: 600px;
}
.dropdown-menu li a {
padding: 5px 15px;
font-weight: 300;
}
.multi-column-dropdown {
list-style: none;
margin: 0px;
padding: 0px;
}
.multi-column-dropdown li a {
display: block;
clear: both;
line-height: 1.428571429;
color: #333;
white-space: normal;
}
.multi-column-dropdown li a:hover {
text-decoration: none;
color: #262626;
background-color: #999;
}
#media (max-width: 767px) {
.dropdown-menu.multi-column {
min-width: 240px !important;
overflow-x: hidden;
}
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!--/.navbar-header-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
One Column <b class="caret"></b>
<ul class="dropdown-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>
<li class="dropdown">
Two Column <b class="caret"></b>
<ul class="dropdown-menu multi-column columns-2">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here that's extra long so we can see how it looks
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>One more separated link
</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<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>
</div>
</div>
</ul>
</li>
<li class="dropdown">
Three Column <b class="caret"></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<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>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<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>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<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>
</div>
</div>
</ul>
</li>
<li>Link
</li>
</ul>
</div>
<!--/.navbar-collapse-->
</nav>
<!--/.navbar-->
External resources being used:
Important:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
I need to make drop down for one <li> element
<div class="head-nav">
<span class="menu"></span>
<ul class="cl-effect-15">
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li> </li>
<li> </li>
<li class="pull-right">More options
<ul class="dropdown-menu">
<li>one</li>
<li>two</li>
</ul>
</li>
<li class="pull-right">logout</li>
<div class="clearfix"> </div>
</ul>
</div>
but sub menu doesn't opens
using Bootstrap v3.1.1
NOTE : even adding after jquery also doesn't works
You have to use
<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>
In your code, you miss class "dropdown" for li tag.
For correct dropdown, you have to use this sintax:
<li class="dropdown">
Item Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<!--- Put your menu-item here -->
</ul>
</li>
You can refer the Bootstrap documentation here
The issue is causing by the missing of data-toggle="dropdown" in tag a
Maybe you search this solution: JSBin
For example:
You need add the content: attr(data-hover); on your before element.
HTML:
<li class="HOVER">More options
CSS:
.HOVER {
border: solid 7px #000;
padding: 20px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
position: relative;
width: 300px;
}
.HOVER:hover a:before {
content: attr(data-hover);
color: red;
display: block;
background: #000;
position: absolute;
top: 100%;
left: -7px;
right: -7px;
padding: 15px;
}
You're missing the the following attributes:
class="dropdown-toggle" data-toggle="dropdown"
and those attributes go on the element you want to be the "Hook" for the dropdown list.
Sample markup below:
<li class="dropdown">
<a href="#lala" class="dropdown-toggle" data-toggle="dropdown" >
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="listbox">
<li>jmeter</li>
<li>EJB</li>
<li>Jasper Report</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
Edit
Here is an example Fiddle; notice how if you remove data-toggle="dropdown", the code won't work . :)
How do I increase the width on the twitter bootstrap dropdown menu. I need the list to have Alcohol Incidents and Status Reports as an option but the default width is not large enough to encompass that much text.
<li class="dropdown subnavbar-open-right">
<span>Reports/Statistics</span><b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a>USN</a>
<ul class="dropdown-menu">
<li><a>Alcohol Incidents and Status Reports</a></li>
</ul>
Looking at the code you provided I made a test page using Twitter BootStrap's default set up and added your text "Alcohol Incidents and Status Reports" into the drop down menu. What I found is the drop down menu auto expanded to include the entire width of the text.
This means that either you have left some code out necessary for this to work correctly or you overriding CSS classes causing it not to work. Here is the code:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Alcohol Incidents and Status Reports</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>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
If this does not help you then you may want to provide more of your code so people can help you debug. I have a link to JSFiddle but it seems that we are not allowed to post those links now. Well here its extension /tS95X/1/ if you want to look it up.