I need a little help here. I am trying to make a menu with submenu to be open without javascript or jquery (Only css if it is possible).
<nav id="container">
<ul>
<li>Link1</li>
<li class="haschildren selected">
<a>Link2</a>
<ul class="submenu">
<li>Link2-1</li>
<li>Link2-2</li>
<li>Link2-3</li>
</ul>
</li>
<li class="haschildren">
<a>Link3</a>
<ul class="submenu">
<li>Link3-1</li>
<li>Link3-2</li>
<li>Link3-2</li>
</ul>
</li>
</ul>
</nav>
When i have the class selected and page is loaded the .selected .submenu is open. But when i hover the other li that has submenu i want the selected submenu to disappear and the new one appear. In my case i cannot make the selected submenu hidden when hover over Link3 li.
Sorry for my english. To make it clear i would like when hover Link3 the Link2 submenu to become hidden and the Link3 submenu to open. But when hover out from Link3 to return to the default selected. If anyone could help i would appreciate it.
I made an example here. https://jsfiddle.net/ef8zgogr/
apply a display none to the .submenu's and then on :hover over the parent li (with the class of .hasChildren) change it to display block.
.submenu {display:none}
.selected ul{display:block}
#container:hover li ul{display:none}
#container li:hover ul{display:block}
<nav id="container">
<ul>
<li>Link1</li>
<li class="haschildren selected">
<a>Link2</a>
<ul class="submenu">
<li>Link2-1</li>
<li>Link2-2</li>
<li>Link2-3</li>
</ul>
</li>
<li class="haschildren">
<a>Link3</a>
<ul class="submenu">
<li>Link3-1</li>
<li>Link3-2</li>
<li>Link3-2</li>
</ul>
</li>
</ul>
</nav>
But when i hover the other li that has submenu i want the selected
submenu to disappear
there is no easy way to toggle close the selected (expanded) submenu when other submenu has been hover (more like radio button) by straight css.
Related
I am trying to make a three tiered CSS style menu.
Jsfiddle here : https://jsfiddle.net/kBVYD/1/
What I need to accomplish is to have the third tier of the menu to stay aligned with the parent menu. When you hover over menu item A, Menu B dropsdown. When you hover over the menu items in the dropdown they show a third dropdown to the right of Menu B.
Right now the third menu (products) when hovered is floating to the left, and it should be droping down under the initial menu item.
<div class="full_width">
<div class="wrapper">
<div class="page-wrap">
<ul class="dropdown">
<li>HOME</li>
<li>PRODUCTS
<ul class="sub_menu">
<li>
Compliment Containers<span class="span_right">»</span>
<ul class="test">
<div class="menu_level3_01">
<span>Wastebaskets</span>
<span>Compost</span>
<span>Curbside</span>
<span>Deskside Recycling</span>
</div>
<div class="menu_level3_02">
<span>Large Trash Collection</span>
<span>Large Reycling Collection</span>
<span>Waste Streaming Containers</span>
</div>
</ul>
</li>
</ul>
</li>
<li>PRODUCTS
<ul class="sub_menu">
<li>
Compliment Containers<span class="span_right">»</span>
<ul class="test">
<div class="menu_level3_01">
<span>Wastebaskets</span>
<span>Compost</span>
<span>Curbside</span>
<span>Deskside Recycling</span>
</div>
<div class="menu_level3_02">
<span>Large Trash Collection</span>
<span>Large Reycling Collection</span>
<span>Waste Streaming Containers</span>
</div>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
You just need to make the second tier relative and left: 0.
#menu1 ul.menu li ul.sub-menu li ul
{
position: relative;
display: none;
left: 0%;
}
https://jsfiddle.net/kBVYD/34/
I think this is what you want: Fiddle
You need the parent of the last menú (the "li") to NOT have position relative so the last menu absoluted position won't depend on the parent.
The as you have fixed values it's easy to set the submenu right where you want with 5px top (the margin of the first submenu with the main menú and the just a value for the left position, in this case 180px).
basically I've just added this to the fiddle:
.sub-menu > li {position:static !important;}
.sub-menu ul {top:5px !important; left:180px !important; }
Edited: the !important is just to overwrite your css's in the fiddle. You may better implement this attributes insteed of the others for a cleaner css sheet.
I am looking for a Side Nav with multilevel items. By default zurb foundation 5 does not support sub menus for some reason.
http://jsfiddle.net/pvG7V/1/
<ul class="side-nav">
<li>Link 1
</li>
<li>Link 2
</li>
<li class="divider"></li>
<li>Link 3
</li>
<ul>
<li>Link 1
</li>
<li>Link 2
</li>
</ul>
<li>Link 4
</li>
</ul>
Can this be changed to support submenus with an indicator for sub menu like an down arrow or + sign.
To do that, you have to change the side-nav markup and add some css and js.
New markup (the sub ul must be added ass li child and not ul.side-nav child) :
<ul class="side-nav">
<li>Link 1
<ul> <!-- added ul inside of li -->
<li>Sub Link 1</li>
<li>Sub Link 2</li>
</ul>
</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
JS
$('.side-nav li:has("ul")').children('ul').hide(); //hide submenu
$('.side-nav li:has("ul")').addClass('hasChildren'); // add class to li ul child
$('.side-nav li:has("ul")').click(function(){
$(this).toggleClass( "active" ) // add active class to clicked menu item
$(this).children('ul').slideToggle(); //toggle submenu
});
CSS
.hasChildren:before{
content: "+";
float: left;
}
.hasChildren.active:before{
content: "-";
}
http://codepen.io/mouhammed/pen/vcnCb
I was having this same problem, and came across a new solution.
Foundation now has a generic drop down component so that you can add drop down functionality to any element.
So what I did was create the regular side nav, and then add dropdowns to each item. Dropdowns can be customized to dropdown in directions other than just down, like up, left, and yes even to the right. It is also possible to make it appear on hover.
<ul class='side-nav'>
<li>
Menu Item 1
<ul id="dropdownid1" class="f-dropdown" data-dropdown-content>
<li>
Sub Menu 1-1
Sub Menu 1-2
Sub Menu 1-3
</li>
</ul>
</li>
</ul>
so by setting the data-options in the initial a element to "align:right", it will dropright instead of dropdown. you can also set "is_hover:true" for hover mode
to use both use a semicolon in between.
the data-dropdown value in the a element must match the id of the ul element, and i believe the ul can be placed anywhere else you want, though i like to keep it under the element it is dropping down from.
for more info checkout the foundation docs
http://foundation.zurb.com/docs/components/dropdown.html#
I have a simple html menu that is styled using CSS.
<div id="menu">
<ul>
<li>Home</li>
<li>Growing Up and School</li>
<li>Films</li>
<li>James Bond</li>
<li>Pictures</li>
</ul>
</div>
What I am looking for is a way to show the user what page is currently in use by way of a coloured background on the correct bit of the navigation menu. E.g. when the user is on the career page, the li box would be a different colour to the rest of the menu to show that it is in use.
What you're going to want to do is add a class to whatever menu item is currently active. For example, the HTML markup for index.html would look like this:
<div id="menu">
<ul>
<li class="active">Home</li>
<li>Growing Up and School</li>
<li>Films</li>
<li>James Bond</li>
<li>Pictures</li>
</ul>
</div>
And the markup for career.html would look like this:
<div id="menu">
<ul>
<li>Home</li>
<li>Growing Up and School</li>
<li class="active">Films</li>
<li>James Bond</li>
<li>Pictures</li>
</ul>
</div>
Then style the class accordingly:
.active {
background-color: red;
}
You can do this by adding an'active' class.
When you are on a certain page, you will add the class="active" to your link ( or li element ) . This is how wordpress and many other web application solve this.
Look here : http://jsfiddle.net/Bm9E4/2/
On the active page, add a class of .active to the LI for that page.
<div id="menu">
<ul>
<li class="active">Home</li>
<li>Growing Up and School</li>
<li>Films</li>
<li>James Bond</li>
<li>Pictures</li>
</ul>
</div>
Then do CSS for the background:
#main li.active { background-color:red; }
I am using a WordPress theme called 'Wordpress Foundation v2 by 320press'
I am using the custom menus within the WordPress dashboard, I want to add a class to the 'li' to change the styles of the sub menus:
For Example:
About Us - will have a sub menu of four sublinks, therefore i want to add a class to that submemu called .fourNav which will then set each 'li' a with of 25%.
Then Customers - will have 2 sub links, so i want to add a class called .twoNav to each 'li' which will have a width of 50%.
I also want to add another class on top of these for each 'li' that will have a background image to each 'li'.
The Wordpress menu allows you to add classes and a description which will be displayed in the menu, but when i inspect the element the classes are not getting applied.
However when i add the class manually within the DOM it picks up the CSS and works.
How can i add the menu system to its full ability within this theme?
This is what im doing, but its not adding the class on:
http://thesis-blogs.com/add-a-custom-class-to-each-item-in-the-wordpress-menu/
So what i think i need is a snippet of php to allow the menu system to work with my theme. As when i add in the class in the dashboard my theme doesnt apply it.
This is the code that gets outputting in the html: -
<ul id="menu-main-nav" class="top-nav nav-bar hide-for-small">
<li id="menu-item-5" class="has-flyout active">
Home
<ul class="flyout" style="display: none;">
<li id="menu-item-50">sub menu four</li>
<li id="menu-item-51">sub menu three</li>
<li id="menu-item-52">sub menu two</li>
<li id="menu-item-53">sub menu one</li>
</ul>
</li>
</ul>
you have to edit the template code directly...
i think the menú is in
worpressdir/wp-content/themes/yourthemename/header.php
in order to edit this correctly you will need a medium skills with PHP and html. good luck
Go to Appearance -> Menus -> Screen options - then the following
As far as I understood from your requirements this is how it should work:
1. When you hover over a menu item, it should get a new class name.
2. When you hover over a sub-menu item, both the sub-menu item and the parent element of the corresponding sub-menu item should get a new class name.
If this is what you want checkout this jsfiddle. I have used jquery for this. Check if this helps you.
HTML:
<ul class="menu-bar">
<li class="menu-block">Menu 1</li>
<li class="menu-block">Menu 2
<ul class="sub-menu-block">
<li class="sb-menu-list">Sub Menu</li>
<li class="sb-menu-list">Sub Menu</li>
<li class="sb-menu-list">Sub Menu</li>
</ul>
</li>
<li class="menu-block">Menu 3</li>
<li class="menu-block">Menu 4</li>
<li class="menu-block">Menu 5</li>
</ul>
CSS:
.menu-bar{
background-color:blue;
width:100%;
display:inline-block;
}
.menu-bar > li{
display:inline-block;
position:relative;
}
.sub-menu-block{
display:none;
position:absolute;
top:20px;
padding-left:0;
width:75px;
padding:10px 3px;
background-color:#ccc;
}
.menu-bar > li:hover .sub-menu-block{
display:block;
}
.sub-menu-block li{
list-style: none;
display:block;
padding: 4px 0;
}
.sub-menu-block li:hover{
background-color:red;
}
JQuery
$(function(){
$(".menu-block").on("mouseover",function(){
$(this).addClass('hovered');
});
$(".menu-block").on("mouseout",function(){
$(this).removeClass('hovered');
});
$(".sb-menu-list").on("mouseover",function(){
$(this).addClass('child-hovered');
$(this).parents(".menu-block").addClass('parent-hovered');
});
$(".sb-menu-list").on("mouseout",function(){
$(this).removeClass('child-hovered');
$(this).parents(".menu-block").removeClass('parent-hovered');
});
});
Im having trouble making sure my active graphic is positioned outside of the button, basically the overflow of the parent element keeps the graphic hidden inside of it instead of being outside. I have tried to use position:absolute and z-index but I cant solve this.
HTML
<ul id="mynav">
<li class="active">Link
<ul id="subernav">
<li>Inner Link 1</li>
<li>Inner Link 2</li>
<li>Inner Link 3</li>
</ul>
<span class="active ir">Active Link</span>
</li>
<!-- More links -->
<!--<li>Link</li>-->
<!--<li>Link</li>-->
<!--<li>Link</li>-->
<!--<li>Link</li>-->
</ul>
CSS
body{background:#000;color:#000;font-family:Arial;padding:20px;}
a{text-decoration:none;color:#000;}
#mynav > li{height:45px;background:#fff;width:458px;padding:5px 10px;text-align:center;overflow:hidden;margin-bottom:30px;position:relative}
#mynav > li a{line-height:45px;}
#mynav li.active:hover{height:90px;cursor:pointer}
#mynav li .active{background:#f00 url('http://dummyimage.com/15/f00/fff&text=+') no-repeat -668px -214px;width:15px;height:15px;position:absolute;left:50%;bottom:-15px;margin-left:-7.5px;border:1px solid #f00;z-index:250}
#subernav li{display:inline-block;zoom:1;*display:inline;}
#subernav li a{color:#f00;}
.ir{display:block;text-indent:-999em;overflow:hidden;background-repeat:no-repeat;text-align:left;direction:ltr;}
Link to fiddle:
http://jsfiddle.net/UbvQk/5/
Remove the overflow: hidden and the height from the mynav active (and the :hover).
Set the subernav to display:none;.
Add #mynav li.active:hover #subernav to have display:block;
Updated Fiddle