I'm building some website and I want to have menu like on http://www.strv.com (with transition effect on open and close).
I've already done code like:
<div class="menu">
<button id="hamburger" type="button" class="btn pull-left navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button id="hamburger" class="btn pull-left">
<span class="fa fa-bars"></span>
</button>
<ul class="list-inline nav-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="pull-right"><i class="fa fa-shopping-bag" aria-hidden="true"></i></li>
</ul>
</div>
<div id="mainmenu">
<div class="container">
<button type="button" class="close btn btn-default navbar-toggle">Close</button>
<ul class="nav nav-pills nav-stacked">
<li>Subitem1</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</li>
</ul>
</div>
</div>
JSFiddle: https://jsfiddle.net/eztuhvhL/
(not working there and don't know why), but there is no transition effect on close and I can't solve it.
And also I want to do add "Item1, Item2, Item3" to this menu on mobile screens and I don't know how to figure it out.
Thank you.
Your problem is that you have two buttons with the id hamburger so jquery doesn't know which one you want. If you look at the console for like chromes devtools, you will see that nothing happens when you click it. The solution is to get rid of the first instance of hamburger. Here is what I got:
http://codepen.io/Squeakasaur/pen/mWKzer
<div class="menu">
<button id="hamburger" class="btn pull-left">
<span class="fa fa-bars"></span>
</button>
<ul class="list-inline nav-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="pull-right"><i class="fa fa-shopping-bag" aria-hidden="true"></i></li>
</ul>
</div>
<div id="mainmenu">
<div class="container">
<button type="button" class="close btn btn-default navbar-toggle">Close</button>
<ul class="nav nav-pills nav-stacked">
<li>Subitem1</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</li>
</ul>
</div>
</div>
That should fix your problem. You can also just change the id of the first instance to something else :P
Related
I am having a lot of trouble making navbar item to active on click.
I have included this navbar file to different pages but when i click on an item it doesn't change its class or its styling.
I have tried many techniques from using jquery onclick functions to add class active on click to changing changing css onclick but nothing is working. Any possible help will be highly appreciated . Navbar code is below :
<div class="header" id="home">
<div class="content white agile-info">
<nav class="navbar navbar-default " role="navigation">
<div class="container">
<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>
<a class="navbar-brand" href="index.php">
<h1><span class="fa fa-signal" aria-hidden="true"></span> Soft <label>Hr Agency</label></h1>
</a>
</div>
<!--/.navbar-header-->
<div class="nav navbar-nav mr-auto" id="bs-example-navbar-collapse-1" style="margin-right: -5%">
<nav class="link-effect-2" id="link-effect-2">
<ul class="nav navbar-nav navbar-right" >
<li class="active">Home</li>
<li class="dropdown">
Services <b class="caret"></b>
<ul class="dropdown-menu">
<li>Services 2</li>
<li class="divider"></li>
<li>Services 3</li>
<li class="divider"></li>
<li>Codes</li>
<li class="divider"></li>
<li>Icons</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Jobs<b class="caret"></b>
<ul class="dropdown-menu multi-column columns-2">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>Walk-ins</li>
<li>Bpo Jobs</li>
<li>Teaching Jobs</li>
<li>Diploma Jobs</li>
<li>Tech Support</li>
<li>Finance Jobs</li>
<li>Part time Jobs</li>
<li>Health Care</li>
<li>Hospitality</li>
<li>Internships</li>
<li>Research Jobs</li>
<li>Defence Jobs</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>Recruiter Updates</li>
<li>Upload Resume</li>
<li>Shortcodes</li>
</ul>
</div>
</div>
</ul>
</li>
<li>Events</li>
<li>Professionals</li>
<li>Contact</li>
<li >
<a style="margin-top: -5%" href="login.php">
<button type="submit" onclick="location.href='login.php';" style="float: right;background: #23B684;width: 100%;color: white" class="btn btn-block">
<i class="fa fa-user" aria-hidden="true"> </i> Login</button></a></li>
</ul>
</nav>
</div>
<!--/.navbar-collapse-->
<!--/.navbar-->
</div>
</nav>
</div>
</div>
Normally this should work using JQuery:
$('.nav .navbar-nav li a').click(function(){
$(this).addClass("active"); });
you have also to check what the active class is changing.
I think what you mean is for every <li> item that you click, an active class name would be added to its list of class names. If I'm right in what I'm thinking, here's my suggestion:
HTML
<div class="header" id="home">
<div class="content white agile-info">
<nav class="navbar navbar-default " role="navigation">
<div class="container">
<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>
<a class="navbar-brand" href="index.php">
<h1><span class="fa fa-signal" aria-hidden="true"></span> Soft <label>Hr Agency</label></h1>
</a>
</div>
<!--/.navbar-header-->
<div class="nav navbar-nav mr-auto" id="bs-example-navbar-collapse-1" style="margin-right: -5%">
<nav class="link-effect-2" id="link-effect-2">
<ul class="nav navbar-nav navbar-right main-ul" >
<li class="active">Home</li>
<li class="dropdown">
Services <b class="caret"></b>
<ul class="dropdown-menu">
<li>Services 2</li>
<li class="divider"></li>
<li>Services 3</li>
<li class="divider"></li>
<li>Codes</li>
<li class="divider"></li>
<li>Icons</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Jobs<b class="caret"></b>
<ul class="dropdown-menu multi-column columns-2">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>Walk-ins</li>
<li>Bpo Jobs</li>
<li>Teaching Jobs</li>
<li>Diploma Jobs</li>
<li>Tech Support</li>
<li>Finance Jobs</li>
<li>Part time Jobs</li>
<li>Health Care</li>
<li>Hospitality</li>
<li>Internships</li>
<li>Research Jobs</li>
<li>Defence Jobs</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>Recruiter Updates</li>
<li>Upload Resume</li>
<li>Shortcodes</li>
</ul>
</div>
</div>
</ul>
</li>
<li>Events</li>
<li>Professionals</li>
<li>Contact</li>
<li ><a style="margin-top: -5%" href="login.php"> <button type="submit" onclick="location.href='login.php';" style="float: right;background: #23B684;width: 100%;color: white" class="btn btn-block"> <i class="fa fa-user" aria-hidden="true"> </i> Login</button></a></li>
</ul>
</nav>
</div>
<!--/.navbar-collapse-->
<!--/.navbar-->
</div>
</nav>
</div>
</div>
CSS
.active {
background: red;
}
JavaScript (JQuery)
$('.main-ul li').click(function(e) {
e.preventDefault();
$(this).addClass('active').siblings().removeClass('active');
})
I added a main-ul on the first <ul> so I can easily reference to it and its <li> items then I created .active in CSS. Now whenever you click on an <li> item, a red background is applied to it indicating that it has an active class name.
I am using Bootstrap 3 and I want to create a sidebar, like the one that appear in mobile apps where they are hidden initially and appear from left to right on click.
The following html which uses bootstrap, creates a nav bar which on smaller devices changes into a collapsable icon. On clicking the icon the menu appears from top down. Does bootstrap provide feature to change the transition direction? Please help, I am new to css and bootstrap
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header pull-left">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand" href="#">Demo</a>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">City <span class="caret"></span></a>
<ul class="dropdown-menu">
<li></li>
<li>Pune</li>
<li>Hyderabad</li>
</ul>
</li>
<li>menu item</li>
<li></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
Bootstrap has built in functionality for sidebar menus.
http://startbootstrap.com/template-overviews/simple-sidebar/
http://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle
How would I go about getting the social media buttons to align next to each other -- that is, horizontally rather than vertically -- in the mobile mode on the drop down menu?
The icons are within a standard bootstrap nav bar, aligned to the right side of the bar.
Whenever someone clicks on the mobile drop down menu it currently lists these icons vertically. I want them horizontal.
Here is my code for the menu div.
<div class="container">
<div class="header">
<ul class="nav nav-pills pull-right">
<li class="active"></li>
<li></li>
<li></li>
</ul>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href="index.html">Welcome </a> </div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Broadmark Partners</li>
<li>Blog</li>
<li class="dropdown">
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="http://facebook.com/" class="btn btn-social-icon btn-facebook">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="http://twitter.com/" class="btn btn-social-icon btn-twitter" >
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="http://www.linkedin.com/in/" class="btn btn-social-icon btn-linkedin">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li>
<a href="https://github.com/broadmarkio" class="btn btn-social-icon btn-github">
<i class="fa fa-github"></i>
</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<h3 class="text-muted"> </h3>
<p> </p>
</div>
you just need to apply the nav-pills-class to the list like so.
<ul class="nav navbar-nav navbar-right nav-pills">
see your sample working here: http://www.bootply.com/pm5SsVZrOi
Im using bootstrap-collapse.js v2.3.0, but for some reason on the first click the menu just appears and doesnt slide down.
I also noticed the height doesnt say auto , it says 205px. I dont have the menu set to this height anywhere in the CSS.
After the first click, when I go to toggle it closed, everything seems perfect, the height toggles between 0 and auto and there is a smooth transition as opposed to it instantly appearing.
Im unsure as to what code to include as it seems to be the bootstrap toggle that is the problem,
however here is the html...
I removed irrelivent bits of code..
<div class="navbar">
<div class="navbar-inner">
<a data-target=".nav-collapse" data-toggle="collapse" class="brand visible-phone">
Categories
</a>
<a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav">
<li> //more code </li>
<li class="dropdown">//more code<<b class="caret"></b>
<ul class="dropdown-menu" >
<li>//code</li>
<ul>
<li>//code</li>
</ul>
</ul>
</li>
<li>//code</li>
but here is a link to the site...
http://bc_mobile.hailstormcommerce.com/
Plz check this jsfiddle JSfiddle for you with navigation
<div class="navbar">
<div class="navbar-inner">
<a data-toggle="collapse" data-target=".nav-collapse" class="btn btn-navbar">
<i class="icon-bar"></i>
</a>
<a class="brand" href="">New Icon Menu</a>
<div class="nav-collapse">
<ul class="nav nav-pills pull-right">
<li><i class="icon-home icon-2x"></i> Home<br>
</li>
<li><i class=" icon-pencil icon-2x"></i>About Us
</li>
<li><i class=" icon-briefcase icon-2x"></i>Portfolio
</li>
<li><i class=" icon-envelope icon-2x"></i>Contact Us
</li>
</ul>
</div>
</div>
so what im trying to do at the moment is add a few more things below the bs-docs-sidebar for twitter bootstrap. Im currently using this code
<div class="row-fluid">
<div class="span3 bs-docs-sidebar">
<div class="row-fluid">
<ul class="nav nav-list bs-docs-sidenav affix">
<li><i class="icon-chevron-right"></i>item 1</li>
<li><i class="icon-chevron-right"></i> item 2</li>
<li><i class="icon-chevron-right disabled"></i> Item 3</li>
<li><a id="contribute" href="#forms"><i class="icon-chevron-right"></i> item 4</a>
<li><a id="contribute" href="#buttons"><i class="icon-chevron-right"></i> item </li> 5</a></li>
</ul>
<div class="well affix">
<h4>Big Heading</h4>
<div class="btn-group btn-block">
<button type="button" class="btn btn-warning">option 1</button>
<button type="button" class="btn btn-warning">option 2</button>
<button type="button" class="btn btn-warning">option 3</button>
</div>
<h4 class="pagination-centered">Or</h4>
<button class="btn btn-block btn-primary">Alternative</button>
</div>
</div>
but the position of the well, is not below the nav menu, it is stuck to the bottom of the page, and cut-off because the well contents seem to be pushing it out of range, is there a way to affix to the bottom of the nav menu instead?