which the navbar looks like this:
i have search the answer about jquery, but i'm not known jquery at all...the html code is :
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="http://www.zhi-tech.com" target="_blank">SmartGas System</a>
</div>
<div id="navbar" class="nav-pills navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li [class.active]="getLinkStyle('')">
<a class="link" [routerLink]="['/Home']">系统总览</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
账户管理 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li [class.active]="getLinkStyle('/account_managger/manual_meter')">
<a class="link" [routerLink]="['/AccountManualMeter']">人工账单</a>
</li>
</ul>
</li>
<li [class.active]="getLinkStyle('/device_manager')">
<a class="link" [routerLink]="['/DeviceManager']">设备管理</a>
</li>
<li class="disabled"><a>权限管理</a></li>
<li class="disabled"><a>统计信息</a></li>
</ul>
</div>
Related
I have a navBar with a drop-down. When you select either of the links on the drop-down the menu moves slightly to the left (+- 10px). You can see it a little better in mobile view.
<nav class="navbar navbar-inverse navbar-fixed-top">
<!-- add navbar-fixed-top -->
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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=""> <img src="" alt=""> </a> </div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li><i class="fa fa-home" aria-hidden="true"></i> </li>
<li> about </li>
<li class="dropdown">
overview <span class="caret"></span>
<ul class="dropdown-menu">
<li>cost breakdown</li>
<li>project progress</li>
</ul>
</li>
<li> photos </li>
<li> faq </li>
<li> news </li>
<li> contact </li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!-- container-fluid -->
</nav>
https://jsfiddle.net/art852/uyg1otg5/12/
The shifting happens because you have a vertical scrollbar due to content overflow. If you add the following it will remove the shift.
#navbar {
overflow-y:hidden;
}
https://jsfiddle.net/uyg1otg5/18/
I am a bit stuck with how to properly align a button on a nav-bar, where the button is wrapped inside a form.
Here is the markup I have (and here is a jsfiddle if its easier: https://jsfiddle.net/darrelltunnell/DTcHh/24292/)
<nav class="navbar navbar-inverse navbar-fixed-top gcs-navbar" id="main-menu">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed main-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand">
Test
</span>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul data-toggle="collapse" data-target="#navbar.in" class="nav navbar-nav navbar-right">
<li>One </li>
<li>Two </li>
<li>Three </li>
<form asp-area="" asp-controller="Account" asp-action="LogOff" method="post" id="logoutForm" class="navbar-right">
<ul class="nav navbar-nav navbar-right">
<li>
<a asp-area="" asp-controller="Manage" asp-action="Index" title="Manage">
<span class="fa fa-user"></span>
Daz
</a>
</li>
<li>
<button type="submit" class="btn btn-link navbar-btn navbar-link" style="border: none;padding-right:20px">Logout</button>
</li>
</ul>
</form>
</ul>
</div>
</div>
The problem is that both the anchor and the button (within the form) are not aligning correctly with the other nav items.
Any pointers much appreciated.
You should use <ul> tag like this:
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
<ul>
<li>Item3</li>
<li>Item4</li>
</ul>
Your Code:
<nav class="navbar navbar-inverse navbar-fixed-top gcs-navbar" id="main-menu">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed main-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand"> Test </span>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul data-toggle="collapse" data-target="#navbar.in" class="nav navbar-nav navbar-right">
<li>
One
</li>
<li>
Two
</li>
<li>
Three
</li>
</ul>
<form asp-area="" asp-controller="Account" asp-action="LogOff" method="post" id="logoutForm" class="navbar-right">
<ul class="nav navbar-nav navbar-right">
<li>
<a asp-area="" asp-controller="Manage" asp-action="Index" title="Manage"> <span class="fa fa-user"></span> Daz </a>
</li>
<li>
<button type="submit" class="btn btn-link navbar-btn navbar-link" style="border: none;padding-right:20px">
Logout
</button>
</li>
</ul>
</form>
</ul>
</div>
</div>
</nav>
I have a simple nav bar with logo on left and the word Menu on right that act as a dropdown. For small screens I need it to change the menu wording to a burger icon. So far I can get it to change to an icon but the list still contains the word menu and thats still a dropdown. How do I make it so the list only contains the items on the dropdown and not the dropdown itself?
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo pull-left animated wow fadeInLeft"><a class="navbar-brand" href="index.html"><img src="LOGO" alt="" title=""></a></div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
</ul>
Is there anyone that has used a similar menu style to Spotify? https://www.spotify.com/se/
I would like to have the menu cover whole page....
Example
Im using Bootstrap 3.
Has anyone done something similar?
You need to modify this code as you want..DEMO
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle pull-right" data-toggle="collapse"
data-target="#example-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="#">menu</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Dogs <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Terrier</li>
<li>Labrador</li>
<li>Pitbull</li>
<li>German Shephard</li>
<li>Chihuahua</li>
<li>Beagle</li>
</ul>
</li>
<li class="dropdown">
Cats <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Persian</li>
<li>Siamese</li>
<li>Ragdoll</li>
<li>Lion</li>
<li>Tiger</li>
</ul>
</li>
<li class="dropdown">
Primates <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Monkey</li>
<li>Lemur</li>
<li>Gorilla</li>
<li>Chimpanzee</li>
</ul>
</li>
<li class="dropdown">
Reptiles <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Boa</li>
<li>Monitor Lizard</li>
<li>Comodo Dragon</li>
<li>Iguana</li>
<li>Alligator</li>
</ul>
</li>
</ul>
</div>
</nav>
I am using Bootstrap 3, i am using top navigation bar and left side navigation bar, i want that it should work fine for mobile also, when i collapse the page from right to left then my top navigation works fine and both buttons appears but my left side navigation does not disappear, it appears and disappear on button click.
This is jsfiddle
This is the code:
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container nav-main">
<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>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#sidebar" role="complementary" >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand">Business Name Test </span>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<span class="glyphicon glyphicon-cog"></span> Settings
</li>
<li>
<span class="glyphicon glyphicon-question-sign"></span> Help
</li>
<li>
<span class="glyphicon glyphicon-log-out"></span> Logout
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container main">
<div class="row">
<div class="col-md-2 col-sm-2 col-lg-2" id="sidebar" role="complementary" >
<div class="m-sidebar">
<ul class="nav">
<li>Link1</li>
<li class="divider"></li>
<li>Link2</li>
<li>Link3</li>
<li class="divider"></li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</div>
</div>
<div class="col-md-10 col-sm-10 col-lg-10">
<div class="page-header">
<h1>Home Page</h1>
</div>
</div>
</div>
</div><!-- /container -->
Instead of using just
<ul class="nav">
for the left elements use:
<ul class="nav navbar-nav navbar-left">
Fiddle: http://jsfiddle.net/FDkqT/
That fixes all your problems