I'm trying to create spaced tabs. I want about 6-8 of them running across the width of the screen, each with equal distance apart from each other. I also need them to have dropdown ability on hover.
Initially I went with Bootstrap 3 for quick and fast tabs. However, I can't seem to get them to space equally across the width of the page.
Alternatively, I found this awesome snippet of code which is pure css. However, I'm far from a css wizard and making a pure dropdown like the tabs would take me a long time.
Anyone know a solution to the bootstrap 3 problem of spacing or know where I can get a pure css dropdown solution? Bootstrap 3 code below, pure css in jsfiddle link
Thanks!
Code:
<ul class='nav nav-tabs'>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 1</a>
<ul class='dropdown-menu'>
<li><a href='#'>test 1</a></li>
</ul>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 2</a>
<ul class='dropdown-menu'>
<li><a href='#'>test 2</a></li>
</ul>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 3</a>
<ul class='dropdown-menu'>
<li><a href='#'>test 3</a></li>
</ul>
</li>
</ul>
You can enclose your code inside a div with container-fluid class. It will help you to utilize entire width of apge.
ul.nav-tabs > li {
width: 33%;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<ul class='nav nav-tabs'>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 1</a>
<ul class='dropdown-menu'>
<li><a href='#'>test 1</a>
</li>
</ul>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 2</a>
<ul class='dropdown-menu'>
<li><a href='#'>test 2</a>
</li>
</ul>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 3</a>
<ul class='dropdown-menu'>
<li><a href='#'>test 3</a>
</li>
</ul>
</li>
</ul>
</div>
Related
I have a dropdown menu inside bootstrap nav tabs. But a particular dropdown item only hovers for a limited width.
the code snippet :
<ul class="page-title__nav common-list nav nav-tabs">
<li class="dropdown">
Inventory<b class="caret"></b>
<ul class="dropdown-menu">
<li style="margin-left: 15px;"><a data-toggle="tab" onclick="loadCategories()">Categories</a></li><br>
<li><a data-toggle="tab" onclick="loadItems()">Items</a></li><br>
<li><a data-toggle="tab" onclick="loadModifierGroups()">Modifier Groups</a></li><br>
</ul>
</li>
</ul>
The view :
Have you tried to remove style="margin-left: 15px;" from you first element
ok try this
<ul class="page-title__nav common-list nav nav-tabs">
<li class="dropdown">
Inventory<b class="caret"></b>
<div class="dropdown-menu">
<a data-toggle="tab" onclick="loadCategories()">Categories</a>
<a data-toggle="tab" onclick="loadItems()">Items</a>
<a data-toggle="tab" onclick="loadModifierGroups()">Modifier Groups</a>
</div>
</li>
</ul>
I am using trying to create vertical drop-down menu using purecss library but no success
purecss.io/menus/
My css code looks like:
<div class="pure-menu custom-restricted-width">
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-has-children">
T-Shirts
<ul class="pure-menu-children">
<li class="pure-menu-item">
<a class="pure-menu-link" href="t-shirts-rundhals-tx-2-1,-1-2-.html">Rundhals</a>
</li>
<li class="pure-menu-item">
<a class="pure-menu-link" href="t-shirts-v-neck-tx-3-1,-1-3-.html">V-Neck</a>
</li>
<li class="pure-menu-item">
<a class="pure-menu-link" href="t-shirts-longsleeve-tx-4-1,-1-4-.html">Longsleeve</a>
</li>
<li class="pure-menu-item">
<a class="pure-menu-link" href="t-shirts-tanktop-tx-124-1,-1-124-.html">Tanktop</a>
</li>
</ul>
</li>
</ul>
</div>
Even I copy paste the sample code from their documentation and its not working too
jsBin
It's working fine just add css for custom-restricted-width because your pure-menu div content 100% width of the screen, so that you can not show the dropdown menu.
.custom-restricted-width{
display:inline-block;
}
How do you add url item props in a menu after the first li element. I cant seem to get google to pick up my next item props after the first menu list.
<li itemtype="http://schema.org/LocalBusiness" id="main"> <a> home</a>
<ul id=" subnav" =""="">
<li> <a itemprop="url" href="">Item 1</a>
</li>
<li><a itemprop="url" href="">Item 2</a>
</li>
<li><a itemprop="url" href="">Item 3</a>
</li>
</ul>
</li>
<li id="two">
<a>hello</a>
<ul id="subnav1">
<li>Menu 2
</li>
<li><a itemprop="url" href=""> Item 4 Not being picked up</a>
</li>
</ul>
</li>
I'm making a dropdown menu in bootstrap.
Now I use in the li a a element where is described to toggle the dropdown menu.
But I actually want to put what is in the a element in to the li...
Because the whole li has to be clickable.
Hope you guys have I tip for me. ;)
<ul class="list-group">
<li class="list-group-item">
<a class="dropdown-toggle" data-toggle="dropdown">
Applicatie Ontwikkeling
</a>
<ul class="dropdown-menu">
<li class="list-group-item">HTML</li>
<li class="list-group-item">CSS</li>
<li class="list-group-item">jQuery</li>
</ul>
</li>
<li class="list-group-item">Netwerk Beheer</li>
<li class="list-group-item">Server Beheer</li>
</ul>
please apply 'dropdown' class to the li where you wants to add dropdown like this.
<ul class="list-group">
<li class="list-group-item dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">
Applicatie Ontwikkeling
</a>
<ul class="dropdown-menu">
<li class="list-group-item">HTML</li>
<li class="list-group-item">CSS</li>
<li class="list-group-item">jQuery</li>
</ul>
</li>
<li class="list-group-item">Netwerk Beheer</li>
<li class="list-group-item">Server Beheer</li>
You can just make the a tag take full width and then the entire li becomes clickable.
.dropdown-toggle{
display:inline-block;
width: 100%;
cursor: pointer;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<ul class="list-group">
<li class="list-group-item">
<a class="dropdown-toggle" data-toggle="dropdown">
Applicatie Ontwikkeling
</a>
<ul class="dropdown-menu">
<li class="list-group-item">HTML</li>
<li class="list-group-item">CSS</li>
<li class="list-group-item">jQuery</li>
</ul>
</li>
<li class="list-group-item">Netwerk Beheer</li>
<li class="list-group-item">Server Beheer</li>
</ul>
I have this in my HTML , I am using bootstrap 3 classes to make a drop down with in another drop down.
<div class="subnav">
<ul class="nav-pills">
<li class="dropdown" style="float: right;">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" >
<span id="spnUsrName">Welcome, {{usrName}}</span>
</a>
<ul class="dropdown-menu pull-right">
<li class="disabled" >Disabled link 1</li>
<li class="disabled" >Disabled link 2</li>
<li class="divider"></li>
<li class="dropdown-submenu">Settings
<ul class="dropdown-menu">
<li>Change Password</li></ul>
</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
However, the 'ul' inside the first dropdown-meu is not showing up. The "Settings" option is displayed, but change password option is not displayed. Where have I gone wrong.