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
Related
I have started designing a website using HTML CSS Bootstrap and while making navigation menu dropdown menu is not coming on bringing mouse over instead its showing under it
I am hereby attaching the required code
<ul class="main-menu sf-menu">
<li class="active">Home</li>
<li>Know Your AO/Region/Branch
</li>
<li>HR Section
</li>
<li>General Banking
<ul>
<li> RajBhasha </li>
<li> Security </li>
<li> Miscellaneous </li>
</ul>
</li>
</li>
<li> Advances </li>
<li>IT Section
</li>
<li>Regions
<ul>
<li>Region 1:Nainital </li>
<li>Region 2: Almora </li>
<li>Region 3: Pithoragarh and Champawat </li>
<li>Region 4: Bageshwar and Chamoli </li>
<li>Region 5: Udham Singh Nagar </li>
</ul>
</li>
<li>News
</li>
</li>
<li>Staff Corner</li>
</ul> <!-- /.main-menu -->
</nav>
The result is like thisenter image description here
Please Help....
First add class "dropdwon" in li which you want to make dropdown. Second add class "dropdown-menu" on ul
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<nav>
<ul class="nav navbar-nav mainNavigation">
<li class="active">Home </li>
<li> About Us </li>
<li> Marketing Services </li>
<li> IT Management Services </li>
<li class="dropdown"> Molex Portfolio
<ul class="dropdown-menu">
<li> Fibre Products </li>
<li> Copper Products </li>
</ul>
</li>
<li>Contact Us </li>
<li> Employment Opp </li>
</ul>
</nav>
</div>
and add this css
.dropdown:hover .dropdown-menu{ display:block; }
I am trying to write my article beside my vertical menu, but all my article going inside that menu. I want my menu to be fixed on that page on the left side and all my new articles or any pictures should come on after menu.
MY HTML
<nav id="wrapper-250">
<ul class="accordion">
<li id="one" class="files">
Health Beat
<ul class="sub-menu">
<li><em>01</em>Sub Menu 1
<ul class="sub-sub-menu">
<li><em>a</em>Sub Menu 2</li>
<li><em>b</em>Sub Menu 2</li>
<li><em>c</em>Sub Menu 2</li>
<li><em>d</em>Sub Menu 2</li>
<li><em>e</em>Sub Menu 2</li>
</ul>
</li>
<li><em>02</em>Sub Menu 1</li>
<li><em>03</em>Sub Menu 1</li>
<li><em>04</em>Sub Menu 1</li>
<li><em>05</em>Sub Menu 1</li>
</ul>
</li>
<li id="two" class="mail">
Mail
<ul class="sub-menu">
<li><em>01</em>Hotmail</li>
<li><em>02</em>Yahoo</li>
</ul>
</li>
<li id="three" class="cloud">
Cloud
<ul class="sub-menu">
<li><em>01</em>Connect</li>
<li><em>02</em>Profiles</li>
<li><em>03</em>Options</li>
<li><em>04</em>Connect</li>
<li><em>05</em>Profiles</li>
<li><em>06</em>Options</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>
</nav>
<div id="body-part">
<p>
</P>
</div>
http://codepen.io/anon/pen/XbXbqQ
Add a big padding-left to your #body-part:
padding-left: 500px; /* example */
Demo here: http://jsfiddle.net/baLq1d1k/
Or you can do it using jquery if the width of your #wrapper-250 changes:
$("#body-part").css("padding-left", ($("#wrapper-250").width() + 10));
I'm using Bootstrap 3 to create a menu. Simple run of the mill html/css stuff.
Having problems when on the iPad - some of the links don't work.
The dropdown menu is working fine - as are all the links within - which seems strange. There's a "scroll-to" function on the list - might be the problem but it's not affecting the dropdown? Sort of stumped.
Thanks in advance.
Can be seen here.
http://www.lapthelough.org/index.php/lap10
<div class="navbar-collapse collapse">
<ul id="scrolling" class="nav nav-pills">
<li class="active menubadge float shadow" >Home</li>
<li>event</li>
<li>route</li>
<li>start</li>
<li>safety</li>
<li>partner</li>
<li>fundraise</li>
<li>register</li>
<!-- dropdown in main menu "DROPNAV"-->
<li class="dropdown">
… <span class="caret"></span>
<ul class="dropdown-menu">
<li>Training</li>
<li>FAQs</li>
<li>Blog</li>
<li>Forum</li>
<li class="divider"></li>
<li class="dropdown-header">Social</li>
<li>Facebook</li>
<li>Twitter</li>
</ul>
</li>
</ul>
</div>
I want to open one of the submenus of a superfish menu with an event. For example with a button and "onclick". And i want it to stay opened until you press a Close button
How could i do that? Can i call a "hover event" function from the superfish.js somehow?
<ul class="sf-menu">
<li class="current" id="qwqw">
ThisToHover(forexample)
<ul >
<li>
Ismertető
</li>
<li class="current">
Cégtörténet
</li>
<li>
Telephely
</li>
<li>
ISO
</li>
<li>
Referecciák
</li>
</ul>
</li>
<li>
menu
<ul>
<li>Teherfuvarozás</li>
<li>Gépszállítás</li>
<li>Gépbérlet
<ul>
<li>Subsubmenu</li>
<li>Nyan Cat</li>
</ul>
</li>
<li>Gépi Földmunka</li>
<li>Bontás</li>
<li>Lorem Ipsum</li>
</ul>
</li>
<li>
menu
</li>
<li>
menu
</li>
</ul>
it was so much easier than I thought.
Simply had to add class 'sfHover'
document.getElementById('qwqw').className='sfHover';
...for example.
Here is the markup I'm using:
<ul class="menu">
<li id="planning_menuItem" class="menuItem">Estate Planning</li>
<ul class="subMenu">
<li id="will_menuItem" class="subMenuItem">Last Will & Testament</li>
<li id="poa_menuItem" class="subMenuItem">Power Of Attorney</li>
<li id="livingWill_menuItem" class="subMenuItem">Living Will</li>
<li id="trusts_menuItem" class="subMenuItem">Trusts</li>
</ul>
<li id="probate_menuItem" class="menuItem">
Estate Probate Administration
</li>
<li id="realEstate_menuItem" class="menuItem">Real Estate</li>
<li id="medicaid_MenuItem" class="menuItem">Medicaid</li>
<li id="guardianships_menuItem" class="menuItem">Guardianships</li>
</ul>
Is there anything stylistically wrong about having that "ul" (class=subMenu) in the middle of a list without it having it's own li tag? This particular mark-up solves my problem, but I want at least be aware of whether I'm breaking some standard or convention.
The alternative is as follows, but it doesn't work for my particular task.
<ul class="menu">
<li id="planning_menuItem" class="menuItem">Estate Planning
<ul class="subMenu">
<li id="will_menuItem" class="subMenuItem">Last Will & Testament</li>
<li id="poa_menuItem" class="subMenuItem">Power Of Attorney</li>
<li id="livingWill_menuItem" class="subMenuItem">Living Will</li>
<li id="trusts_menuItem" class="subMenuItem">Trusts</li>
</ul>
</li>
<li id="probate_menuItem" class="menuItem">
Estate Probate Administration
</li>
<li id="realEstate_menuItem" class="menuItem">Real Estate</li>
<li id="medicaid_MenuItem" class="menuItem">Medicaid</li>
<li id="guardianships_menuItem" class="menuItem">Guardianships</li>
</ul>
Thanks!
Yes, there is something wrong, <ul>'s can be inside of <li>'s, but not other <ul>'s.
This is correct...
<ul>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
<li></li>
</ul>
According to the HTML DTD, you cannot have a <ul> directly under another <ul>. You should nest it inside a <li>.
If you're worried about the additional padding/margins, you can remove them with a rule that only applies to <ul> elements as direct children of <li> elements:
li > ul { margin: 0; padding: 0 }
(Or experiment with the best setting for your style)
BELOW is proper way
<ul class="menu">
<li id="planning_menuItem" class="menuItem">
Estate Planning
</li>
<li>
<ul class="subMenu">
<li id="will_menuItem" class="subMenuItem">
Last Will & Testament
</li>
<li id="poa_menuItem" class="subMenuItem">
Power Of Attorney
</li>
<li id="livingWill_menuItem" class="subMenuItem">
Living Will
</li>
<li id="trusts_menuItem" class="subMenuItem">
Trusts
</li>
</ul>
</li>
<li id="probate_menuItem" class="menuItem">
Estate Probate Administration
</li>
<li id="realEstate_menuItem" class="menuItem">
Real Estate
</li>
<li id="medicaid_MenuItem" class="menuItem">
Medicaid
</li>
<li id="guardianships_menuItem" class="menuItem">
Guardianships
</li>
</ul>
as others have said the second way is valid
here's a forked jsfiddle showing some new CSS which should help
summary is that you want to keep the ul's and their li's full width no side padding or margins, so reset all ul's; then make the a's display block so they fill their parent li's - then use text-indent to create the indented look of the li's
then however you choose to apply an "active or selected" class - apply it to the li OR a and any hover changes can be made too.