Dropdown menu inside tabbable bootstrap - html

I am trying to integrate bootstrap tabs and dropdown menus using Bootstrap 2.3.4
<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="nav-no-collapse header-nav">
<ul class="nav pull-left nav-tabs">
<li class="dropdown">
<a href="/Home">
<i class="icon-bar-chart"></i></a>
</li>
<li class="dropdown"><i class="icon-refresh"></i>
</li>
<li>Development </li>
<li>Testing </li>
</ul>
</div>
</div>
<div class="container-fluid">
<div class="tab-content">
<div class="tab-pane fade" id="dev">
<ul class="nav pull-left">
<li class="dropdown"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dev</a>
<ul class="dropdown-menu">
<li>
Dev1
Dev2
Dev3
</li>
</ul>
</li>
</ul>
</div>
<div class="tab-pane fade" id="testing">
<ul class="nav pull-left">
<li class="dropdown"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Staging</a>
<ul class="dropdown-menu">
<li>
Staging 1
Staging 2
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
But its not showing the dropdown menu properly
The menu goes somewhere and puts a scroll inside it.
JSFIDDLE Demo


You can fix your problem with just adding a simple line of
.tab-content{
overflow:inherit !important;
}
see demo below
.tab-content{
overflow:inherit !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootswatch/2.3.2/cerulean/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="nav-no-collapse header-nav">
<ul class="nav pull-left nav-tabs">
<li class="dropdown"><a href="/Home">
<i class="icon-bar-chart"></i></a></li>
<li class="dropdown"><a href="javascript:RefreshAll();"
title="Refresh All"><i class="icon-refresh"></i></a>
</li>
<li>Development </li>
<li>Testing </li>
</ul>
</div>
</div>
<div class="container-fluid">
<div class="tab-content">
<div class="tab-pane fade" id="dev">
<ul class="nav pull-left">
<li class="dropdown"><a class="btn dropdown-toggle" data-toggle="dropdown"
href="#">Dev</a>
<ul class="dropdown-menu">
<li>
Dev1
Dev2
Dev3
</li>
</ul>
</li>
</ul>
</div>
<div class="tab-pane fade" id="testing">
<ul class="nav pull-left">
<li class="dropdown"><a class="btn dropdown-toggle" data-toggle="dropdown"
href="#">Staging</a>
<ul class="dropdown-menu">
<li>
Staging 1
Staging 2
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

Related

Align Navbar bottom-left

i'm working on this website and as you can see i've a vertical left navigation. How can i move the navigations link left-bottom (only on desktop) like this?
<header class="span3">
<div class="affix">
<div class="navbar span3">
<div class="navbar-inner">
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<i class="icon-reorder"></i>
</a>
<a class="brand span2" href="index.html">
<img alt="" src="img/logo.png">
</a>
<nav class="nav-collapse collapse">
<ul class="nav">
<li class="nav-home active">Home</li>
<li class="nav-about">Philosophie</li>
<li class="nav-services">Menu</li>
<li class="nav-team">Team</li>
<li class="nav-reservation">Reservation und Öffnungszeiten</li>
<li class="nav-private">Private Dining</li>
<li class="nav-kontakt">Kontakt und Anreise</li>
</ul>
</nav>
</div><!-- /navbar-inner -->
</div><!-- /navbar -->
<!-- <aside class="span3 text-center hidden-phone">
<ul class="social inline">
<li><a class="btn btn-small" href="#"><i class="icon-facebook"></i></a></li>
<li><a class="btn btn-small" href="#"><i class="icon-twitter"></i></a></li>
<li><a class="btn btn-small" href="#"><i class="icon-linkedin"></i></a></li>
</ul>
</aside> -->
</div><!-- /affix -->
</header>

#media(min-width:1024px)
{
/* your style for desktop */
}

i want left to right drop down menu

I have a right menu items , with a 3 column drop down menu , how can i make the drop down menu open from the left to the right from the beginning of the row , not from the item it's belong to?
My code:
<div class="container" style="min-height:150px">
<nav class="navbar navbar-default navbar-fixed-top my_nav" role="navigation">
<header>
<div class="row" style="max-width: 1200px;
width: 100%; margin:0 auto">
<div class="col-sm-5 col-xs-12">
<a id="logo" href="index.html"><img src="images/logo.png" /></a>
</div>
<div class="col-sm-7">
<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>
</div>
<!--/.navbar-header-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav my_nav1">
<li>
Home
</li>
<li>
About us
</li>
<li class="dropdown active">
Solutions <b class="caret"></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li>
Smart home system
<ul>
<li>Elan</li>
<li>Fibaro</li>
</ul>
<li class="divider">
<li>A/V distribution systems
</li>
<li class="divider"></li>
</li>
</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li>
Surveillance Systems
<ul>
<li>
Avtech
<ul>
<li>IP Cameras </li>
<li>CCTV Cameras </li>
<li>HDTVI Camera </li>
<li>N-V recorder </li>
<li>D-V recorder </li>
<li>HD DVR </li>
</ul>
</li>
<li>Elan</li>
</ul>
</li>
<li class="divider"></li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li>
Alarm system
<ul>
<li>Jablotron100 </li>
<li>Jablotron80 </li>
<li>azor</li>
</ul>
</li>
<li class="divider"></li>
<li>
Telephone System
<ul>
<li>Panasonic </li>
<li>Samsung </li>
<li> kocom </li>
<li> comex </li>
</ul>
</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li>
<a class="#">Electric Doors </a>
<ul>
<li>
Swing
<ul >
<li>QUIKO </li>
<li>Vulcan </li>
<li>Calypso </li>
</ul>
</li>
<li>
Sliding
<ul>
<li>QUIKO </li>
</ul>
</li>
</ul>
</li>
<li>Central vacuum</li>
</ul>
</div>
</div>
</ul>
</li>
<li>Contact us</li>
</ul>
</div>
<!--/.navbar-collapse-->
</div>
</div>
</header>
</nav>
</div>

Can't expand navbar dropdown menu

I have created a navbar containing a dropdown menu. When i click header, simply nothing happens.
Here is my code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand icon-github" href="/"> </a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toogle="dropdown" role="button" aria-expanded="false">
Customers
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>All Customers</li>
<li><Recently added</li>
<li>Today's appointments</li>
<li class="divider"></li>
<li>Create new customer</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
There is no error in the console.

It's a simple typo: You have data-toogle instead of data-toggle.
It should work with this:
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Customers
<span class="caret"></span>
</a>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand icon-github" href="/"> </a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Coustomers <b class="caret"></b>
<ul class="dropdown-menu">
<li>All Customers</li>
<li><Recently added</li>
<li>Today's appointments</li>
<li class="divider"></li>
<li>Create new customer</li>
</ul>
</li>
</ul>
</div>
</div>
If I am not wrong this is what you are looking for..

Bootstrap ASP.net MVC Dropdown menu not visible

This is the partial view that generates the menu for the site.
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav" >
#foreach (var menu in Model)
{
<li class="dropdown">
#menu.DisplayName
#foreach (var menuitem in menu.MenuItems)
{
<ul class="dropdown-menu" >
<li class="dropdown">#Html.ActionLink(menuitem.DisplayName, menuitem.ActionName, menuitem.ControllerName, new { tabindex = "-1" })</li>
</ul>
}
</li>
}
</ul>
</div>
The menus can be visible and actually the dropdown menus are also created in the HTML as shown below
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li class="dropdown open">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Training</a>
<ul class="dropdown-menu">
<li class="dropdown"><a tabindex="-1" href="/TTS.UI/Menu?Length=18">Attendance Confirmation</a></li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">ePARCS</a>
<ul class="dropdown-menu">
<li class="dropdown"><a tabindex="-1" href="/TTS.UI/Menu?Length=12">Upload</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
In out put is shown as bellow in the GUI
What is the issue with regard to this.

Make sure you have included the bootstrap.js file on that page.
Your markup is a bit off. The <li> in your dropdown menu should not have the "dropdown" class
Here is the jsFiddle -> http://jsfiddle.net/abrudtkuhl/GYSuY/
Here's markup that works, based on your example
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Training</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="/TTS.UI/Menu?Length=18">Attendance Confirmation</a>
</li>
</ul>
</li>
<li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">ePARCS</a>
<ul class="dropdown-menu">
<li> <a tabindex="-1" href="/TTS.UI/Menu?Length=12">Upload</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>

How to make a 3-level collapsing menu in Bootstrap?

I am trying to make a 3-level collapsing navbar menu for Bootstrap, but I can't open the third level.
This is the two level menu which I have:
<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav">
<a class="brand" href="#">Present Ideas</a>
<li class="active">Home</li>
<li>Blog</li>
<li>About</li>
<li>Help</li>
<li class="dropdown" id="accountmenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Account Settings<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Login</li>
<li>Register</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
I thought something like this would work:
<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Blog</li>
<li>About</li>
<li>Help</li>
<li class="dropdown" id="accountmenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Account Settings<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Login</li>
<li class="item-148 dropdown parent">
Learn more <b class="caret-right"></b>
<ul class="dropdown-menu">
<li class="item-149">The Software</li>
<li class="item-150">The Project</li>
<li class="item-151">The Leadership</li>
<li class="item-152">Open Source Matters</li>
</ul>
</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
But that's not working.

Bootstrap 2.3.x and later supports the dropdown-submenu..
<ul class="dropdown-menu">
<li>Login</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level</a></li>
<li>Second level</li>
<li>Second level</li>
</ul>
</li>
<li>Logout</li>
</ul>
Working demo on Bootply.com

Bootstrap 3 dropped native support for nested collapsing menus, but there's a way to re-enable it with a 3rd party script. It's called SmartMenus. It means adding three new resources to your page, but it seamlessly supports Bootstrap 3.x with multiple levels of menus for nested <ul>/<li> elements with class="dropdown-menu". It automatically displays the proper caret indicator as well.
<head>
...
<script src=".../jquery.smartmenus.min.js"></script>
<script src=".../jquery.smartmenus.bootstrap.min.js"></script>
...
<link rel="stylesheet" href=".../jquery.smartmenus.bootstrap.min.css"/>
...
</head>
Here's a demo page: http://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar-fixed-top.html