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.
Related
I want to display a PHP file on loading the page and display other PHP files in the same div. Here is my code...
<ul id="nav" class="nav">
<li><a class="ajax-link" href="menu.php">Menu</a></li>
<li><a class="ajax-link" href="#">History</a></li>
<li><a class="ajax-link" href="editdetails.php">Details</a></li>
<li class="last">Logout</li>
</ul> <!-- end #nav -->
<div class="page" id="main_content">
<script type="text/javascript">
$(function() {
$("a.ajax-link").on("click", function(e) {
e.preventDefault();
$("#main_content").load(this.href);
});
});
</script>
</div>
This code is displaying the pages only after clicking but, i want to display the menu page on loading itself. Help me.
<ul id="nav" class="nav">
<li><a class="ajax-link" href="menu.php">Menu</a></li>
<li><a class="ajax-link" href="#">History</a></li>
<li><a class="ajax-link" href="editdetails.php">Details</a></li>
<li class="last">Logout</li>
</ul> <!-- end #nav -->
<div class="page" id="main_content"></div>
<script type="text/javascript">
//It will load content once your page get load
$(document).ready(function(){
$("#main_content").load('MENU_LINK');
});
//It will load on clicking of links
$("a.ajax-link").on("click", function(e) {
e.preventDefault();
$("#main_content").load(this.href);
});
</script>
Try this :
<html>
<head>
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#main_content").load('http://your.link/');
});
</script>
</head>
<body class="">
<ul id="nav" class="nav">
<li><a class="ajax-link" href="menu.php">Menu</a></li>
<li><a class="ajax-link" href="#">History</a></li>
<li><a class="ajax-link" href="editdetails.php">Details</a></li>
<li class="last">Logout</li>
</ul>
<div class="page" id="main_content"></div>
</body>
</html>
Hope this will help ya :)
I want to use AngularJS to include a header in every html i use. here is the header.html:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" id="navbar">
<div class="container-fluid" id="container-fluid1">
<div class="navbar-header" id="websiteName">
<a class="navbar-brand" href="#">Richazon</a>
</div>
<div id="theLinks">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Navbar Color <b class="caret"></b>
<ul class="dropdown-menu" id="dropdown-menu1">
<li class="greenBg">NB1</li>
<li id="greenBg">NB2</li>
<li id="greenBg">NB3</li>
</ul>
</li>
<li class="dropdown">
Page 2 <b class="caret"></b>
<ul class="dropdown-menu">
<li>Page 2.0.0 </li>
<li class="divider"></li>
<li>Page 2.0.1 </li>
<li class="divider"></li>
<li>AngularJS List Removal </li>
</ul>
</li>
<li class="dropdown">
Page 3 <b class="caret"></b>
<ul class="dropdown-menu" id="dropdown-menu">
<li>Page 3.0.0 </li>
<li class="divider"></li>
<li>Page 3.0.1 </li>
<li class="divider"></li>
<li>Page 3.0.3 </li>
<li class="divider"></li>
<li>Page 3.0.4 </li>
<li class="divider"></li>
<li>Page 3.0.5 </li>
<li class="divider"></li>
<li>Page 3.0.6 </li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
in my index1.html file I have this:
<html lang="en" ng-app="myApp">
then inside the body tag
<div appheader></div>
i understand this question has already been asked, hence my implementation. but i keep getting this error in the console: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=myApp&p1=Error%3A%…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381)
this is the code at the top of my index1.html file which might be causing issues:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<link href="css/index1.css" rel="stylesheet">
and here is my main.js:
angular.module('myApp')
.directive('appheader', function() {
return {
templateUrl: 'header.html'
};
});
If this is your main.js
angular.module('myApp')
.directive('appheader', function() {
return {
templateUrl: 'header.html'
};
});
you need to create module
angular.module('myApp',[])
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 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?
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.