I'm trying to make multilevel menu based on twitter bootstrap.
http://jsfiddle.net/W3Zj8/
Here is the HTML:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Twitter Bootstrap Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
<body>
<div class="container">
<div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-submenu"><a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li class="dropdown-submenu"><a tabindex="-1" href="#">Sub with sub</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">SubSub1</a></li>
<li><a tabindex="-1" href="#">SubSub2</a></li>
</ul>
</li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I can't figure out why the submenu is hidden untill I hover on "More options"
But then I see directky the second level menu.
While I expect (and would like) to see it appearing only when I hover on "Sub with sub" submenu item.
Do you have a suggestion?
Add to your css next code:
.dropdown-submenu:hover > .dropdown-menu .dropdown-menu { display: none; }
.dropdown-submenu:hover .dropdown-submenu:hover > .dropdown-menu { display: block; }
Apparently it is not possible "out of the box" ; you'll have to make CSS modifications by yourself.
See this thread for more information : Twitter Bootstrap Multilevel Dropdown Menu
There is a demo link at the end of the best response, which seems to corresponds at what you are waiting for !
Florian
Related
Can anyone suggest how to adjust submenu(s) parallel to main menu.(without using negative margin-top)
Need output like this
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
.dropdown-submenu {
position: relative;
}
All you need to do, is remove that. Then the outer div container will become the reference point for the absolute positioning of those elements (because it is now the closest positioned ancestor.)
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
/*
.dropdown-submenu {
position: relative;
}
*/
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
I have tried this, and everything is OK except second level sub-menus
it doesn't close automatically when i choose another item's sub-menus
gor example when i choose page1-3 and then page1-4
items of the 1-3 still remain in page until i click on them again
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#media only screen and (min-width: 500px) {
nav{float:right;
}
li{
float:right !important;
text-align:right;
direction:rtl ;
}
.dropdown-menu{
right:0 !important;
}
}
nav{text-align:right; }
li{text-align:right; direction:rtl;}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
margin-right: 100%;
margin-top: -1px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li class="dropdown-submenu">
<a class="test" href="#">Page 1-3<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">Page 1-4<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>4rd level dropdown</li>
<li>4rd level dropdown</li>
</ul>
</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>
What you can do is first on click of sub-menu hide all menu inside submenu than toggle ul find more in below snippet
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#media only screen and (min-width: 500px) {
nav{float:right;
}
li{
float:right !important;
text-align:right;
direction:rtl ;
}
.dropdown-menu{
right:0 !important;
}
}
nav{text-align:right; }
li{text-align:right; direction:rtl;}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
margin-right: 100%;
margin-top: -1px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li class="dropdown-submenu">
<a class="test" href="#">Page 1-3<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">Page 1-4<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>4rd level dropdown</li>
<li>4rd level dropdown</li>
</ul>
</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(".dropdown-submenu .dropdown-menu").css("display","none");
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>
Add this to your script:
$('.dropdown-submenu > ul').hide();
solved code is:
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$('.dropdown-submenu > ul').hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
In Bootstrap 3, I want to put several links in a drop-down menu:
<li class="dropdown">
<a id="alert" data-toggle="dropdown" class="dropdown-toggle" href="#" title="Notification">Notifications </a>
<ul id="noti" class="dropdown-menu">
{% for t in alerts%}
<li>
{{t.title}}
</li>
{% endfor %}
</ul>
</li>
The problem is that each link has a different width, so I'm wondering how to define css to wrap even the longest links in the menu?
I have implement snippet that you can change as per your requirement.Main part is CSS change :
.dropdown-menu {
max-width: 180px;
}
.dropdown-menu li a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>HTML CSS JavaScript bootstrap</li>
</ul>
</div>
</div>
</body>
</html>
Try this one.
<li class="dropdown">
<a id="alert" data-toggle="dropdown" class="dropdown-toggle" href="#" title="Notification">Notifications </a>
<div class="dropdown-menu" style="width: auto;">
<ul id="noti" >
{% for t in alerts%}
<li>
{{t.title}}
</li>
{% endfor %}
</ul>
</div>
</li>
All I did was put 'div' tag around 'ul'. This one worked for me.
Try solution define in following link :
https://github.com/silviomoreto/bootstrap-select/issues/351
I am using Chrome on OS X, and when I do a plain vanilla Bootstrap test it doesn't work.
I use the regular v2.3.2 files downloaded from here, and I re-created a vanilla test.
This is how my index.html looks:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$('.dropdown-toggle').dropdown()
</script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h2>Hello</h2>
<p>There should be a dropdown right below this paragraph.</p>
<div class="row">
<div class="span12">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div>
</body>
</html>
When I do this, this is what I see:
Yet in the source, I see this outputted:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h2>Hello</h2>
<p>There should be a dropdown right below this paragraph.</p>
<div class="row">
<div class="span12">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div>
</body>
</html>
Why does this not work?
In addition to including the dropdown trigger before the unordered list (the <a>) you've also forgotten to wrap your menu with an element that has the .dropdown class, e.g.
<div class="row">
<div class="span12">
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
Example: http://jsfiddle.net/BVmUL/73/
With adding a 'a' tag before the ul, like write in http://getbootstrap.com/2.3.2/javascript.html#dropdowns
<div class="row">
<div class="span12">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div>
Tonight I decided to give Bootstrap a try (only been doing CSS/HTML for about two weeks), but I'm running into a problem. For whatever reason, it doesn't seem like my HTML doc is linking to the Bootstrap stylesheet. I used one of their dropdown code snippets, but the end result isn't stylized. Can someone see if I'm doing something wrong? Below is my HTML code.
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Test</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</body>
</html>
Are all the files in the right folders? You are using relative url:s, can be confusing if you just started to code. How is your folder structure? Are the index.html and the css folder in the same directory?
You Need to look at the file structure of how bootstrap files are added:
http://twitter.github.com/bootstrap/getting-started.html#file-structure
try add "style="display: block; position: static; margin-bottom: 5px; *width: 180px"
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>