Any ideas why this Twitter Bootstrap dropdown isn't working?
Javascript in head:
<script src="/assets/js/bootstrap.js" type="text/javascript"></script>
Menu HTML:
<li class="dropdown">
<a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here...
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</li>
Put the dropdown class on a div that is wrapping the li rather than on the li itself. Like this...
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
</div>
That example is from the bootstrap site
Your code should look like this...
<!DOCTYPE html >
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="../plugins/js/bootstrap-dropdown.js"></script>
<link href="../theme/bootstrap.css" rel=stylesheet type="text/css">
</head>
<div class="dropdown">
<ul class="dropdown">
<a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here...
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</ul>
</div>
I tried making a nested list, but it didn't work with bootstrap. I think it gets the two dropdowns confused.
Make sure you are using the latest version of JQuery
This is easily solved. The element wrapping your code is a li, but it needs to be a div. This works for me:
<div class="dropdown">
<a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here...
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</div>
If you want it to look like a button, just add "btn" to the class list like this:
<a data-target="#" data-toggle="dropdown" class="dropdown-toggle btn" href="#">
My header section looks like this:
<link rel='stylesheet' type='text/css' href='css/bootstrap.min.css'>
<link rel='stylesheet' type='text/css' href='css/bootstrap-responsive.min.css'>
<script src='js/jquery-2.0.0.min.js' type='text/javascript'>
<script src='js/bootstrap.min.js' type='text/javascript'>
You may want to leave out the responsive css if you're not doing anything for mobile devices.
Related
I have the following code to create a drop down menu. However, on any page that has an embedded PDF the drop down appears behind the PDF. It only seems to happen in IE. Is there any fix?
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">Website</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 2
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</div>
</nav>
Here's my code for the embedded PDF also:
<object data="file.pdf" id="myDoc" type="application/pdf" width="100%" height="1000px">
alt : HowToCopyADisc.pdf
</object>
I've got a bootstrap 3 drop down and it should close when the user is clicking on the same link again.
Here's my html:
<li class="dropdown menu-karriere">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="asd">
Karriere <b class="caret"></b>
</a>
<ul class="dropdown-menu" data-lvl="0">
<li class="menu-ausbildung">Ausbildung</li>
<li class="menu-geselle">Geselle</li>
<li class="menu-meister">Meister</li>
</ul>
</li>
If I click on the a.dropdown-toggle the drop down opens - which is correct. If I click the same link again, the drop down doesn't close.
Can anybody help me with that?
I couldn't find something on SO or anywhere else.
Thanks.
Use this code. It will give you desired result.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Karriere
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Ausbildung</li>
<li>Geselle</li>
<li>Meister</li>
</ul>
</div>
You have data-target="#" which prevents it closing:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<li class="dropdown menu-karriere">
<a class="dropdown-toggle" data-toggle="dropdown" href="asd">
Karriere <b class="caret"></b>
</a>
<ul class="dropdown-menu" data-lvl="0">
<li class="menu-ausbildung">Ausbildung
</li>
<li class="menu-geselle">Geselle
</li>
<li class="menu-meister">Meister
</li>
</ul>
</li>
Sorry again but here is my last code and everthing works great except that when i make the jquery the li from 4 to the end moves after the "ul" that i want but i want that li from 4 to the end to move BETWEEN the ul that i want. here is my code:
<nav id="primary_nav">
<ul class="nav" id="nav">
<li id="nav_app_forums" class="left active">Forums</li>
<li id="nav_app_members" class="left ">Members</li>
<li id="nav_app_calendar" class="left ">Calendar</li>
<li id="nav_app_ipchat" class="left ">Chat</li>
<li id="nav_app_ccs" class="left ">Pages</li>
<li id="nav_app_blog" class="left ">Blogs</li>
<li id="nav_app_gallery" class="left ">Gallery</li>
<li id="nav_app_downloads" class="left ">Downloads</li>
</ul>
<ul class="nav">
<li id="nav_other_apps" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="more_apps">More <i class="fa fa-caret-down"></i></a>
<ul id="more" class="dropdown-menu" role="menu">
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <i class="fa fa-caret-down"></i></a>
<ul class="dropdown-menu" role="menu">
<li>Extra Link</li>
<li>Extra Link</li>
<li>Extra Link</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</nav>
if( $('#nav li').length > 5 )
{
$('#nav li:gt(3)').insertAfter('<ul id="more" class="dropdown-menu" role="menu">');
}
i need form you the best code that i have to replace the jquery part or "insert after"
so it the li form 4 to the end would go between the desired ul thanks
Use .appendTo() instead of .insertAfter().
Append puts it inside of the open/closing tags, insert puts it outside the tags.
$('#nav li:gt(3)').appendTo('#more');
JS Fiddle
Try this jsfiddle using .wrapInner
$('#nav li:gt(3)').wrapInner('<ul id="more" class="dropdown-menu" role="menu">');
I want to design menu like below in picture :-
But I am not able to do it, here is my try :- http://jsfiddle.net/BqqqE/5/
Code Below :-
<div class="dropdown">
<a class="dropdown-toggle btn btn-danger" data-toggle="dropdown" href="#">Dropdown trigger <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li class="dropdown-submenu"><a tabindex="-1" href="index.php">Project</a>
<div class="dropdown-menu">
<div class="container">
<div class="row-fluid">
<div class="span6">
<ul class="unstyled">
<li class="nav-header">Category A </li>
<li>Item A</li>
<li>Item B</li>
</ul>
</div>
<div class="span6">
<ul class="unstyled">
<li class="nav-header">Category A </li>
<li>Item A</li>
<li>Item B</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Is above Menu Possible with Bootstrap ?
Thanks
Take a look at this JSFiddle. I've added class dropdown-menu-tworows. You can set width for submenu but it's not necessary.
.dropdown-menu-tworows .span6 {
width: 49%;
display: inline-block;
}
Is this what you wanted?
I am having some trouble making the dropdown menus in twitter bootstrap work. Here is what I have for the navbar code.
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<a class="brand">Title of website</a>
<li class="divider-vertical"></li>
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Link 1<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Link 2<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
I have seen many different tutorials/examples on this, and I am not to sure what I am doing wrong, I have included jquery and the bootstrap-dropdown.js files at the end of the document.
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap-dropdown.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
Any help on this matter would be greatly appreciated.
Thanks in advance,
try this
//use bootstrap css
//latest jquery
//add bootstrap.js
//and paste your html
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Styles/bootstrap.css" rel="stylesheet" type="text/css" />
<style>
.box
{
border: 1px solid red;
height: 100%;
}
</style>
<script src="Scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="Scripts/bootstrap.js" type="text/javascript"></script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<a class="brand">Title of website</a>
<li class="divider-vertical"></li>
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Link 1<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Link 2<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
I've just tested the code and it should work. See this DEMO with your code
One minor update. The .brand element should be the child of navbar and not of ul, since that is invalid:
<div class="navbar">
<a class="brand">Title of website</a>
<div class="navbar-inner">
<ul class="nav">
<li class="divider-vertical"></li>
You don't event have to call $('.dropdown-toggle').dropdown(); - as you can see the demo above
I don't find any error in your code, seems like you are
missing or not being loaded bootstrap-dropdown.js file
moreover please add bootstrap.js core file (as added in jsfiddle in below link)
check this jsfiddle, http://jsfiddle.net/mastermindw/kbzxV/
Your code seems to run.
Check out this example: http://jsfiddle.net/vZQ7S/
You could try to check the developer console for any error messages there.
Maybe you are not linking the javascript libraries to the correct file path?
Also try to run
$('.dropdown-toggle').dropdown()
in the developer console and watch for error messages.