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?
Related
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 have the following Bootstrap navbar, but when it displays in the xs layout, I want it to show on one line. How can I force it to display on one line and not break. It obviously has enough room.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Company Name</a>
</div>
<ul class="nav navbar-nav visible-sm-block visible-md-block visible-lg-block">
<li class="active">Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<span class="glyphicon glyphicon-cog"></span>
<ul class="dropdown-menu">
<li>Settings 1</li>
<li>Settings 2</li>
<li>Settings 3</li>
<li class="divider"></li>
<li>Settings A</li>
<li>Settings B</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-menu-hamburger"></span>
<ul class="dropdown-menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li class="divider"></li>
<li>Menu A</li>
<li>Menu B</li>
<li>Menu C</li>
</ul>
</li>
</ul>
<div style="display:none" class="navbar-collapse">
<p class="navbar-text fix_navbar_left_larger">Company Name</p>
<p class="navbar-text fix_navbar_left_xs">Company Name</p>
<p class="navbar-text visible-sm-block visible-md-block visible-lg-block"></p>
<p class="navbar-text visible-sm-block visible-md-block visible-lg-block"></p>
<a class="navbar-brand navbar-brand navbar-right dropdown" href="#">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</a>
<a class="navbar-brand navbar-brand navbar-right" href="#">
<span class="glyphicon glyphicon-cog"></span>
</a>
</div>
</div>
</nav>
<div class="pagecontent">
<p class="visible-xs-block">seen on xs screens.</p>
<p class="visible-sm-block">seen on sm screens.</p>
<p class="visible-md-block">seen on md screens.</p>
<p class="visible-lg-block">seen on lg screens.</p>
</div>
</div>
Add class "pull-left" to the navbar header like so...<div class="navbar-header pull-left">. Also add class "pull-right" to the two dropdown list items like so...<li class="dropdown pull-right">.
See Fiddle
For future reference, just use the navbar default template from http://getbootstrap.com/components/#navbar to compare with your own code to find mistakes.
try adding pull-right to those two <li class="dropdown"> classes
For this you have to play with pull-left pull-right classes of bootstrap.
See my fiddle
Navbar is taking full width so give that class pull-left and other pull-right but your inner menu, they also needed float to get in one line so i gave both of them float left and right and you got the result :)
I am working on the BucketAdmin template by Theme Bucket.
Everything works smooth but when I edit the Side-bar code, it stops collapsing and opening. Here is the original code.
I am a newbie at this so please also explain the issue.
<aside>
<div id="sidebar" class="nav-collapse">
<!-- sidebar menu start-->
<div class="leftside-navigation">
<ul class="sidebar-menu" id="nav-accordion">
<li>
<a href="index.html">
<i class="fa fa-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-laptop"></i>
<span>Layouts</span>
</a>
<ul class="sub">
<li>Boxed Page</li>
<li>Horizontal Menu</li>
<li>Language Switch Bar</li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-book"></i>
<span>UI Elements</span>
</a>
<ul class="sub">
<li>General</li>
<li>Buttons</li>
<li>Typography</li>
<li>Widget</li>
<li>Slider</li>
<li>Tree View</li>
<li>Nestable</li>
<li>Grids</li>
<li>Calender</li>
<li>Draggable Portlet</li>
</ul>
</li>
<li>
<a href="fontawesome.html">
<i class="fa fa-bullhorn"></i>
<span>Fontawesome </span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-th"></i>
<span>Data Tables</span>
</a>
<ul class="sub">
<li>Basic Table</li>
<li>Responsive Table</li>
<li>Dynamic Table</li>
<li>Editable Table</li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-tasks"></i>
<span>Form Components</span>
</a>
<ul class="sub">
<li>Form Elements</li>
<li>Advanced Components</li>
<li>Form Wizard</li>
<li>Form Validation</li>
<li>Muliple File Upload</li>
<li>Dropzone</li>
<li>Inline Editor</li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-envelope"></i>
<span>Mail </span>
</a>
<ul class="sub">
<li>Inbox</li>
<li>Compose Mail</li>
<li>View Mail</li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class=" fa fa-bar-chart-o"></i>
<span>Charts</span>
</a>
<ul class="sub">
<li>Morris</li>
<li>Chartjs</li>
<li>Flot Charts</li>
<li>C3 Chart</li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class=" fa fa-bar-chart-o"></i>
<span>Maps</span>
</a>
<ul class="sub">
<li>Google Map</li>
<li>Vector Map</li>
</ul>
</li>
<li class="sub-menu">
<a href="javascript:;" class="active">
<i class="fa fa-glass"></i>
<span>Extra</span>
</a>
<ul class="sub">
<li class="active">Blank Page</li>
<li>Lock Screen</li>
<li>Profile</li>
<li>Invoice</li>
<li>Pricing Table</li>
<li>Timeline</li>
<li>
Media Gallery
</li>
<li>404 Error
</li>
<li>500 Error</li>
<li>Registration</li>
<li>Blank2</li>
</ul>
</li>
<li>
<a href="login.html">
<i class="fa fa-user"></i>
<span>Login Page</span>
</a>
</li>
</ul>
</div>
<!-- sidebar menu end-->
</div>
</aside>
<!--sidebar end-->
Here is the edited code
<aside>
<div id="sidebar" class="nav-collapse">
<!-- sidebar menu start-->
<div class="leftside-navigation">
<ul class="sidebar-menu" id="nav-accordion">
<li> <i class="fa fa-dashboard"></i> <span>Dashboard</span> </li>
</ul>
</div>
<!-- sidebar menu end-->
</div>
</aside>
<!--sidebar end-->
Don't delete, I simply commented the part which I wanted to remove and it worked.
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.
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">