I have two questions:
When an item is clicked, how can I show it and hide all other items
How to get a collapsible responsive sidebar like navbar
At first my jsFiddle Demo: http://jsfiddle.net/JpJqD/1/
I'm working to do collapsible sidebar menu.
As you can see in the demo; when i click articles, should be collapse(hide) others. Then if click to users, articles and other items that have sublevel should be collapse(hide). So always should be one opened menu.
I tried with collapse from Bootstrap document, but i couldnt with following codes:
$('#sidebar a').on('click', function () {
$(this).closest('div').find('.collapse').collapse('hide');
$(this).collapse('show');
});
I can do this with accordion but i dont wanna it cause of required panel class for all items.
BTW I want to make responsive sidebar like navbar menus for mobile and tablets? I used like in Bootstrap document but didnt work.
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
This is what i did , hope it fits your need :
<div class="panel panel-default">
<div class="panel-heading">
<h3>Navigation</h3>
</div>
<div id="sidebar" class="list-group">
<a href="#" class="list-group-item active">
<i class="icon-dashboard"></i> Dashboard
</a>
<a href="#users" class="list-group-item" data-parent="#sidebar">
<i class="icon-group"></i> Users
<span class="badge bg_danger">0</span>
</a>
<div id="users" class="list-group subitem collapse">
<a href="#" class="list-group-item">
<i class="icon-caret-right"></i> Users
<span class="badge bg_danger">0</span>
</a>
<a href="#" class="list-group-item">
<i class="icon-caret-right"></i> Create User
</a>
<a href="#" class="list-group-item">
<i class="icon-caret-right"></i> Create Group
</a>
</div>
<a href="#articles" class="list-group-item" data-parent="#sidebar">
<i class="icon-file-text"></i> Articles
<span class="badge bg_danger">0</span>
</a>
<div id="articles" class="list-group subitem collapse">
<a href="#" class="list-group-item bg_warning">
<i class="icon-caret-right"></i> Articles
<span class="badge bg_danger">0</span>
</a>
<a href="#" class="list-group-item">
<i class="icon-caret-right"></i> Create Article
</a>
</div>
</div>
</div>
And this is the corresponding js :
$('#sidebar > a').on('click', function (e) {
e.preventDefault();
if(!$(this).hasClass("active")){
var lastActive = $(this).closest("#sidebar").children(".active");
lastActive.removeClass("active");
lastActive.next('div').collapse('hide');
$(this).addClass("active");
$(this).next('div').collapse('show');
}
});
If you are looking for auto collapsible sidebar with animation this is the best according to me
Code
https://github.com/IronSummitMedia/startbootstrap-simple-sidebar
Demo
http://ironsummitmedia.github.io/startbootstrap-simple-sidebar
Related
Hey everyone so I want to do something rather simple. I want to make a side menu that has icons on it. When you click on those icons it should expand the navigation. Similar to how canva.com does their navigation when you get into a project. Start off with a small navbar with icons as shown in the first image and finally go to the full expanded as in the second image.
I have the following code that I used as a starting point and it kind of works but it expands on hover if anyone knows a good way to make a sidebar like this or how to get my sidebar to expand on click please let me know thanks.
<div data-component="navbar">
<nav class="navbar p-0 fixed-top">
<button class="navbar-toggler navbar-toggler-left rounded-0 border-0" type="button" data-toggle="collapse" data-target="#megamenu-dropdown" aria-controls="megamenu-dropdown" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i><span class="ml-3">Advanced</span>
</button>
<div><a class="navbar-brand px-1" href="#"><img src="http://kris.agentfire2.com/wp-content/mu-plugins/agentfire-shared-library/img/agentfire.svg" class="d-inline-block mt-1" alt="AgentFire Logo" height="40"></a>
<div class="right-links float-right mr-4">
<i class="fa fa-home mr-3"></i>
<div class="d-inline dropdown rounded-0 mx-3">
<a class="dropdown-toggle" id="tools" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#"><i class="fa fa-wrench" aria-hidden="true"></i></a>
<div class="dropdown-menu dropdown-menu-right rounded-0 text-center" aria-labelledby="tools">
<a class="dropdown-item px-2" href="#">Recompile CSS</a>
</div>
</div> <!-- /.dropdown -->
see full code at
https://codepen.io/Kamilica/pen/XRbvaL
I want to design icon menu & click to expand submenu using HTML CSS.
I want to design this
I want show the sub menu next row of the responsive div as shows above image. but the problem is the sub menu appear next line but rest of the parent menu goes under it see the problem from the bellow image
this is the problem
I used bootstrap4 and following html
<div class="icon-bar" id="myGroup">
<a class="btn btn-primary" href="index.html" data-toggle="collapse" role="button" aria-expanded="false">
<i class="menu-icon mdi mdi-television fa-4x"></i>
<br>
<span class="menu-title">Dashboard</span>
</a>
<a class="btn btn-primary" data-toggle="collapse" href="#Authentication" role="button" aria-expanded="false" aria-controls="collapseExample1">
<i class="menu-icon fa fa-handshake-o fa-4x"></i>
<br>
<span class="menu-title">Authentication</span>
</a>
<div class="collapse" id="Authentication" data-parent="#myGroup">
<div class="card card-body">
<a class="btn btn-primary btnsubmenu" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample1">
<i class="fa fa-angle-right fa-4x" aria-hidden="true"></i>
<br>
<span class="menu-title">Groups</span>
</a>
<a class="btn btn-primary btnsubmenu" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample1">
<i class="fa fa-angle-right fa-4x" aria-hidden="true"></i>
<br>
<span class="menu-title">Users</span>
</a>
</div>
</div>
<a class="btn btn-primary" href="pages/entity-profile-list.html" role="button" data-toggle="collapse" aria-expanded="false" >
<i class="menu-icon mdi mdi-television fa-4x"></i>
<span class="menu-title">Entity Profile</span>
</a>
<a class="btn btn-primary" data-toggle="collapse" href="#objectProfile" role="button" aria-expanded="false" aria-controls="objectProfile">
<i class="menu-icon fa fa-object-group fa-4x" aria-hidden="true"></i>
<br>
<span class="menu-title">Object Profiles</span>
</a> .......
Can anyone please help me? JSFiddle
this is actually quick and dirty and will not work 100%, but it could give you hint into the right direction. The intention here is to move the anchor elements, or better move the "opening menu" to the right position.
function test(element){
var element = $(element),
elemWidth = element.outerWidth(),
rightSpace = ($('#myGroup').width() - (element.offset().left + element .outerWidth())),
idx = parseFloat(rightSpace / elemWidth).toFixed(0),
moveelem = $(element).nextAll().slice(1,idx);
var objectProfile = $('#objectProfile');
element.after(moveelem);
objectProfile.after()
}
$('#myGroup > .btn.btn-primary').on('click', function(el){
test($(this));
})
here is your enhanced fiddle
I have the following data-toggle i want to collapse for the menu. I have provided the necessary bootstrap classes, but it's still not working either.
Html code:
<div class="navbar navbar-compact">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a rel="nofollow" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse" title="Toggle menu">
<span class="menu-name">Menu</span>
<span class="menu-bars">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</span>
</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<ul class="nav" id="topMenu" data-submenu="horizontal">
<li class=" active ">
<a rel="nofollow" href="//ss-template-blog03.simplesite.com/434337774">FRONT PAGE</a>
</li>
<li class=" ">
<a rel="nofollow" href="//ss-template-blog03.simplesite.com/434337775">BLOG</a>
</li>
<li class=" ">
<a rel="nofollow" href="//ss-template-blog03.simplesite.com/434337777">CONTACT</a>
</li>
</ul>
</div>
</div>
</div>
</div>
My Bootstrap classes that i have loaded into my project
bootstrap.collapse-2.3.2.js
bootstrap.dropdown-2.3.2.js
bootstrap.modal-2.3.2.js
I have my own CSS for the styling
This is how i load my js files
You have 2 copy of Jquery.js files...
remove one of them
And include Bootstrap.js file after Jquery.js file.
Update:
Do not remove dot in ".nav-collapse" as suggested in another answer.
if this does not work.. try removing all other Bootstrap includes
I have Created Jsfidle:
[https://jsfiddle.net/DTcHh/40014/]
I'm having problems in the Bootstrap navigation menu. When I freshly reload my page, the toggle button works fine i.e. on click it shows the li items. However, after the first click, it does not work. In my Master page I already have a Navigation Menu of Bootstrap, which is working absolutely fine. The problem is occurring for my child page.
Here is my rendered code for the first time:
<nav class="navbar navbar-default" role="tab">
<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="#bs-example-navbar-collapse-2" >
<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-2">
<ul class="nav navbar-nav" id="tabHeader">
<li>
<a class="dropdown-toggle align-center tabColor" id="divFavItemsTab" data-toggle onclick="ShowFavouriteNew();">
<asp:Literal ID="literalMyFav" runat="server" Text="<%$ Resources:Resource,lblMyFavorites %>"></asp:Literal>
</a>
</li>
<li>
<a class="dropdown-toggle align-center tabColor" id="divMyItemsListTab" datatoggle onclick="ShowMyItemsNew();">
<asp:Literal ID="literalCmpitems" runat="server" Text="<%$ Resources:Resource,lblCompanyItem %>"></asp:Literal>
</a>
</li>
<li>
<a class="dropdown-toggle align-center tabColor" id="divPackageTab" onclick="ShowPackagesNew();">
<asp:Literal ID="ltrlCmpPackages" runat="server" Text="<%$ Resources:Resource,lblPackage %>"></asp:Literal>
</a>
</li>
<li>
<a class="dropdown-toggle align-center tabSelected" id="divOnlineTab" onclick="ShowOnlineNew();">
<asp:Literal ID="ltrlOnline" runat="server" Text="<%$ Resources:Resource,lblOnline %>"></asp:Literal>
</a>
</li>
</ul>
</div>
</div>
</nav>
This is my code when I click on the toggle button:
<nav class="navbar navbar-default" role="tab">
<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="#bs-example-navbar-collapse-2" >
<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 in" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav" id="tabHeader">
<li>
<a class="dropdown-toggle align-center tabColor" id="divFavItemsTab" data-toggle onclick="ShowFavouriteNew();">
<asp:Literal ID="literalMyFav" runat="server" Text="<%$ Resources:Resource,lblMyFavorites %>"></asp:Literal>
</a>
</li>
<li>
<a class="dropdown-toggle align-center tabColor" id="divMyItemsListTab" datatoggle onclick="ShowMyItemsNew();">
<asp:Literal ID="literalCmpitems" runat="server" Text="<%$ Resources:Resource,lblCompanyItem %>"></asp:Literal>
</a>
</li>
<li>
<a class="dropdown-toggle align-center tabColor" id="divPackageTab" onclick="ShowPackagesNew();">
<asp:Literal ID="ltrlCmpPackages" runat="server" Text="<%$ Resources:Resource,lblPackage %>"></asp:Literal>
</a>
</li>
<li>
<a class="dropdown-toggle align-center tabSelected" id="divOnlineTab" onclick="ShowOnlineNew();">
<asp:Literal ID="ltrlOnline" runat="server" Text="<%$ Resources:Resource,lblOnline %>"></asp:Literal>
</a>
</li>
</ul>
</div>
</div>
</nav>
Up till now everything works fine, and I can see on click my li items. But this happens only for the first click. If I click again on the button so that these li" items get collapsed, they are not. I found out that in class as you can see above gets appended after first click is not being removed on second click. So what I did was I ran a jQuery like this:
$("#btnBsTab").click(function () {
if ($("#bs-example-navbar-collapse-2").hasClass("in")) {
$("#bs-example-navbar-collapse-2").removeClass("in");
} else {
$("#bs-example-navbar-collapse-2").addClass("in").css({height:'auto !important'});
}
});
});
Here btnBsTab is the button id, and I removed the data-target attribute from the code.
Now this works fine for me but I don't want to do like this way as bootstrap itself offers "data-target" functionality that actually handles div id on every click.
I am using jquery-1.9.0 and bootstrap 3.0.0 css and bootstrap.js also.
I have a Bootstrap menu with the following structure:
<nav class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="/">
<span class="title">Some Title</span>
</a>
<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 collapse">
<ul class="nav" data-bind="foreach: navRoutes">
<li><a data-bind="css: { active: isActive() }, attr: { href: hash }, text: name"></a></li>
</ul>
<ul class="nav pull-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-cogs"/> Admin<b class="caret"></b></a>
<ul class="dropdown-menu pull-right">
<!-- ko foreach: adminRoutes -->
<li><a data-bind="attr: { href: hash }, html: caption"></a>
<!-- /ko -->
</ul>
</li>
<li><a data-bind="click: logOff" href="#"><i class="icon-signout"/> Log Off</a></li>
</ul>
</div>
<div class="loader pull-right" data-bind="css: { active: showLoader }">
<i class ="icon-spinner icon-2x icon-spin" ></i>
</div>
</div>
</nav>
When the screen is resized such that the width reduces below the threshold set in #navbarCollapseWidth in variables.less the menu does indeed collapse. However the height of the navbar increases from 59px to 126px. If the width is increased back above the threshold then the navbar height reverts to a height of 59px. I want the navbar height to stay the same when collapsed i.e. to stay at 59px. Is the increase expected behaviour? How can I achieve the behaviour that I am looking for?
I found that the problem was actually the last div with a class of "loader pull-right" that was causing the problem. I worked around the problem by moving this div inside the div with a class of "nav-collapse collapse". Not entirely satisfactory - but better.