when my primary menu is like item menu1/submenu1.2, de li gets the class active, so i can style it, for example in a different color.
however, if i go to page menu1/submenu1.2/153 then the active class is missing.
Or anything like menu1/submenu1.2/* is the active class missing.
How can I solve this?
In your example of menu1/submenu1.2/153 the active class should have moved to 153. You can still style submenu1.2 differently by looking for the active-trail class on the <li>
For example, if you go to admin/content/comment the menu's html should look similar like this:
<ul class="menu">
<li class="expanded active-trail">
Administer
<ul class="menu">
<li class="expanded first active-trail">
<a title="Manage your site's content." href="/drupalsite/?q=admin/content">Content management</a>
<ul class="menu">
<li class="leaf first active-trail">
<a class="active" title="List and edit site comments and the comment moderation queue." href="/drupalsite/?q=admin/content/comment">Comments</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
That means you can style the admin and content links by using CSS something like the following:
li.active-trail a {
/*Whatever style here*/
}
Related
As mentioned in the title, for some reason, particular menu items that have active class do not have active-trail class and so do their parents.
Example menu tree when I am currently at page Test2:
<ul class="menu">
<li class="first expanded">
Test
<ul class="menu">
<li class="first expanded">
Test2
</li>
</ul>
</li>
</ul>
This is how should it be when I am currently at page Test2:
<ul class="menu">
<li class="first expanded active-trail">
Test
<ul class="menu">
<li class="first expanded active-trail">
Test2
</li>
</ul>
</li>
</ul>
Any help is appreciated.
It's more likely that your theme (or a module) is overriding the output using one of these hooks and changing the classes:
theme_menu_link
theme_menu_tree
template_preprocess_menu_tree
I'd recommend starting with checking out the active theme's code.
Or you can just implement theme_menu_link() in your theme and override the classes to your liking.
I want to the class dropdown invisible. dropdown will be used only for specific li tags. I tried this, but it doesn't work:
.dropdown{
display:none;
}
Is there a way to make this work? Am I doing something wrong in my CSS?
HTML:
<div id="MainNavigation" class="nContainer" name="MainNav" value="MainNavigation">
<ul class="nav navbar-nav">
<li class="dropdown">
page
<ul class="dropdown-menu">
<li>page1 </li>
<li>page2 </li>
<li>page3 </li>
<li>page4 </li>
<li>page5 </li>
</ul>
</li>
<a id="Homepage" class="navbar-brand" href="somepage.com">
<img src="/images/aGif.gif?v=24820" alt="someotherpage.com" border="0">
</a>
</ul>
</div>
My best guess is that it is a specificity issue. That is, .dropdown selector is not detailed enough to override other selectors that come with Bootstrap. Make the selector more specific (i.e., #MainNavigation.nContainer[name = "MainNav"] > .nav.navbar-nav > .dropdown) and see if it works.
I'm trying show the description of parent menu in submenu.
I have something like that
<nav>
<ul nav-menu>
<li><a>item 1</a></li>
<li><a>item 2</a>
<div class="dropdown">
<span> $DESCRITPION_OF_ITEM_2</span>
<ul sub-menu>
<li>..</li>
<li>..</li>
<ul>
</div>
</ul>
</nav>
I need showing this variable "$DESCRITPION_OF_ITEM_2" which showing the description from menu editor in wordpress, is it possible ?
And second question, do you know good plugins or something for adding image to menu ?
Thank;s for response
I think this might be what you are looking for.
I'm using the dropdown from
http://www.lwis.net/free-css-drop-down-menu/
My menu has Home|About|Register|Login
I would like the menu to look like
Home|About|Register|Login<-----------------stretch till end ----------------->
What i'm doing now is create an extra li and add " " to it. The code is as below
<div id="mymenu">
<ul class="dropdown dropdown-horizontal">
<li class="first">Home</li>
<li>About</li>
<li>Register</li>
<li>Login</li>
<li class="last"><span> </span></li>
</ul>
</div>
Is there a better way to do this?
Also how do i highlight choosen menu item like for example if i click home the menu home should be highlighted.
I was having some rendering issues with the old-style menu control getting Chrome to look correct, so I decided to switch and use the CSS Friendly Adapters (http://cssfriendly.codeplex.com/) to get my menu control to render as a list and hopefully have some more cross-browser consistency, well that hasn't worked either!
So I have styled my menus and they now work great with Chrome, Safari and Firefox, but not IE I have a basic horizontal list loaded from a datasource, with 1-13 items in the dynamic lists attached to them. In Chrome and Firefox now, after the menu is styled the dynamic menu items are appearing properly below the static menu items. But in IE(7/8) the dynamic menu items are appearing directly to the right of the currently hovered over static menu item (and with the first dynamic item behind the static menu item to the right of the current one)
Here is a screenshot of the menu working properly in Chrome:
http://i42.tinypic.com/2d3lom.png
And a screenshot of the same menu being hovered over in IE (in this case 8, but it looks the same in 7):
http://i39.tinypic.com/2vmc4kn.png
Here is the rendered HTML for the menu:
<div class="AspNet-Menu-Horizontal" id="ctl00_navMenu">
<ul class="AspNet-Menu">
<li class="AspNet-Menu-WithChildren AspNet-Menu-Selected">
Home
<ul>
<li class="AspNet-Menu-Leaf AspNet-Menu-ParentSelected">
Home
</li>
</ul>
</li>
<li class="AspNet-Menu-WithChildren">
<a href="javascript:void(0);" class="AspNet-Menu-Link">
Financial Systems</a>
<ul>
<li class="AspNet-Menu-Leaf">
Input Sales
</li>
<li class="AspNet-Menu-Leaf">
Upload Sales
</li>
</ul>
</li>
<li class="AspNet-Menu-WithChildren">
Reports
<ul>
<li class="AspNet-Menu-Leaf">
Prior
</li>
<li class="AspNet-Menu-Leaf">
Summary
</li>
<li class="AspNet-Menu-Leaf">
Monthly
</li>
</ul>
</li>
<li class="AspNet-Menu-WithChildren">
Administration
<ul>
<li class="AspNet-Menu-Leaf">
Shop Tracker
</li>
<li class="AspNet-Menu-Leaf">
Shop Upload
</li>
<li class="AspNet-Menu-Leaf">
Weekly Comp Metrics
</li>
<li class="AspNet-Menu-Leaf">
Weekly Comp Upload
</li>
<li class="AspNet-Menu-Leaf">
Estimate Maintenance
</li>
<li class="AspNet-Menu-Leaf">
User Maintenance
</li>
<li class="AspNet-Menu-Leaf">
Corporate Users
</li>
<li class="AspNet-Menu-Leaf">
Country ISO Code Maint
</li>
<li class="AspNet-Menu-Leaf">
Territory Rollup Maint
</li>
<li class="AspNet-Menu-Leaf">
Content Maintenance
</li>
<li class="AspNet-Menu-Leaf">
Edit System Message
</li>
<li class="AspNet-Menu-Leaf">
Menu Maintenance
</li>
<li class="AspNet-Menu-Leaf">
Change Password
</li>
</ul>
</li>
<li class="AspNet-Menu-WithChildren">
Help
<ul>
<li class="AspNet-Menu-Leaf">
<a href="help.aspx" class="AspNet-Menu-Link">
Help Menu</a>
</li>
</ul>
</li>
</ul>
</div>
And here is my CSS (same for IE and Chrome, but in the Chrome stylesheet I just add a gradient below this):
.AspNet-Menu li {color:#000000;line-height:20px;border:none;font-size:11px;font-weight:bold;}
.AspNet-Menu-WithChildren {width:150px;text-align:center;color:#FFFFFF;background:#940000;}
.AspNet-Menu-Selected {color:#000000;}
.AspNet-Menu-WithChildren a {color:#FFFFFF;}
.AspNet-Menu-Selected a {color:#000000;background:#FFCB0B;}
.AspNet-Menu-Leaf {background:#F0F0F0;width:150px;}
.AspNet-Menu-Leaf a {color:#000000;}
.AspNet-Menu-Leaf :hover, .AspNet-Menu-Leaf a :hover {background:#666666;color:#FFFFFF;}
Maybe try adding:
CSS
ul .AspNet-Menu-WithChildren ul {top:100%; float:none;}
I'm thinking that might force IE to put it where you need it to be. Not 100% sure, and wasn't able to try it on my local machine.