I am using Superfish to show a horizontal menu on a website. Whenever I am on a page that is either the current menu item or sub-menu item, the sub-menu always show. When this happens, it overlaps other sub-menus when you hover the mouse over them. How do you hide the current sub-menu being shown?
edit:
OK I figured out how to do this with CSS. I added the following code to superfish-navbar.css
ul.sf-navbar ul {
display: none;
}
ul.sf-navbar li:hover ul {
display: block;
}
It hides the current sub-menu and shows all sub-menus when you hover over the parent item.
For CSS
In superfish-navbar.css you would remove the following rule at line 63.
ul.sf-navbar .current ul, ul.sf-navbar ul li:hover ul, ul.sf-navbar ul li.sfHover ul {
left: 0;
top: 2.5em;
}
When You End Up Using Javascript
In the documentation for the superfish plugin, on the Options tab, it shows the default options. It looks like pathLevels is set to 1, and the description of pathLevels
the number of levels of submenus that remain open or are restored
using pathClass
looks like the option you need. Try setting pathLevels to 0.
See this jsfiddle for comparison: http://jsfiddle.net/keithwyland/G87Lm/
http://users.tpg.com.au/j_birch/plugins/superfish/#options
Related
I am working on a site that that is supposed to display sub-menus when you hover over both the "References" and the "Contact Us" items in the main nav. However, these items will not display.
I have tried adding hover properties via CSS to the menu & sub-menu items but nothing seems to work. It seems to always default to the "display: none;" for the sub-menu.
Here is the URL for the site: http://fongconstruction.com
I'm not sure where to go from here, if there is a CSS fix that maybe I'm missing then any guidance would be helpful! Thanks in advance!
First you need to delete below css from custom.cs(line number 1) and style.css(line number 844) https://prnt.sc/15pru62
#nav .sub-menu {
display: block !important;
}
Also you need to delete inline style(display: none) from sub menu https://prnt.sc/15ps03v
After that add this css
#nav li ul.sub-menu {
display: none;
}
#nav li:hover ul.sub-menu {
display: block;
}
I was able to locate a solution by using a different selector that I had not thought of before:
#menu-item-5990 a:hover + .sub-menu,
#menu-item-5237 a:hover + .sub-menu {
display: block;
}
Once I click on the title of the menu a, the bottom tab is displayed #sub_backbone or #sub_backbone_center #sub_backbone_end depending on the location of the button:
Here's the code:
/*After hover link show me the menu*/
div#menu ul li a:hover + #sub_backbone,
div#menu ul li a:hover + #sub_backbone_center,
div#menu ul li a:hover + #sub_backbone_end{
opacity: 1;
}
But after I am bringing mouse on the tab #sub_backbone ... it disappears but should not disappear, there will be an additional menu.
Ie when selecting a title, the tab should not disappear when I drive my mouse over it.
How can solve this situation?
It disappears because you are moving away from the a link, which causes the styles to revert back to their defaults (I presume that the default style of #sub_backbone and others is opacity: 0).
The logic is simple: add an additional :hover style to #sub_backbone and others like this:
#sub_backbone:hover {
opacity: 1
}
Remember that this will only work if there is no distance between the a and #sub_backbone elements.
Edit: here's a jsfiddle with an example: click here. I've replaced the opacity: 1 with display: block
I have a bunch of images named after my pages in wordpress. Example:
page name : heart-health
image name : heart-health.png
My main menu has 1 sub-menu level and for each page name in a sub-level I would like to display the image as a background image set to the left. I have tried so many different ways but had no luck.
I know you can add custom text to the menu in the admin but I wish for it all to be done automatically.
I have found the start and end for sub level menu items in "nav-menu-template.php" & "class-wp-walker.php"
At the moment I just have the same picture showing on all sub menu items when you rollover but that is just using CSS.
.menu ul ul :hover > a{color:#000000;background-color: #eeeeee; background-image:url(images/menu-images/fruit.png); background-repeat:no-repeat;}
Any help or advice would be much appreciated.
The best way to do it is via CSS.
For example
.menu ul ul .custom-class a { ... }
.menu ul ul .custom-class:hover a { ... }
You can set custom classes for each menu item in the WordPress menu management, just make sure the "CSS Classes" checkbox in "Screen Option" (top right of page) is checked.
Also, to make things easier, I would suggest making an image sprite of all the images you'll be using in the menu so that your CSS code is much simpler.
.menu ul ul a {
background:url('/url-to-sprite.png') no-repeat 0px 0px;
}
.menu ul ul :hover a {
background-position:-20px 0px;
}
.menu ul ul .custom-class a {
background-position:0px -20px;
}
.menu ul ul .custom-class:hover a {
background-position:-20px -20px;
}
Hi I am having a very strange experiencing with list item navigation menu.
On the main parent li I have a background color, but when I drop down in to the li ul li I want the background color to be removed, which on all browsers except IE9/8/7 works fine.
My Basic code is:
.topnav li {
background:#c60;
}
.topnav li ul li {
background:none;
}
in IE is still displays the background color, i have tried everything I can think of.
the website is link is
The lis have a gradient filter applied to them in Internet Explorer - you'll need to set this to none (or equivalent) to remove the background.
E.g.
.topnav li ul li { filter: none; }
I have a drop down menu made in css. When you hover over the text (ul) the menu appears (the li appears). I wanted to know, how to make a submenu, that when you hover over the li's another menu (submenu) would appear and would offer other options.
Ex:
-Tutorials (You hover over tutorials)
(Then these options appear)
-Video tutorials
-Other tutorials
-Windows (and if you hover over windows you have 3 choices)
//How do I make that!
-Windows xp
-windows 7
-Windows Vista
That is what I want to make.
Thanks people!!
you need this tutorial: son of suckerfish dropdowns
If you're using pure CSS then you just need to add a new level of styles. You haven't posted your original code, but assuming you currently have something like:
ul.menu > li > ul {
display: none;
}
ul.menu > li:hover > ul {
display: block;
}
Then you'd simply need to add:
ul.menu > li > ul > li > ul {
display: none;
}
ul.menu > li > ul > li:hover > ul {
display: block;
}
You will of course need to add some positioning code to your third level list so it appears to the right of the active menu item.
CSSPlay is a great resource with all kinds of menu's you can possibly imagine. Plus all menu's are completely cross-browser.
Check it out, I'm sure Stu got one that fits your needs:
http://www.cssplay.co.uk/menus/