I am using bootstrap 3.3.7 and using nav bar of bootstrap. I want menu should toggle when using tab key. Below code is workign fine but due to this after opening the menu links define inside it not working.
Note:- Using tab and then click on link not working. Using mouse and click on link working.
$(".main-nav a").on("keydown", function () {
$(this).next().dropdown("toggle");
});
Code below
<body>
<nav class="navbar navbar-default main-nav">
<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>
</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="dropdown">
Dropdown1 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</li>
<li class="dropdown">
Dropdown2 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</li>
<li class="dropdown">
Dropdown3 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
$(".main-nav a").on("keydown", function() {
$(this).next().dropdown("toggle");
});
</script>
</body>
Above is the complete code, using tab the nav opens on keydown that is my requirement. But due to this links are not working.
Try this
<style>
.marginBottom-0 {margin-bottom:0;}
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#555;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
</style>
<nav class="navbar navbar-default navbar-static-top marginBottom-0" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Dropdown Link 1</li>
<li>Dropdown Link 2</li>
<li>Dropdown Link 3</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Link 4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 4.1</li>
<li>Dropdown Submenu Link 4.2</li>
<li>Dropdown Submenu Link 4.3</li>
<li>Dropdown Submenu Link 4.4</li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<script>
(function($){
$(document).ready(function(){
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
</script>
Related
i have a Bootstrap-Navbar on a ASP-Page. The Navbar ist included in a MasterPage and working fine with all the sites in root-Directory.
Some Pages with Login-Functionality are in an admin-Folder. These Pages use the same MasterPage, but when beeing on such a page, the Navbar isn't collapsing when clicking on a MainMenu-Item. The only thing that happens, is in the adress-box in the browser is a "#" appearing at the end.
Can someone help me solving this Problem ?
Greetings
Gregor
<nav class="navbar navbar-fixed-top" role="navigation" style="background-color:#286090;width:100%;z-index:10;">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<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" style="background-color:white;width:50px;height:5px;padding:4px;margin:5px;"></span>
<span class="icon-bar" style="background-color:white;width:50px;height:5px;padding:4px;margin:5px;"></span>
<span class="icon-bar" style="background-color:white;width:50px;height:5px;padding:4px;margin:5px;"></span>
</button>
</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><i class="fa fa-home"></i></li>
<li>
Serien
<ul class="dropdown-menu multi-level">
<li>Serien-Diary</li>
<li>Nicht-Beendete</li>
<li>Warteliste</li>
<li>Serien-Sichtung anlegen</li>
<li>Serien-Logo hochladen</li>
<li>DB Chronologie</li>
<li>Sichtungs-Chrono</li>
<li>Serien-Daten</li>
<li>Empfehlungen</li>
</ul>
</li>
<li>
Filme
<ul class="dropdown-menu multi-level">
<li>Film-Diary</li>
<li>in DB anlegen</li>
<li>DB Chronologie</li>
<li>Film-Sichtung anlegen</li>
<li>Empfehlungen</li>
<li>Liste Filtern</li>
<li>DVD's</li>
<li>BluRay's</li>
<li>
FILTERN<b class="caret"></b>
<ul class="dropdown-menu">
<li>
FSK
<ul class="dropdown-menu">
<li>Beschlagnahmen</li>
<li>SPIO/JK</li>
<li>Liste A</li>
<li>Liste B</li>
</ul>
</li>
<li>
Genre
<ul class="dropdown-menu">
<li>Splatter</li>
<li>Horror</li>
<li>Action</li>
<li>Science-Fiction</li>
<li>Fantasy</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
Sonstiges
<ul class="dropdown-menu multi-level">
<li>Einstellungen</li>
<li>Protokoll</li>
<li>HOME</li>
</ul>
</li>
<li><i class="fa fa-hand-o-up"></i></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
I've never used scrollspy in my project and I need to know how it works. I have seen the documentation from the bootstrap page, some other stackoverflow questions and youtube videos.
I have this code:
For the nav:
<!-- Start nav -->
<nav class="navbar navbar-default navbar-fixed-top">
<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="#"><img id="logo" src="images/logo.png" alt="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" role="search">
<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" id="navbar">
<li>Incio</li>
<li>Nuestros Servicios</li>
<li>Portafolio</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>
<!-- End nav -->
For the body:
<!-- Body container -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12 menu-1" id="Inicio"></div>
<div class="col-md-12 menu-2" id="NuestrosServicios"></div>
<div class="col-md-12 menu-3" id="Portafolio"></div>
</div>
</div>
<!-- End Body container -->
The JavaScript side:
$(function() {
$("body").scrollspy({target: "#navbar"});
});
The full example in jsbin:
The target should indicate to the element id. In your navbar element I don't see the id attribute. Try adding id to the navbar.
Also add the position: relative; css to your body element.
if the above didn't fix the issue use the data attribute like this data-spy="scroll" data-target="#navbar-example" in the body tag instead of javascript and don't forget the id attribute for the navbar element.
I have been searching for answer to this one to no avail. I have Bootstrap and then an infinite scroll using JQuery. The infinite scroll works fine, but I have the standard demo nav bar from bootstrap and the ul/lis are flashing up and then disappearing from the page so likely a conflict between jquery and bootstrap.
Here is the nav bar:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Bootstrap theme</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</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 class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
Here is the javascript that no matter where I put it in the script (top or bottom) causes the issue:
<!-- <script src="../js/jquery-2.0.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript"src="../js/jquery-ias.js"></script>
<script src="/js/bootstrap.min.js"></script>`
Notice I have tried two versions of jquery too.
I dont know how to identify the conflict, what is the problem?
Thanks!
Use $.noConflict();
Reference url
UPDATE:
Thanks to brbcoding in the comments. Updated JS Fiddle
http://jsfiddle.net/Bootstrap714/RfsS9/14/
He mentioned something about transitions. How would I go about doing that or what is the best route.
Here is where I am at:
I am using Bootstrap 3 to build a menu. Bootstrap comes with a nice collapse feature for the menu when viewed on mobile. It takes the whole menu and puts it in a button to collapse. IE: if you have "link dropdown-link dropdown-link" there will be one button and it will toggle a dropdown with those links.
My question is:
Can those 3 links become each their own toggle buttons and control their own dropdowns. If you create multiple collapse toggle buttons. the toggle button opens the drop down to show the link. Then you must click on that link to open the sub-dropdown.
<div class="navbar navbar-default navbar-fixed-top " role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#settings">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#inbox">
<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 hidden-xs" href="#">Brand</a>
<a class="navbar-brand visible-xs" href="#">AL</a>
</div>
<ul class="nav navbar-nav hidden-xs">
<li class="dropdown">
Popular Tags <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>
</ul>
<form class="navbar-form navbar-left hidden-xs" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="mobile-menu">
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-camera-retro fa-2x"></i> Upload</li>
</ul>
</div><!-- /.navbar-collapse -->
<div class="collapse navbar-collapse" id="inbox">
<ul class="nav navbar-nav navbar-right">
<li id="inbox" class="dropdown">
<i class="fa fa-envelope fa-2x"></i> Inbox<span class="badge">42</span> <b class="caret"></b>
<ul class="dropdown-menu">
<li>message 1</li>
<li>message 1</li>
<li>message 1</li>
<li>message 1</li>
<li>message 1</li>
<li>message 1</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
<div class="collapse navbar-collapse" id="settings">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="fa fa-cog fa-2x"></i> Settings <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>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</div>
So basically, when in mobile, you can see the two toggle buttons. Is there a way for that toggle button to open to the sub menu instead of clicking the link and then having it open.
how it is now: toggle button, click link, then it opens
what i would like: toggle button, opens right to the drop down.
I don't know what I'm doing wrong here but I expect it's something woefully stupid.
I'm using Bootstrap 3 in Umbraco 6.0.5 and I cannot get the toggle to work on resize down - below 770px width the nav collapses but there's no button to toggle it with, or rather something is there, as seen in code and Firebug, but not visible, in Chrome and Firefox (haven't tried IE).
There's a fiddle and the code below. I'm using http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js, http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js and http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css in the fiddle.
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<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"#">reech</a>
</div>
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class=" dropdown">
What is reech? <b class="caret"></b>
<ul class="dropdown-menu">
<li>About this site</li>
</ul>
</li>
<li class=" dropdown">
</li>
<li>Key reech projects</li>
<li class=" dropdown">
</li>
<li>Technologies</li>
<li class=" dropdown">
</li>
<li>Complementary Activities</li>
<li class=" dropdown">
News <b class="caret"></b>
<ul class="dropdown-menu">
<li>Merseyside collective switching scheme launched</li>
<li>reech scoops top award</li>
<li>reech award nomination</li>
<li>Green Deal and Energy Company Obligation (ECO) September 2013 Statistics</li>
<li>Energy Switching Scheme</li>
<li>Project 'reeches' new milestone</li>
<li>Firms sign up for new opportunities</li>
<li>14 new jobs created for Merseyside residents</li>
<li>'reeching' out to Low Carbon and Green Energy Sector</li>
</ul>
</li>
<li class=" dropdown">
</li>
<li>reech into business</li>
<li class=" dropdown">
reech partners <b class="caret"></b>
<ul class="dropdown-menu">
<li>reech Steering Group</li>
</ul>
</li>
</ul>
</div><!--close navbar-collapse-->
</div><!--close container-->
</nav><!--Close nav-->
Update - so, I tried altering the data-target (and have altered the fiddle) to #main-nav and the id to main-nav, no joy.
The I tried putting a dash character in the button > span element, and it works. That is, the dashes display, and I can toggle the menu. But where are the icon bars?
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar">-</span>
<span class="icon-bar">-</span>
<span class="icon-bar">-</span>
</button>
And change <nav class="navbar"> to <nav class="navbar navbar-default">
Bootstrap - the toggle button will not show in mobile view
FIX:
Make these changes at: bootstrap.min.css
This fixes the outer border of the Toggle Button
.navbar-toggle
{
position:relative;
float:right;
padding:9px 10px;
margin-top:8px;
margin-right:15px;
margin-bottom:8px;
background-color:transparent;
background-image:none;
border-radius:4px
}
Add
border:1px solid #444;
(change color code to match your design)
.navbar-toggle
{
position:relative;
float:right;
padding:9px 10px;
margin-top:8px;
margin-right:15px;
margin-bottom:8px;
background-color:transparent;
background-image:none;
border:1px solid #444; /* added line */
border-radius:4px
}
This fixes the horizontal lines of the Toggle Button
.icon-bar
{
display:block;
width:22px;
height:2px;
border-radius:1px;
}
Add
border:1px solid #444;
(change color code to match your design)
.icon-bar
{
display:block;
width:22px;
height:2px;
border-radius:1px;
border:1px solid #444;
}
In your 1st line
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
it should be data-target="#nav-collapse" because you have <div class="collapse navbar-collapse" id="nav-collapse"> where id is nav-collapse
This should get you pointed in the correct direction. It looks like your main hiccup is your button data-target attribute is referencing a class rather than an ID. It's best to use an ID in this situation so if you call that class elsewhere in the code your not throwing curve balls at the javascript.
I also see you have several <li class="dropdown"></li> that are blank. I'm not sure if this is intentional or not, but I would refer to the structure that I've enclosed.
Hope this works for you, and best of luck!
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav"> <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="#">Reech</a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"> What is reech? <b class="caret"></b>
<ul class="dropdown-menu">
<li>About this site</li>
</ul>
</li><!-- dropdown -->
<li class="dropdown"> Key reech projects <b class="caret"></b>
<ul class="dropdown-menu">
<li>Technologies</li>
<li>Complementary Activities</li>
</ul>
</li><!-- dropdown -->
<li class="dropdown"> Key reech projects <b class="caret"></b>
<ul class="dropdown-menu">
<li>Technologies</li>
</ul>
</li><!-- dropdown -->
</ul><!-- nav navbar-nav -->
</div><!-- collapse navbar-collapse -->
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>