could anyone help me adding this for navigating threw tabs. I want it to have some kind of loader just for the look.
http://jsfiddle.net/3KAnM/33/ loader
tabs example:
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><i class="fa fa-globe"></i> <span>NORTH AMERICA</span></li>
<li role="presentation"><i class="fa fa-globe"></i> <span>EUROPE</span></li>
<li role="presentation" class="unverifiedna"><i class="fa fa-globe"></i> <span>NA UNVERIFIED</span></li>
<li role="presentation" class="unverifiedeuw"><i class="fa fa-globe"></i> <span>EUW UNVERIFIED</span></li>
<li role="presentation" class="pbe"><i class="fa fa-globe"></i> <span>PBE</span></li>
Related
I've written a sidebar using Bootstap 5 which is placed on my _Layout view. The issue I'm having is when I load a new page like a users view, initialy it looks great, until I resize my screen and then the content on the users view slides behind the sidebar. I've tried placing the sidebar in a new column and row, etc but nothing I do seems to fix this. Below is my sidebar code, any help on this issue will be greatly appreciated.
<!-- Side Nav-->
<div class="container-fluid">
<div class="row">
<nav class="sidebar card py-2 mb-4 col-2 float-start vh-100 rounded-0 position-fixed" style="background-color: rgb(95,131,183);
width: 250px; padding-left: 0px; padding-right: 0px">
<ul class="nav flex-column" id="nav_accordion">
<li class="nav-item border-bottom">
<a class="nav-link bi bi-house" asp-area="" asp-controller="Home" style="color:whitesmoke; padding-left: 10px"> Home </a>
</li>
<li class="nav-item border-bottom">
<a class="nav-link bi bi-gear" href="#" style="color:whitesmoke; padding-left: 10px"> Settings </a>
</li>
<li class="nav-item border-bottom">
<a class="nav-link bi bi-speedometer" href="#" style="color: whitesmoke; padding-left: 10px"> Dashboard </a>
</li>
<li class="nav-item has-submenu border-bottom">
<a class="nav-link bi bi-people" href="#" style="color: whitesmoke; padding-left: 10px"> Contacts </a>
<ul class="submenu collapse" style="padding-left: 0px; padding-right: 0px">
<li><a class="nav-link" asp-area="" asp-controller="Users" asp-action="UsersIndex" style="color: whitesmoke"> Users </a></li>
<li><a class="nav-link" href="#" style=" color: whitesmoke"> Customers </a></li>
<li><a class="nav-link" href="#" style=" color: whitesmoke"> Suppliers </a></li>
</ul>
</li>
#* <li class="nav-item">
<a class="nav-link" href="#"> Something </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Other link </a>
</li>*#
</ul>
</nav>
</div>
</div
Many thanks
AJ
I want to create nav-bar under nested Dropdowns in Aurelia using Materialize.I tried very much.
<span repeat.for="item of menuItems">
<ul id="${item.target}" data-beloworigin="true" class='dropdown-content nested' if.bind="item.type==3" role="menu">
<li repeat.for="item of item.items" class.bind="item.class" role.bind="item.role">
<a if.bind="item.type==3" href="#" class.bind="item.class"role="button" aria-haspopup="true" aria-expanded="false" href='#' data-target="${item.target}" data-hover="hover" data-alignment="left" > Secondary ${item.label}
<span class="caret"></span>
</a>
<a if.bind="item.type==0" href.bind="item.url"> ${item.label}</a>
<a if.bind="item.type==1" href="#" click.delegate="menu(item.param)"> ${item.label}</a>
</li>
</ul>
<ul if.bind="item.type==3" id="${item.target}" class='dropdown-content' >
<li repeat.for="item of item.items" class.bind="item.class" role.bind="item.role">
<a if.bind="item.type==3" href="#" role="button" aria-haspopup="true" aria-expanded="false"> ${item.label}
<span class="caret"></span>
</a>
<a if.bind="item.type==0" href.bind="item.url" > Third ${item.label}</a>
<a if.bind="item.type==1" href="#" click.delegate="menu(item.param)"> ${item.label}</a>
</li>
</ul>
</span>
<nav class="navbar-default d-flex align-items-center">
<div class="nav-wrapper">
<ul class="right hide-on-med-and-down" >
<li repeat.for="item of menuItems" class.bind="item.class" role.bind="item.role">
<a if.bind="item.type==3" href="#" class='dropdown-button btn' beloworigin="true" data-target="${item.target}" role="button"
aria-haspopup="true" aria-expanded="false" >${item.label}
</a>
</li>
</ul>
</div>
</nav>
menuItems is getting menus from Menu.ts file.
Type 3 is using for Parents Menu
Type 0 is menus which will be executed to URL by click dropdown Menu
I want when this code run then menu bar should create in which I click on the dropdown then related sub-menu should be open.
After Some modification My code is working now.
<span repeat.for="item of menuItems">
<ul id="${item.target}" class='dropdown-content' if.bind="item.type==3" class.bind="item.class">
<li repeat.for="item of item.items" class.bind="item.class">
<a if.bind="item.type==3" href="#" class='dropdown-button' data-hover="hover" data-alignment="left"
data-target="${item.target}" href='#'> Secondary ${item.label}
<a if.bind="item.type==0" href.bind="item.url">${item.label}</a>
<a if.bind="item.type==1" href="#" click.delegate="menu(item.param)"> ${item.label}</a>
</a>
<ul id="${item.target}" class='dropdown-content' class.bind="item.class">
<li repeat.for="item of item.items" class.bind="item.class">
<a if.bind="item.type==0" href.bind="item.url">${item.label}</a>
<a if.bind="item.type==1" href="#" click.delegate="menu(item.param)"> ${item.label}</a>
</a>
</li>
</ul>
</li>
</ul>
</span>
<nav class="navbar-default row mb-0 d-flex align-items-center">
<div class="nav-wrapper col s12">
<i class="icon icon-propriete"></i>
<ul class="right hide-on-med-and-down">
<li repeat.for="item of menuItems" class.bind="item.class" role.bind="item.role">
<a if.bind="item.type==3" href="#" class="dropdown-trigger" data-target="${item.target}">${item.label}
</a>
</li>
</ul>
</div>
</nav>
I have the top-bar nav all setup and the dropdowns are displaying as expected. However, when I click on a dropdown link, the dropdown just disappears. The page does not advance to the URI as expected.
I'm stumped...
<section class="top-bar-section second-row">
<ul>
<li class="active"><i class="fa fa-exclamation-triangle"></i><span> Alert Central</span></li>
<li class="has-dropdown">
<i class="fa fa-bar-chart"></i><span> Analytics</span>
<ul class="dropdown">
<li>System Status</li>
<li>My Use</li>
<li>My User's Use</li>
<li>Account Information</li>
</ul>
</li>
<li class="has-dropdown">
<i class="fa fa-magic"></i><span> Filter Management</span>
<ul class="dropdown">
<li>Keywords</li>
<li>Categories</li>
<li>Locations</li>
</ul>
</li>
<li class="has-dropdown">
<i class="fa fa-users"></i><span> User Management</span>
<ul class="dropdown">
<li>Users</li>
<li>Roles</li>
</ul>
</li>
</ul>
</section>
Did you try to add data-topbar in <section> tag ?
<section data-topbar class="top-bar-section second-row">
I'd like to make a split button dropdown with Bootstrap 3. I didn't find any working snippet.
My navbar looks like:
<header class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
Example
</li>
<li>
Example
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</header>
You can place it inside the nav li and add navbar-btn to the btn-group..
<li>
<div class="btn-group navbar-btn">
<button class="btn btn-danger">Action</button>
<button data-toggle="dropdown" class="btn btn-danger dropdown-toggle"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</li>
Demo: http://bootply.com/100070
I'm trying to get a twitter bootstrap dropdown menu to not collapse and stay on the same line when using smaller devices. Here is what it currently looks like:
I'd like for the name (in this example John Smith) to be inline with My Application text and toggle button. How would I go about accomplishing that?
Example: http://bootply.com/99326
<div class="navbar navbar-default 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="#">My Application</a>
</div>
<div>
<ul class="nav navbar-nav navbar-right navbar-user">
<li class="dropdown user-dropdown">
<i class="fa fa-user"></i> John Smith <b class="caret"></b>
<ul class="dropdown-menu">
<li><i class="fa fa-user"></i> Profile</li>
<li><i class="fa fa-envelope"></i> Inbox <span class="badge">7</span></li>
<li><i class="fa fa-gear"></i> Settings</li>
<li class="divider"></li>
<li><i class="fa fa-power-off"></i> Log Out</li>
</ul>
</li>
</ul>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
DEMO: http://jsbin.com/eNUpufIs/2/edit?html,css,output
I make the demo links big so you can see it.
<div class="navbar navbar-default navbar-fixed-top my-custom-nav" role="navigation">
<div class="container">
<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="#">My Application</a>
<div class="navbar-right navbar-text cursor" data-toggle="dropdown" data-target=".user-dropdown">
<i class="fa fa-user"></i> John Smith<b class="caret"></b>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<ul class="nav navbar-nav navbar-user navbar-right">
<li class="dropdown user-dropdown">
<ul class="dropdown-menu">
<li><i class="fa fa-user"></i> Profile</li>
<li><i class="fa fa-envelope"></i> Inbox<span class="badge">7</span></li>
<li><i class="fa fa-gear"></i> Settings</li>
<li class="divider"></li>
<li><i class="fa fa-power-off"></i> Log Out</li>
</ul>
</li>
</ul>
</div>
</div>
CSS:
body {padding-top:50px;}
.cursor {cursor:pointer}
/* your going to need to fiddle with the css to make the menu consistent left padding-margin */
/* consistent left padding */
#media (max-width:767px) {
.my-custom-nav .navbar-collapse .navbar-nav > li {padding-left:15px!important;}
.my-custom-nav .user-dropdown > .dropdown-menu > li {padding-left:5px!important;}
}
Make sure you test it!