I need to make use of Twitter Bootstrap Sidebar for creating a menu in my web application.(Highlighted in red).
To create a menu as shown below.
The top item has a dropdown as shown in mage. And Next items in menu should come below this.But this is what I get when I use the css.
Menu Item overlaping the other.
Here is the bootstrap code:
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav affix">
<li class="active"><i class="icon-chevron-right"></i> Dropdowns</li>
<li class=""><i class="icon-chevron-right"></i> Button groups</li>
<li><i class="icon-chevron-right"></i> Button dropdowns</li>
<li><i class="icon-chevron-right"></i> Navs</li>
<li><i class="icon-chevron-right"></i> Navbar</li>
<li><i class="icon-chevron-right"></i> Breadcrumbs</li>
<li><i class="icon-chevron-right"></i> Pagination</li>
<li><i class="icon-chevron-right"></i> Labels and badges</li>
<li><i class="icon-chevron-right"></i> Typography</li>
<li><i class="icon-chevron-right"></i> Thumbnails</li>
<li><i class="icon-chevron-right"></i> Alerts</li>
<li><i class="icon-chevron-right"></i> Progress bars</li>
<li><i class="icon-chevron-right"></i> Media object</li>
<li><i class="icon-chevron-right"></i> Misc</li>
</ul>
</div>
Here is my code:
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav affix">
<li> <a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i>dany
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a id="logout" href="#">Sign Out</a></li>
</ul>
</li>
</ul>
</div>
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav `affix`">
<li></i>Approval Requests</li>
<li></i>Settings</li>
</ul>
</div>
The css class in bootstrap setting the position is bs-docs-sidenav and affix I belive.
The css of docs.css of twitter bootstrap is this
Anyone please help to solve this issue as soon as possible.
You are using span3 on both of your menus. That means the second menu will be placed on the next grid on the right, not below the first menu.
I believe you should start like this-
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav affix">
<li> <a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i>dany
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a id="logout" href="#">Sign Out</a></li>
</ul>
</li>
</ul>
<ul class="nav nav-list bs-docs-sidenav affix">
<li></i>Approval Requests</li>
<li></i>Settings</li>
</ul>
</div>
Now apply some CSS on the second menu e.g.
<ul class="nav nav-list bs-docs-sidenav affix" style="top: 200px;">
You have created two div of span3 bs-docs-sidebar and hence you are seeing sidebars in parallel. If you want menu 'dany' fixed on the top, then its better to put them on top bar using <div class="navbar navbar-inverse navbar-fixed-top">
Related
I'm using SB Admin bootstrap theme and I have problems with collapsing left side menu correctly.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav nav-collapse">
<ul class="nav" id="side-menu">
<li>
<i class="fa fa-cog fa-fw"></i> Top level 1 (this one collapses correctly)<span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li> Second level 1</li>
<li> Second level 2</li>
</ul>
</li>
<li>
<i class="fa fa-cog fa-fw"></i> Top level 2 (This one stays open)<span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li>
<i class="fa fa-plus fa-fw"></i> Second level 1<span class="fa arrow"></span>
<ul class="nav nav-third-level collapse">
<li>Third level 1</li>
<li>Third level 2</li>
</ul>
</li>
<li>
<i class="fa fa-plus fa-fw"></i> Second level 2<span class="fa arrow"></span>
<ul class="nav nav-third-level collapse">
<li>Third level 1</li>
<li>Third level 2</li>
</ul>
</li>
</ul>
</li>
<li>
<i class="fa fa-cog fa-fw"></i> Top level 3 (this one stays open)<span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li>
<i class="fa fa-plus fa-fw"></i> Second level 1<span class="fa arrow"></span>
<ul class="nav nav-third-level collapse">
<li>Third level 1</li>
<li>Third level 2</li>
</ul>
</li>
<li>
<i class="fa fa-plus fa-fw"></i> Second level 2<span class="fa arrow"></span>
<ul class="nav nav-third-level collapse">
<li>Third level 1</li>
<li>Third level 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
What I want to acheive is when I first load page the menu should be collapsed. When I select a subitem I want the menu to load collapsed and then open to the correct item. Currently Top menu item with 1 sublevel collapses correctly. The second and third top level first collapse (which is ok) but then open (should stay closed unless a subitem is selected). Third level works ok. What is the correct combination of bootstrap collapse classes to acheive the correct function?
I have the following,
<header id="header">
<div class="header__top">
<div class="container">
<ul class="top-nav"><!-- new name -->
<li class="dropdown top-nav__profile">
Hi Mallinda!
<ul class="dropdown-menu">
<li>Profile</li>
<li class="top-nav__saved">Saved Searches</li>
<li class="top-nav__saved">Saved Agents</li>
<li class="top-nav__saved">Saved Listings</li>
<li>Email Preferences</li>
<li>Logout</li>
</ul>
</li>
<li class="top-nav__icon">
<i class="zmdi zmdi-notifications"></i>
</li>
<li class="pull-right top-nav__icon">
<i class="zmdi zmdi-facebook"></i>
</li>
<li class="pull-right top-nav__icon">
<i class="zmdi zmdi-twitter"></i>
</li>
<li class="pull-right top-nav__icon">
<i class="zmdi zmdi-google"></i>
</li>
</ul>
</div>
</div>
</header>
Since I have a lot of nested classes, I've decided to choose a new name 'top-nav' after certain level. Is it valid in BEM? or do I need to phrase block name 'header__' to every child element?
You may put blocks inside other blocks or elements. It is absolutely valid.
I'm using Bootstrap v3.3.6
So I'm using their 'dropdown-menu' on my 'top-box' div to display submenu.
But for some reason 'dropdown-menu' are appearing behind the 'header-brand' DIV on my site.
I added z-index to my CSS, but still doesn't seem to do anything, Please help.
Here is My Project URL: Click Here
<header id="header">
<!-- BEGIN TOP BAR -->
<div class="top-box animatedq fadeInDownq">
<div class="left-bar">
<ul class="list-inline top-contact-info">
<li><i class="fa fa-mobile-phone"></i> 24X7 Contact : +91 9830556230</li>
</ul>
</div>
<div class="right-bar">
<ul class="list-inline top-menu-items" role="navigation">
<li><i class="fa fa-briefcase"></i> Create Wallet</li>
<li><i class="fa fa-sign-in"></i> User Login</li>
<li><i class="fa fa-sign-in"></i> Agent Login</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu submenu">
<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>
</div>
</div>
<!-- END TOP BAR -->
<!-- BEGIN BRAND(COMPANY NAME & LOGO) -->
<div class="header-brand">
<div class="logo">
<img src="assets/images/logo.png" alt="Logo">
</div>
<div class="social-icons">
<ul class="icons">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
<li><i class="fa fa-youtube"></i></li>
<li><i class="fa fa-skype"></i></li>
<li><i class="fa fa-vimeo"></i></li>
<li><i class="fa fa-instagram"></i></li>
</ul>
</div>
</div>
<!-- END BRAND(COMPANY NAME & LOGO) -->
</header>
CSS Code
.top-box .submenu {
z-index: 9999999999 !important;
border-radius: 0px;
}
As mentioned, remove overflow:hidden from .top-box to stop clipping the content and add the class clearfix to clear the floats of the inner divs.
<div class="top-box animatedq fadeInDownq clearfix">
I'm working on Foundation Zurb template and I'm trying to get it working.
I have Top Bar at the top of the screen (full width), Icon Bar at the left side (full height). I know that Foundation has 12 grid system.
According to Foundation:
The Foundation Top Bar gives you a great way to display a complex
navigation bar on small, medium or large screens.
And:
An Icon Bar provides a menu to quickly navigate an app. Use the Icon
Bar horizontally or vertically, with the labels below the icons or to
the right. Have it your way.
Here is my template. I've took out div.large-9.columns etc.. Because they were braking the view.
<!-- Navigation -->
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>LOGO PLACEHOLDER</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active"><i class="fa fa-diamond"></i> Go PRO</li>
<li class="has-dropdown">
<i class="fa fa-user"></i> My Account
<ul class="dropdown">
<li>Some Li's here</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li><i class="fa fa-database"></i> ONE</li>
<li><i class="fa fa-list-ol"></i> TWO</li>
<li><i class="fa fa-users"></i> THREE</li>
</ul>
</section>
</nav>
<!-- Left Nav Sidebar -->
<div class="icon-bar vertical five-up">
<a class="item">
<i class="fa fa-home"></i>
<label>Home</label>
</a>
<a class="item">
<i class="fa fa-gamepad"></i>
<label>ONE</label>
</a>
<a class="item">
<i class="fa fa-star"></i>
<label>TWO</label>
</a>
<a class="item">
<i class="fa fa-thumbs-up"></i>
<label>THREE</label>
</a>
<a class="item">
<i class="fa fa-trophy"></i>
<label>FOUR</label>
</a>
</div>
I want to achieve:
Top Bar and Icon Bar the same
Content Area to be fixed and have large-8 or large-9
Sidebar to be fixed and have large-3
What I've already tried:
Was separating all 3 bits with div.large-1/8/3, nothing happened
Was nesting them into div.row
I think I've tried almost everything, but have no idea, what is the problem.
i had done the changes in html and css. this what your expecting
html code
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>LOGO PLACEHOLDER</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active"><i class="fa fa-diamond"></i> Go PRO</li>
<li class="has-dropdown">
<i class="fa fa-user"></i> My Account
<ul class="dropdown">
<li>Some Li's here</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li><i class="fa fa-database"></i> ONE</li>
<li><i class="fa fa-list-ol"></i> TWO</li>
<li><i class="fa fa-users"></i> THREE</li>
</ul>
</section>
</nav>
<!-- Left Nav Sidebar -->
<div class="medium-1 columns left-nav">
<div class="icon-bar vertical five-up">
<a class="item">
<i class="fa fa-home"></i>
<label>Home</label>
</a>
<a class="item">
<i class="fa fa-gamepad"></i>
<label>ONE</label>
</a>
<a class="item">
<i class="fa fa-star"></i>
<label>TWO</label>
</a>
<a class="item">
<i class="fa fa-thumbs-up"></i>
<label>THREE</label>
</a>
<a class="item">
<i class="fa fa-trophy"></i>
<label>FOUR</label>
</a>
</div>
</div>
<div class="medium-8 columns content-area">content-area</div>
<div class="medium-3 columns sidebar">columns sidebar</div>
css code
.columns.content-area{border:1px solid #111;padding:0}
.columns.sidebar{border:1px solid #111;padding:0}
.columns.left-nav{padding:0}
.icon-bar.vertical.five-up{width:100%}
demo jsFiddle
I wanted to let the "Data Management" li to be opened by default if it's child has a class "active".
Example in JSfiddle:
http://jsfiddle.net/MgcDU/5622/
HTML:
<div class="span4 well well-small">
<ul id="action-menu" class="nav nav-list">
<li class="nav-header">Navigation</li>
<li ><i class="icon-th"></i> Overview </li>
<li>
<i class="icon-book"></i> Data Management
<ul id="datamanagement-child" class="nav nav-list collapse">
<li class="active"><i class="icon-folder-close"></i> Company</li>
<li><i class="icon-user"></i> Employee</li>
<li><i class="icon-home"></i> Department</li>
<li><i class="icon-indent-right"></i> Position</li>
</ul>
</li>
<li>
<i class="icon-time" ></i> Time keeping
<ul id="timekeeping-child" class="nav nav-list collapse">
<li><i class="icon-edit"></i> Log employee</li>
<li><i class="icon-th-list"></i> Show logs</li>
</ul>
</li>
<li><i class="icon-briefcase"></i> Accounts</li>
<li><i class="icon-list-alt"></i> Reports</li>
<li class="divider"></li>
</ul>
</div>
How would I do this?
Solution 1
You can simply simulate a click() on data-management hash. This will make the toggle animation, too.
$("[href='#datamanagement-child']").click();
JSFIDDLE
Solution 2
Add in class for the ul after data-management.
<ul id="datamanagement-child" class="nav nav-list in collapse">
...
</ul>
JSFIDDLE
The result is like in the screen shot bellow:
If you only want it to be open if it has a child li with the class of "active", you can use this bit of jQuery that initiates the bootstrap collapse function if the active class is found:
if($("#datamanagement-child li.active").is("*")) {
$("#datamanagement-child").collapse("show");
}
OR if you just want it to show without the slide effect, you can use this code:
if($("#datamanagement-child li.active").is("*")) {
$("#datamanagement-child").addClass("in");
}
Any of the above code would need to go within your:
$(document).ready(function(){
// Code Here
});
I hope this helps.