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;
}
Related
The submenu in dropdown works fine on desktop view but no submenu in mobile/tab view?
there is the code
<li class="menu-item menu-item-has-children right">
<a href="#">Classes
<div class="canvas_wrapper">
<canvas class="menu_dashed">
</canvas>
</div>
</a>
<span class='button_open'>
</span>
<ul class="sub-menu">
<li class="menu-item back"><em>←</em> BACK</li>
<li class="menu-item">Music</li>
<li class="menu-item">Dance</li>
<li class="menu-item">Languages</li>
<li class="menu-item">Others</li>
</ul>
</li>
Check with a google tools for mobile device compactibility.
Once done, you'll have all dependencies unsupported specified.
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>
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.
I am currently working with foundation 5 and ultimately trying to make my page mobile friendly. I have a top navigation bar that I have created for the page following some of the basic structures. The navigation bar has problems being responsive. It does not display a menu at a all when I resize smaller the screen. How can I get the navigation bar to be responsive?
HTML:
<nav class="tab-bar show-for-small">
<a class="left-off-canvas-toggle menu-icon">
<span>Title</span>
</a>
</nav>
<nav class="top-bar docs-bar hide-for-small" data-topbar>
<ul class="title-area">
<li class="name">
<h1>
Title
</h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="divider"></li>
<li class="has-dropdown not-click">
<a class="" href="#">Test</a>
<ul class="dropdown">
<li>
SubTest
</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown not-click">
<a class="" href="#">Test2</a>
<ul class="dropdown">
<li>
SubTest2
</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown not-click">
<a class="" href="#">Test3</a>
<ul class="dropdown">
<li>
SubTest3
</li>
</ul>
</li>
</ul>
</section>
</nav>
You have given it the class .hide-for-small for the main one which holds all of the dropdowns.
Then the one that is viewable by mobile, you have no data inside of it.
Add the <a class="left-off-canvas-toggle menu-icon">
<span>Title</span>
</a> to the other nav.
Refer to this page here to get a proper responsive topbar.
Is there a way to extend this designmodo example to allow for 3 levels of navigation?
I’d very much like to use this menu example, but I can’t figure out how to add a third level of functionality. Any help would be greatly appreciated!
Example:
http://designmodo.com/css3-accordion-menu/
Here is a fiddle that i'm working with: http://jsfiddle.net/johnstonian/r5rEZ/
Here is a sample menu i'm working with:
<ul class="accordion">
<li id="one" class="files">
My Files<span>495</span>
<ul class="sub-menu">
<li id="five">
<em>01</em>Dropbox<span>42</span>
<ul class="sub-menu">
<li><a><em>01</em>3rd Level<span>9</span></a></li>
<li><em>02</em>3rd Level<span>14</span></li>
<li><em>03</em>3rd Level<span>3</span></li>
</ul>
</li>
<li><em>02</em>Skydrive<span>87</span></li>
<li><em>03</em>FTP Server<span>366</span></li>
<li><em>01</em>Dropbox<span>42</span></li>
</ul>
</li>
<li id="two" class="mail">
Mail<span>26</span>
<ul class="sub-menu">
<li><em>01</em>Hotmail<span>9</span></li>
<li><em>02</em>Yahoo<span>14</span></li>
<li><em>03</em>Gmail<span>3</span></li>
</ul>
</li>
<li id="three" class="cloud">
Cloud<span>58</span>
<ul class="sub-menu">
<li><em>01</em>Connect<span>12</span></li>
<li><em>02</em>Profiles<span>19</span></li>
<li><em>03</em>Options<span>27</span></li>
</ul>
</li>
<li id="four" class="sign">
Sign Out
<ul class="sub-menu">
<li><em>01</em>Log Out</li>
<li><em>02</em>Delete Account</li>
<li><em>03</em>Freeze Account</li>
</ul>
</li>
</ul>
Use a menu designed for this, such as:
CSSPlay: Multi-Level Flyout Menu
CSSPlay: A cross-browser drop-down cascading validating menu
CSSPlay: The ULTIMATE CSS only drop-down menu