How could I have the tab to be on hover mode while I rollover the drop down sub-menu.
Does it require javascript or it could be done solely on CSS?
<li id="anchor" class="title dropdown">Main Tab
<div class="column">
<ul>
<li class="subtitle">Button 1</li>
<li class="subtitle">Button 2</li>
<li class="subtitle">Button 3</li>
</div>
</li>
As matpol suggested, you can use css to do it, and use the css hover fix to sort it in IE.
As a side note, you don't need that div in there, everything you need to do style wise can be done by styling the nested li element (you also need to close the second ul too). I'm guessing its just a quickly done code snippet anyway, but I thought I'd bring it up :)
Update;
Tbh howver mega the dropdown is, you shouldn't need divs in that level (you can put them in the <li>'s if you need to).
Something like this...
<li id="anchor" class="title dropdown">Main Tab
<ul class="column">
<li class="subtitle">Button 1</li>
<li class="subtitle">Button 2</li>
<li class="subtitle">Button 3</li>
</ul>
</li>
/* styles */
li#anchor:hover {
/* Styles for tab hover state, will be in effect when you're hovering over any child ul/li elements */
}
li#anchor ul.column {
display: none;
/* Styles for this ul, float, position etc */
}
li#anchor:hover ul.column {
display: block;
}
Its untested, but I've done more of these than I'd care to remember :P
you can do it with CSS but need JS for older crappier browsers(ie6) e.g.
li .column{
display: none;
}
li:hover .column{
display: block
}
IE6 only supports hover on anchor tags hence the need for JS.
Related
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');
});
});
I am trying to get my first menu to work. I got the basics off of CSS Menu without javascript . I am trying to make it as simple as possible. I got to look close to what I want it to look (Not exactly what I REALLY want it to look like):
http://jsfiddle.net/EjXgU/2/
The main problem is submenus. They stack one below the other instead to the right of the parent menu. Also, the first level of submenus do not stack right below the line on the main menu, but within it.
Another problem I was able to notice, I want to add an rgba background-color (transparency). However, for every submenu level, the transparency changes.
I also accept any css3 tips to make it look "flashy" and fancy =)
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title: css-menu-without-javascript</title>
</head>
<body>
<nav>
<ul id="menu">
<li>Home</li>
<li>With sub-menus -->
<ul class="submenu">
<li>Submenu 1</li>
<li>Submenu 2 -->
<ul class="submenu">
<li>Sub-submenu 1</li>
<li>Sub-submenu 2</li>
</ul>
</li>
</ul>
</li>
<li>Menu item 3</li>
<li>With sub-menus -->
<ul class="submenu">
<li>Submenu 3</li>
<li>Submenu 4 -->
<ul class="submenu">
<li>Sub-submenu 3</li>
<li>Sub-submenu 4 -->
<ul class="submenu">
<li>Sub-sub-submenu 1</li>
<li>Sub-sub-submenu 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Menu item 3</li>
</ul>
</nav>
</body>
</html>
CSS:
/*https://stackoverflow.com/questions/4873604/css-menu-without-javascript*/
#menu li>ul { display: none; }
#menu li:hover>ul { display: block; }
/*End of Nathan MacInnes' code*/
nav { position: relative; }
#menu> li { float: left; padding:10px; border: 1px ridge #cccccc;}
#menu a {
text-decoration:none;
font-size: 20px;
color:#191919;
padding:10px;
}
.submenu { background-color: rgba( 0,0,0,0.5 ); }
If you're wanting CSS-only drop-down menus, then check out Son of Suckerfish. It's pretty much the de facto way of achieving such.
There is a bit on using JavaScript to get around earlier version of Internet Explorer's lack of support for pseudo elements, but I think this is IE7 and below, so can probably be dropped, depending on what level of support you're wanting to have for older browsers such as IE < 7. Other browsers (Firefox, Chrome, Safari, Opera etc) will display the menu and function just fine with the CSS only.
You could try
.submenu { background-color: rgba( 0,0,0,0.25 );
margin-left: 25px;}
The transparency value is additive — a submenu within a submenu gets that added twice, so a second submenu will be less transparent. Starting with a lower value allows that to be useful.
Adding the margin displaces the text to the right, and I rather like the way each submenu "embraces" its own children.
http://jsfiddle.net/EjXgU/3/
I want to create a CSS navigation with submenus that appear when the heading tab is clicked. Here's example HTML of how I'd like to see it work:
<ul id="menu">
<li id="nav-1">Home</li>
<li id="nav-2">Menu 1
<ul id="subnav-2">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li id="nav-3">Menu 2
<ul id="subnav-3">
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
</ul>
</li>
<li id="nav-4">Other tab without submenu
</li>
</ul>
I can't seem to find anything online to make this work. Any ideas?
If you don't mind using libraries I would recommend using bootstrap. It makes really easy creating menus with drop-down submenus and it comes with a default style that is quite neat. You should have a look at this:
http://twitter.github.com/bootstrap/javascript.html#dropdowns
If you need to do it on click, you'll need javascript. If you're ok with doing it on hover, you can do this:
#menu ul{
dispaly: none;
}
#menu > li:hover ul{
display: block;
}
Caveats: this will only work in IE7+. You'll also still need to position the dropdowns appropriately (absolute positioning, most likely).
Edit: Whoops! You said "click", not "hover". Sorry. I'll just leave this here in case it helps someone else.
I have an example of four techniques for pure CSS hierarchical menus from semantic markup here:
http://phrogz.net/JS/ul2menu/purecss_testsuite.html
Here's an example of a single technique:
http://jsfiddle.net/FX4Dz/1/
<nav><ul>
<li>Header 1<ul>
<li class="sub">Subhead 1.1<ul>
<li>Subhead 1.1.1</li>
<li>Subhead 1.1.2</li>
</ul></li>
<li>Subhead 1.2</li>
<li>Subhead 1.3</li>
</ul></li>
<li>Header 2<ul>
<li>Subhead 2.1</li>
<li class="sub">Subhead 2.2<ul>
<li>Subhead 2.2.1</li>
</ul></li>
</ul></li>
</ul></nav>
nav li {
display:inline-block;
padding:0 0.4em;
height:1.4em; line-height:1.4em;
position:relative;
}
nav li ul { display:none }
nav li li { display:block; width:8em }
nav li:hover > ul {
display:block;
position:absolute;
top:1.4em; left:-1px; /* align with respect to horizontal row */
width:8em; z-index:2
}
nav li li:hover ul {
left:8em; top:-1px /* subnav menus align next to their menu item */
}
The Swimbi app generates rather clean CSS code of drop down menu. You can use the app or just copy the CSS from the demo page http://f-source.com/swimbi/demo/?menu=Apple_Blue%20Sea
http://css3menu.com/
Download this and make yourself one, then go through the code, edit, and learn
Consider my html as follows:
<ul id="menu">
<li class="highlighted" id="first_item">Home</li>
<li class="non_selected_tabs">Join</li>
<li class="non_selected_tabs">Fixtures</li>
<li class="non_selected_tabs">Our Club</li>
<li class="non_selected_tabs">History</li>
<li id="hover" class="non_selected_tabs">Club Gear</li>
</li>
</ul>
My lists are styled as tabs, and I have my anchors as their parents so that when a user hovers over a tab it becomes selectable
My issue is that I was hoping to use a:hover, or the other anchor properties to change the background colour of my list item...is this possible using CSS?
I can't get it to work so I'm thinking I may have to use some JavsScript?
Wrapping the <li>'s in <a> is improper HTML and may not render properly in all browsers. A better solution would be to set the display property of the anchor to display:inline-block. Then you will be able to set the width and height of the anchor to the width and height of the li's. This way you can also use the hover property of the anchors.
<ul id="menu">
<li class="highlighted" id="first_item">Home</li>
<li class="non_selected_tabs">Join</li>
<li class="non_selected_tabs">Fixtures</li>
<li class="non_selected_tabs">Our Club</li>
<li class="non_selected_tabs">History</li>
<li id="hover" class="non_selected_tabs">Club Gear</li>
</ul>
#menu li a
{
display: inline-block;
width: 100%;
height: 100%;
}
#menu li a:hover
{
background-color:red;
}
The direct children of a ul element should only ever be list items elements, not an a.
You could either use :hover on the li element it's self, this works in browsers that aren't IE, maybe even IE8 and up..
Or you could style the a to take up the entire space area of the li, and style the li to be inline, so not to display as a typical list.
You can use :hover on other elements, not just anchors.
Can anybody give a reference or is it possible to create a menu entirely depending on
CSS and not a single bit of javascript?
The Requirement is a dropdown menu, which can have many children ( submenu ).
Will anything if created like this will be cross browser compatible?
Any help on this topic will be appreciated!.
EDIT
Thanks for all your inputs one more doubt
Can this be implemented rather than using ul li
say div span combination as that may help me achieving a menu which won't change my current html structure!
The trick is the :hover pseudo-class.
<ul class="menu">
<li>
Menu Item 1
<ul class="submenu">
<li>Submenu 1</li>
<li>Submenu 2</li>
</ul>
</li>
<li>
Menu Item 2
<ul class="submenu">
<li>Submenu 3</li>
<li>Submenu 4</li>
</ul>
</li>
</ul>
Ok? So your entire submenu has to go inside the <li> of the main menu item it corresponds to. Then for the CSS:
.submenu { display: none; }
.menu>li:hover>.submenu { display: block; }
Do a bit of styling, and job done.
Edit: For another layer of menus, it's really simple. Use this CSS:
.menu li>ul { display: none; }
.menu li:hover>ul { display: block; }
Note that I've replaced .menu>li:hover with .menu li:hover. That tells the browser to find all li elements below the main menu (not just immediate descendants) and show their submenu when hovering. I've also got rid of using the submenu class because it's not really needed if you're basing the CSS on descendants. This will let you add as many levels as you want.
Check this site : http://www.cssplay.co.uk/menus/ which have a lot of different menus with CSS only. A reference.
Check this out: http://www.cssplay.co.uk/menus/final_drop.html
See if this helps http://www.howtocreate.co.uk/tutorials/testMenu.html
http://www.texaswebdevelopers.com/blog/template_permalink.asp?id=129
It is certainly possible to do drop-down menus in CSS only, and many sites are now using it.
What you won't get (yet) with CSS are any animated roll-outs, etc - the menu will just toggle between visible and hidden. If you want animated roll-outs, jQuery may be a better option. That said, CSS animation does exist. It is only implemented in one or two browsers, but you could add it to your stylesheet anyway; it won't break browsers that don't support it; they just won't get the animation.
Cross-browser compatibility for CSS menus is relatively easy, as long as you ignore IE6. IE7/8 can be made to work without too much fuss, but IE6 is badly broken for virtually all CSS-only menu techniques. If at all possible, try to avoid having to support IE6. Its an old browser, and really needs to be left to die in peace.
Others have already provided links to some good examples, so I won't repeat them here.
I have just finished developing a CSS Menu for mobile devices, using absolutely ZERO Javascript. Basically, by applying the tabindex="-1" attribute to anything you want, you allow that element to react to the :focus CSS property without actually being part of the tab order (so you can't reach that element by tabbing through). Applying this to the currently accepted solution:
<ul class="menu">
<li tabindex="-1">
Menu Item 1
<ul class="submenu">
<li>Submenu 1</li>
<li>Submenu 2</li>
</ul>
</li>
<li tabindex="-1">
Menu Item 2
<ul class="submenu">
<li>Submenu 3</li>
<li>Submenu 4</li>
</ul>
</li>
</ul>
I removed the <a> tags (because now our drop-menus are CLICKABLE, we insert the tabindex on whatever we want to click on and the CSS gets changed to this:
.menu > li:not(:focus) > .submenu { display: none; }
Check out this Codepen for my Mobile Menu:
NO javascript
Responsive
Stylable
HTML Hamburger menu symbol!