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
Related
I am using react, react-bootstrap.
This is my react code snippet:
<Navbar bg="light" expand="lg" className="d-lg-none container-fluid">
<Navbar.Toggle aria-controls="responsive-course-nav" />
<span className="d-sm-inline-block">Test 123</span>
{ // ... rest of the components }
</Navbar>
This is my snippet converted to HTML when rendered to browser:
<nav class="d-lg-none container-fluid navbar navbar-expand-lg navbar-light bg-light"><button
aria-controls="responsive-course-nav" type="button" aria-label="Toggle navigation"
class="navbar-toggler collapsed"><span class="navbar-toggler-icon"></span></button>
<div class="d-flex text-right">Test 123</div>
<div class="navbar-collapse collapse" id="responsive-course-nav">
<div class="mr-auto navbar-nav">
<div class="nav-item dropdown" style="padding-left: 0em; padding-right: 0.5em;"><a aria-haspopup="true"
aria-expanded="false" id="basic-nav-dropdown" href="#" class="dropdown-toggle nav-link"
role="button"><span class="d-lg-none" style="font-size: 21px;"> Course Content </span></a></div>
<div class="nav-item dropdown" style="padding-left: 0em; padding-right: 0.5em;"><a aria-haspopup="true"
aria-expanded="false" id="basic-nav-dropdown" href="#" class="dropdown-toggle nav-link"
role="button"><span class="d-lg-none" style="font-size: 21px;"> Course Content </span></a></div>
</div>
</div>
</nav>
It gets rendered as follows:
I want "Test 123" to be left aligned just after the hamburger menu button. How do I set CSS styles or bootstrap classes?
Demo
codesandbox demo
Update:
Here is my corresponding CSS from dev tools if it helps:
PS:
My package.json:
"react": "^17.0.1"
"bootstrap": "^4.6.0",
"react-bootstrap": "^1.4.3"
Add me-auto class.
<span className="me-auto d-sm-inline-block">Test 123</span>
Add padding as needed eg:- px-3
<span className="me-auto px-3 d-sm-inline-block">Test 123</span>
Code Sandbox: https://codesandbox.io/s/dawn-sunset-gib5x5?file=/src/App.js:365-424
For your version of bootstrap use the below classes.
Bootstrap: 4.6.0
<span className="mr-auto pl-4 ">Test 123</span>
Code Sandbox: https://codesandbox.io/s/cocky-bhabha-vmlhqj?file=/src/App.js
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 want to have this bootstrap menu I'm creating and will use for many shows on our website to be a plain nav-tabs menu with the Social and info links on the right side. But I can't figure out the code. I'm wondering if someone can help us with the code and change it so it uses the nav-tabs instead of the normal nav & looks clean instead of the gray block it's in currently...
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
</a>
<a class="brand" href="#">Name Of Show</a>
<div class="nav-collapse">
<ul class="nav">
<li>Cast</li>
<li>Episodes</li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<div class="btn-group">
<a class="btn btn-default" style="color:#3b5998;margin-top:-2px;" href="#">
<i class="fa fa-facebook fa-2x" title="Facebook"></i>
</a>
<a class="btn btn-default" style="color:#00aced;margin-top:-2px;" href="#">
<i class="fa fa-twitter fa-2x" title="Twitter"></i>
</a>
<button type="button" style="height:39px;margin-top:-2px;" class="btn btn-inverse">TV-14</button>
<button type="button" style="height:39px;margin-top:-2px;" class="btn btn-default disabled">1 Season | HD | 2011</button>
</div>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
</div>
Thank you in advance to anyone who helps me with this. I've been stuck for days...
With Protostar Template (one of default templates in Joomla!) you could use the nav-tabs instead of nav-pills or others Bootstrap classes opening the administration panel > module > menu > advanced > Menu Class Suffix; and inside the field write simply nav-tabs after a space.
If you want substitute the entire HTML code of menu you have to build a new Joomla! module or try to modify the php files here: joomla root/modules/mod_menu/tmpl
I am developing web application which is mobile responsive, i have slider on home page and select city dropdown on slider image. every thing woring fine with desktop, when open the application on MOTO E (540*960 resolution). i can see the image but dropdown is not visible. how can i resolve my issue.
below is my html bootstrap code
<div class="carousel-inner ">
<div class="item active">
<img class="img-responsive slideropacity" src="~/Images/Home/Slider/slider01.jpg" alt="slider">
<div class="slider-content">
<div class="col-md-12">
<div class="btn-group" id="btncity">
<button type="button" class="btn btn-default drp-btn">select your city</button>
<button type="button" class="btn btn-default dropdown-toggle drp-btn-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu city-dropdown-menu" id="city-dropdown-menu"></ul>
</div>
</div>
</div>
</div>
</div>
Thanks in advance for help..
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