I have added bootstrap menu to my site. When I click on the menu dropdown menu items are not displaying.
<nav class="collapse navbar-collapse navbar-right" role="navigation">
<div class="main-menu">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">Products
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Sub item</li>
<li>Sub item</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
below are the script files used.
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="js/vendor/modernizr-2.6.2.min.js"></script><!-- jquery -->`
`<!-- owl carouserl js -->
<script src="js/owl.carousel.min.js"></script><!-- bootstrap js -->
<script src="js/bootstrap.min.js"></script>
<!-- wow js --><script src="js/wow.min.js"></script><!-- slider js -->
<script src="js/slider.js"></script>
<script src="js/jquery.fancybox.js"></script><!-- template main js -->
<script src="js/main.js"></script>
<script>
$(document).ready(function(){
$('.dropdown-toggle').dropdown();
});
</script>
All the three scripts needs to be added to the html file.
<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>
Related
I need to implement a side nav menu with sub menu
the problem that I am facing is that the sub menu or dropdown are not opening , or not collapsing if they were open by default .
<div class="nav-side-menu">
<div class="brand">Brand Logo</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li data-toggle="collapse" data-target="#products" class="collapsed active">
<i class=""></i> UI Elements <span class="arrow"></span>
</li>
<ul class="sub-menu" id="products">
<li class="active">CSS3 Animation</li>
<li>General</li>
<li>Buttons</li>
<li>Tabs & Accordions</li>
<li>Typography</li>
<li>FontAwesome</li>
<li>Slider</li>
<li>Panels</li>
<li>Widgets</li>
<li>Bootstrap Model</li>
</ul>
</ul>
</div>
</div>
so I have one dropdown menu for testing, if I click any one of them they will not open
may be this help you...
<head>
<title>Bootstrap 3 Collapsible Sidebar</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="wrapper">
<nav id="sidebar">
<!-- Sidebar Header -->
<div class="sidebar-header">
<h3>Collapsible Sidebar</div>
</div>
<!-- Sidebar Links -->
<ul class="list-unstyled components">
<li class="active">Home</li>
<li>About</li>
<li><!-- Link with dropdown items -->
Pages
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Page</li>
<li>Page</li>
<li>Page</li>
</ul>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
I figured out that my problem is not with the html tags
I should include jquery library before the bootstrap libraries.
I am messing around trying to make a custom bootstrap 3 website however I'm currently stuck up on this dropdown menu. I have tried everything from using the web CDN instead of my local files, copying other peoples dropdown code and nothing seems to want to work.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>INDEX</title>
<!-- linking bootstrap CSS files -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- linking my custom CSS stylesheet -->
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:700"
rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- MDP top banner image -->
<div class="top-banner">
<img class="img-responsive" src="Assets/MDP Website Banner.png" width="2000" height="350" alt=""/>
</div>
<!-- top bar nav -->
<nav class="navbar navbar-inverse navbar-maintop">
<div class="container-fluid align-center">
<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 nav-tab">HOME</li>
<li class="nav-tab">ABOUT US</li>
<li class="dropdown nav-tab">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">PAGE 1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>PAGE 1</li>
<li>PAGE 2</li>
<li>PAGE 3</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">PAGE 2<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<!--<li class="nav-tab">SUSPENSION & LIFT COMPONENTS
</li> -->
<li class="nav-tab">PAGE 3</li>
</ul>
</div>
</div>
</nav>
<script src="jquery/jquery.js"></script>
<script type="text/javascript" src='js/bootstrap.min.js'></script>
</body>
</html>
This question already has an answer here:
bootsrap nav-bar collapsable cannot make it work
(1 answer)
Closed 6 years ago.
I'm trying to create a website using Bootstrap, but the default navbar (Which I'm using just to test if Bootstrap is loaded) isn't working. It's saying I didn't install jQuery, but I tested it twice and it jQuery was installed. Please help.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<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>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<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>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
</body>
</html>
Note:
It also didn't work offline (As in using script src="bootstrap.min.js" in the same folder as the html file). I'm using WebStorm 2016.3.2, if that helps.
It is probably because of jQuery is linking after Bootstrap.
Put jQuery in the header before Bootstrap.
My script part of header looks like this:
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.js" integrity="sha256-5i/mQ300M779N2OVDrl16lbohwXNUdzL/R2aVUXyXWA=" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Bootstrap Theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Custom CSS-->
<link rel="stylesheet" href="stylesheets/styles.css">
I've been using Twitter Bootstrap to create a navbar across the top of a page which has several dropdown menus. For some reason, the first list element aligns to the bottom of the bar by virtue of a empty link that fills the top space. I copied this first term for the other list items, but none of the other elements align to the bottom or have an empty link. Any ideas for how i can fix this?
<!DOCTYPE html>
<html>
<head>
<title>Nav Mockup</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a href="#" class="navbar-brand">NCTL<a>
<button class="navbar-toggle" data-toggle="collapse" data-target="navbarHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navbarHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>Challenge / Links</li>
<li>STEM Equity</li>
<li>Slannis Message</li>
<li>Supporters</li>
<li>MOS Press Room</li>
</ul>
</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>K12 Classroom</li>
<li>Museum Based</li>
<li>Traveling</li>
</ul>
</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>Achievements</li>
<li>Resources</li>
<li>Video Links</li>
</ul>
</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>Enews Archive</li>
<li>NCTL Studies</li>
<li>Media Coverage</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
You a error in your markup
<a href="#" class="navbar-brand">NCTL<a>
Should be:
NCTL
DEMO HERE
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.