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.
Related
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>
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>
How to make the bootstrap dropdown on hover and still make the main button a link like if i click the dropdown button instead of a dropdown it should go to a different page
Here is my HTML
<div class="body-wrap">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<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"></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</li>
<li>Link</li>
<li class="dropdown">
Dropdown <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>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <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>
<!-- /.container-fluid -->
</nav>
</div>
</div>
Here is my JS
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
Here is a code pen sample
https://codepen.io/anon/pen/boNGBY
Just remove the (data-toggle="dropdown") from your anchor tag().
Dropdown
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.
My drop down menu nested inside of my main drop down menu won't display all of my information. I played around with it inside JSFiddle and still can't get it to work. If I click the user glyphicon to expand the options, it will get cut off at the bottom of the main menu size.
http://jsfiddle.net/2hGuv/
Here's the HTML
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ns-navbar-collapse">
<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="ns-navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="hidden-sm">Events</li>
<li class="hidden-sm">Contest</li>
<li>Magazine</li>
<li>Contact</li>
<li class="dropdown">
Follow <b class="caret"></b>
<ul class="dropdown-menu">
<li>
<a href="http://visitor.r20.constantcontact.com/d.jsp?llr=zta6bgfab&p=oi&m=1105083662969" target="_blank">
Join Our Mailing List
</a>
</li>
<li class="navbar-follow">
<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
<a class="addthis_button_facebook_follow" addthis:userid="nextstopmag"></a>
<a class="addthis_button_twitter_follow" addthis:userid="nextstopmag"></a>
<a class="addthis_button_linkedin_follow" addthis:userid="searles-media-inc." addthis:usertype="company"></a>
<a class="addthis_button_google_follow" addthis:userid="+Nextstopmagazine"></a>
</div>
</li>
</ul>
</li>
<li class="dropdown visible-sm">
More <b class="caret"></b>
<ul class="dropdown-menu">
<li>Events</li>
<li>Contest</li>
<li>Search</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> <b class="caret"></b>
<ul class="dropdown-menu">
<li>My Dashboard</li>
<li><a class="dropdown-toggle" href="~/account/manage">Manage Account</a></li>
<li>Log off </li>
</ul>
</li>
<li class="hidden-sm"><span class="glyphicon glyphicon-search"></span></li>
</ul>
</div>
</div>
</nav>
Sounds like you have overflow: hidden; on your navbar.
The fiddle seems to be working.