I have a menu that is basically nothing but a bunch of unordered lists inside of each other. Here is an example:
<div id="horiz-menu" class="moomenu"><div class="wrapper">
<ul class="menutop">
<li><span>Home Page (top menu item)</span>
<ul>
<li><span>Second page (sub menu item)</span>
</li>
</ul>
</li>
<li class="parent active"><span>Resources (top menu item)</span>
<ul>
<li id="current" class="active"><span>Third Page (sub menu item)</span>
</li>
<li><span>Fourth Page (sub menu item)</span>
</li>
</ul>
</li>
</ul>
</div></div>
It is styled to look like the top menu items are the horiz nav menu and the sub menu items are a vertical drop down list (no scrolling) when the top menu item is hovered over; hidden other wise. That all works. My question is what would be the proper way to code css so the sub menu items get highlighted (the background color should change) when the visitor is on that page (not simply hovering over that menu item)?
I have tried this:
#horiz-menu ul li.active {background-color:#000;}
#horiz-menu ul li#current {background-color:#000;}
I don't know if this is the way to do this or not. Can some one help? If your confused I want to be able to use css to color the second ul with an li class="active" or an id="current". The "active" and "current" id and class get applied dynamically to what ever list item the page being viewed is.
Thanks!
Try the addClass Method in the JQuery
$("a.classname").click(function(){
$("li#idname").addClass("active");
});
Using the .active class with background color SHOULD work, however, it depends on what other CSS you have. You have to make sure the specificity of the .active or #current is greater than the default styling (#horiz-menu ul li). Also, be sure to double check that it is the li that has the default background css rather than the anchor inside of it.
Related
In Wordpress i created a menu with sub menus and i want to scroll down so the menus are not going to be so big. so i add
Blockquote
.sub-menu li:hover ul and then overflow-y
Blockquote
But only the first submenu becomes a scrolling on. If i have submenu in a submenu then the first submenu doesn't work..
check what i mean here http://www.intereuropetravel.com
Read your rule from right to left.
.sub-menu li:hover ul
This says "for any ul within an li:hover which is within a .sub-menu - { apply these rules }
I can't tell exactly what you want - but I think your selector is not doing what you intend. - so write out what you want to happen, and think about it from right to left.
The only reason why WordPress is relevant, is that it gives you some default classes for your menu.
<ul class="menu">
<li>List item
<ul class="sub-menu">
<li>Sub menu item
<ul class="sub-menu">
<li>etc
<ul class="sub-menu">
<li>etc</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
So, this is some pretty gnarly nesting and, I'm just going to say - that maybe you should rethink this approach, but otherwise - I suggest you build out more specific selectors for each level and control them independently. In WordPress admin under menu - you can reveal a field that will allow you to give unique classes to each of these levels with which you can target more easily.
in your case, you can probably put
.menu-main-menu-container li:hover ul {} -
which would be --- "any list inside of any li in your container {}"
maybe even:
.menu-main-menu-container li:hover > ul {}
which would be --- "any list directly inside of any li in your container {}"
I am using twitter bootstrap 2.3, I need the menu to be aligned to the right and also need the anchor to have a diferent widt, depending on the size of the world inside the anchor.
With next code, it's working, I leave empty columns with offset class, but not sure it there is a better to achieve the same result with another technique.
What I don't know how to do it is get the same "empty space separation" between each li, each li having a different width.
<div class="row_fluid">
<ul class="menu_logged span7 offset5">
<li class="span1 offset6"><a>Test</a></li>
<li class="span1"><a>Medium phrase</a></li>
<li class="span1">123</li>
<li class="span1">Hello World</li>
<li class="span2">Back</li>
</ul>
</div>
Any help?
Thank you
I have a vertical menu that needs some sub-menus. I can accomplish a decent-looking one just by putting a ul tag inside the link I want to expand and absolute-positioning it on hover, with display:none when it's inactive. But I'd like to make it slide out, and I haven't had any luck doing so. I have this basic markup:
<aside>
<ul>
<li>Link Text</li>
<li class="more">
Base
<ul>
<li></li>
</ul>
</li>
</aisde>
The aside tag is itself a secondary navigation menu, the main one is in my header. It is position:fixed for easy access while scrolling.
The ul tag inside of <li class="more"> is absolutely positioned, anchored to -1px on the top and width:154px, and on hover it becomes display:block; left:154px (of course, it is display:none when inactive). I have tried transitioning the left property, but it does not change anything, it acts as if my transition weren't even there.
I need a way to hide a parent <li> but keep the child <ul> visible.
So for example I have the following code:
<li class="toplevel">Link
<ul>
<li class="secondlevel">Link</li>
</ul>
<li>
Basically, I want the class toplevel to be hidden but the class secondlevel to be visible. Now I know I can do this with the css:
visibility:hidden / visibility:visible
But that keeps the height and width of the hidden class. What I need to use is more like:
display:none / display:inline
But of course, this doesn't work as the child isn't show and there isn't a way to make it re-show it appears.
Is there another method apart from using visibility to hide the parent but keep the child so that there is no height/width kept for the hidden parent?
Thanks.
It is impossible to hide parent and display it's children.
You can place toplevel Link which you want to hide into some inline tag:
<li class="toplevel"><span>Link</span>
<ul>
<li class="secondlevel">Link</li>
</ul>
</li>
And then, set display:none for this tag:
li > span { display: none }
I am unable to get :hover to function on my footer links. Does this have to do with z-index?
Thank you!
URL: http://bonusest.com/clients/republican_committee/
The problem is that your main div with id page-wrap is ontop (overlapping) of your footer so the links in the footer cannot be clicked.
Seems the .links and .contact divs don't contain any actual links - you need to wrap them in anchor tags like in your main navigation.
As for the .social div, this should work:
<h4>Find Us</h4>
<ul>
<li id="facebook">facebook</li>
<li id="twitter">twitter</li>
<li id="picassa">picassa</li>
</ul>
You'll want to keep the text-indent:-9999px to hide the text. To add a hover state, simply target #facebook:hover