Is it possible to remove an "active"-class from the menu items when hovering another menu item?
There's a working fiddle here. By default the home button has the "active"-class, whenever hovering over an other menu item i'd like to have that "active"-class removed. In this manner, only 1 menu item has the menu overlay ontop of it. Is this easy achievable by using CSS? Or do I need some fancy JavaScript?
The following piece of code will place the button overlay ontop of my menu items:
#menu li a.active,
#menu li a:hover{
text-decoration: none;
background: url('../images/menu_button_overlay.png');
background-repeat: no-repeat;
background-position: center top;
background-size: 30px 10px;
}
Thanks!
It would be possible with CSS.
#menu:hover .active {
background: none;
}
fiddle
You need to use Fancy Javascript. But even then, I doubt, it won't work because After you remove the active class from home any other menu item will have the overlay only till you hover it or click on it. If you do not click on any other menu item then in the end there won't be any overlay for any menu item.
You would need javascript (or more likely Jquery)
JQuery
$("li a").click(function () {
$(this).toggleClass("active");
$("li a").not(this).removeClass("active");
});
JSFiddle Demo
Related
I'm using generate press and add some megamenu CSS unfortunately upon clicking the submenu it's not clickable here is the link
I tried to use this mega menu to create columns for each sub-menus
https://hrcstaging.wpengine.com/
here is the CSS that I added
https://docs.generatepress.com/article/building-simple-mega-menu/
.main-navigation ul ul {
pointer-events: inherit;
}
ok this works fine now
I have created a dropdown menu and now want a background that drops down along with it. Here is some of my code:
HTML:
<div id="background"></div>
CSS:
div#background{
height: 150px;
background-color: white;
display: none; }
ul#navmenu li:hover div#background
{
display: block;
}
(I know there is something wrong with this code, this is what I picked up so far from the Internet...)
li are the list items that comprise my menu.
In the HTML code, the "background" divider is inside and at the end of another divider which contains the dropdown menu:
<div id="menu">
<ul id="navmenu"></ul>
<div id="background"></div>
</div>
ul is my unordered list which contains the menu.
What I want is to have the menu drop down along with the background. The background should also cover (be on top) of the text that comes immediately after the menu. (The menu drops onto the text).
I would have loved to post a picture to make it a little clearer but I don't have enough reputation points yet... sorry :S
If possible I'd like to do it only using css, but I'm also open for other solutions. Any ideas?
Your css is for a child of the li
This html code for your CSS
<div id="menu">
<ul id="navmenu"><li><div id="background"></div></li></ul>
</div>
The background of your HTML is the sibling of navmenu.
This CSS code for your HTML to show background when hovering over navmenu.
<style>
div#background{
height: 150px;
background-color: white;
display: none; }
ul#navmenu:hover +div#background
{
display: block;
}
</style>
If you want to do that from the LI you would need a parent's, sibling selector. I don't have one and would like one but jQuery could do the trick.
Adjacent Sibling (+) combinator is available in Internet Explore 7 plus and is CSS 2.1 standard.
Assuming you want the background someplace other than inside the li block, position:relative it to the area you want it to appear.
How do I go about keeping the menu item at the top (eg. file) remain highlighted while I am browsing though menu options in the sub menu?
Here's a paste bin: http://pastebin.com/aGJh8nQa
Why, with this selector, of course!
#menu li:hover > a {
background-color: rgb(216,216,216);
}
View it on JSFiddle
I am using WordPress twentyeleven theme and developing my custom theme. The live demo of the site can be seen here. In that site you can see there are two types of menus. On the left and another one in the right side. In the right side menu you can see there is a drop-down menu.Here when you will hover on the parent menu drop down box will come but there is one problem with this. When you will hover on the parent menu the drop-down menu can be seen but with the arrow on the right side. So here I want there should be no arrow images on the sub menus when I will make hover on the parent menu. Can someone tell me how to do this?
I am really stocked with this point.
Define your child a span background-image:none;
Add this css
#access #header-right-menu ul li:hover ul a span {
background-image: none;
}
I think you should add !important after background-image: none;
#access #header-right-menu ul ul li a span {
background-image: none !important;
}
Our designer created a navigation that visually looks like this:
Navigation Bar
The HTML structure of which is:
<ul>
<li class="first">Home</li>
<li>Schools</li>
<li>Scores</li>
<li>Sports</li>
<li>Blogs</li>
<li>Podcasts</li>
<li class="last">Forums</li>
</ul>
I can't figure out if there's a way to make this so that when I mouse-over, let's say 'Sports', that both the left and right arrow image would change colors to the darker red. Is there a way to do this?
This is my CSS so far, but it only changes the arrow right of the link:
#mainNav ul li{
float: left;
background-color: #ed1c24;
padding: 7px;
padding-right: 21px;
background-image: url('/images/red_arrow.png');
background-repeat: no-repeat;
background-position: right;
}
#mainNav ul li.first{
padding-left: 14px;
}
#mainNav ul li a{
text-decoration: none;
color: #FFF;
}
#mainNav ul li:hover{
background-color: #d5171f;
background-image: url('/images/red_arrow2.gif');
}
You'll want something like this: http://jsfiddle.net/2xXQC/
Notice specifically the negative margin-left on each list item that causes them to overlap. The image you will need is something like this:
_____
\ \
/____/
Note to self: Seriously brush up on ASCII art skillz
Except the first. Do note however which anchor gets selected when the cursor hovers. HTML elements are always rectangular, so there's no way you can get the hit area to form the shape of the arrow.
Just make the hover image have both arrows in one image, then position it so it covers both arrows.
I'd be willing to bet that the background image for each list item only has a right arrow.
Using Css, you're only affecting the background image that you're actually hovering over.
If you use javascript (or jquery) for this (onHover), you'll have access to an onHover "event", within which you'll be able to affect anything else on the page, not just the image you're hovering over. In that case, you'll be wanting to swap the image you're hovering over, as well as the one to the left of it.
If your red_arrow.png and red_arrow2.gif have both arrows you may be able to mess around with z-index, but it's going to require a lot tweaking to get everything lined up properly.
You are probably better of using a css sprite and fine tuning the hover position in css.
Check link text for some good tutorials and ideas.
You don't have to use javascript. CSS Sprites get the job done for mouseovers. Here is a good article:
http://www.dave-woods.co.uk/index.php/mouseover-images-using-css-sprites/
Here is that technique in action:
http://www.rackspace.com/apps
EDIT: I see the problem. You need to do BOTH arrows. But you can still do this with CSS, just increase the z-index for the hover states (You'll need to have your sprite include both the left and right arrows):
a:hover {
background-position: 0 40px;
z-index: 10;
}