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.
Related
I'm trying to render a page with pug that displays either a welcome message or login/signup links. The message/links reside within a bootstrap navbar. My code is like the following:
.script
if user
document.getElementById('portal').innerHTML
<li class="nav-item">
<a class="nav-link" href="/account">Welcome! #{user.username}</a>
</li>
else
document.getElementById('portal').innerHTML
<li class="nav-item">
<a class="nav-link" href="/login">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/signup">Signup</a>
</li>
which causes the navbar's styling to break. The nav-items are originally supposed to be side by side.
Resolved, I wasn't paying attention to the finalized html structure, turns out a nested class is stopping the style from cascading as expected.
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.
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
I'm re-designing our administration menu (its currently vertical and LONG/CONFUSING) so I wanted to do a condensed horizontal one instead. I've been fiddling with this for a week now and I'm about to rip my hair out.
Here is a version you can see:
Horizontal Menu with 3 submenus
My CSS can be viewed here:
CSS File
Just a few quirks and I can't figure out how to fix them. I'll list them here separately:
Level 1 (the main buttons) are fine
Level 2 (Tina) looks fine
Level 3 (Tina/Inventory), the 3rd level options are BEHIND the level 2 ones. How do I get those in front of the level 2 stuff ? Ideally, I'd like level 3 to have the background color of #E4F683 and a hover color of #F6ED83 (for the Adjust On Hand, Component Report, Manage OOS)
Level 4 (Customers/Orders/Handpost), the level 4 stuff shows up when you hover over level 2... at that point level 3 should show, but level 4 should be hidden until you hover; same problem as above in that level 4 is behind level 3. Ideally, I'd like the background color of #E0F574 and a hover color of #AEC245 (Transaction, Shipping, Credit)
I really wouldn't mind if the level 3/4 weren't over level 2, but just lined up with them - this would fix the "behind/front" issue, but I can't seem to figure how what to change to make it work that way
I'd also like levels 2/3/4 to not be quite so high (there's quite a few more entries that I need to add), but I can't seem to figure out how to change my css to fix that
If someone could help me re-write my CSS to work how I really intend it to, I'll... well, I dunno, send you some cookies or something! I've looked and looked at this CSS til I'm cross-eyed!
I tried to post images to make it clearer but the system won't let me.
Mahalo!
I have created this Fiddle, removing all tables.
HTML:
<ul id="tinamenu">
<li><span class="mainmenu">Tina</span>
<ul>
<li>Admin
<ul>
<li>Calendar Import
</li>
</ul>
</li>
<li>Inventory
<ul>
<li>Adjust On Hand
</li>
<li>Component Report
</li>
<li>Manage OOS
</li>
</ul>
</li>
<li>Marketing
<ul>
<li>Count Incomplete
</li>
<li>Send Promo Email
</li>
<li>Validate Emails
</li>
</ul>
</li>
<li>Miscellaneous
<ul>
<li>FNWL Calendar
</li>
</ul>
</li>
<li>Orders
<ul>
<li>All Un-Processed
</li>
<li>Hand Post Transaction
</li>
<li>View Test Order
</li>
</ul>
</li>
<li>Personnel
<ul>
<li>Timecard Activity
</li>
</ul>
</li>
<li>Products
<ul>
<li>Categories
</li>
<li>FO Data
</li>
<li>New Product Checklist
</li>
<li>Price Table
</li>
<li>Sizes/Weights/Prices
</li>
<li>Specials
</li>
</ul>
</li>
<li>Reports
<ul>
<li>Carts
</li>
</ul>
</li>
<li>Web Site
<ul>
<li>Page Text
</li>
</ul>
</li>
<li>Personalize Menu
</li>
</ul>
</li>
<li><span class="mainmenu">Customers</span>
<ul>
<li>Orders
<ul>
<li>All Un-Processed
</li>
<li>Hand Post
<ul>
<li>Transaction
</li>
<li>Shipping
</li>
<li>Credit
</li>
</ul>
</li>
<li>Processed/Not Printed
</li>
<li>Awaiting Mail Payment
</li>
<li>Awaiting PayPal
</li>
<li>On Account
</li>
<li>Process Credit
</li>
<li>Search
</li>
<li>Search Order Notes
</li>
<li>Cancelled Orders
</li>
<li>Archived Orders
</li>
<li>Returns
</li>
<li>Damage Claims
</li>
<li>Outstanding RMAs
</li>
</ul>
</li>
<li>Customers
<ul>
<li>Email Customer
</li>
<li>Save Cart
</li>
<li>Database
</li>
<li>Search
</li>
<li>Search Emails
</li>
<li>Add
</li>
<li>Monthly Billing
</li>
<li>Set Non-HTML Status
</li>
<li>Combine Customer #s
</li>
<li>Chargebacks
</li>
<li>Prepaid Returns
</li>
</ul>
</li>
</ul>
</li>
<li><span class="mainmenu">Products</span>
<ul>
<li>New
<ul>
<li>Qualify Products
</li>
<li>Ingredient
</li>
<li>Non-Ingredient
</li>
<li>Price Table
</li>
<li>Non-Catalog
</li>
<li>Hidden
</li>
<li>New Product Checklist
</li>
</ul>
</li>
<li>Edit
<ul>
<li>Product
</li>
<li>Hidden
</li>
<li>Non-Catalog
</li>
<li>Sizes/Weights/Prices
</li>
<li>FO Data
</li>
<li>Pthalate/Vanillin
</li>
<li>Hide
</li>
</ul>
</li>
<li>Delete
<ul>
<li>Catalog
</li>
<li>Hidden
</li>
<li>Non-Catalog
</li>
</ul>
</li>
<li>Price Table
<ul>
<li>Manage
</li>
<li>Edit
</li>
<li>FO/CFO Check
</li>
<li>FO/CFO Catalog Price Check
</li>
</ul>
</li>
<li>Organic
<ul>
<li>Products
</li>
<li>Edit
</li>
</ul>
</li>
<li>Inventory
<ul>
<li>View OOS w/Sizes
</li>
<li>View OOS Products
</li>
<li>Manage OOS
</li>
<li>OOS Log
</li>
<li>Adjust On Hand
</li>
<li>Component Report
</li>
<li>By Vendor
</li>
<li>Vendor Receive Log
</li>
<li>By Category
</li>
</ul>
</li>
<li>Miscellaneous
<ul>
<li>Search Criteria
</li>
<li>Edit MSDS/Spec Sheet
</li>
<li>List MSDS/Spec Files
</li>
<li>Saponification Values
</li>
<li>Missing Images
</li>
<li>Upload Image
</li>
</ul>
</li>
<li>Specials
</li>
<li>Categories
</li>
<li>Clearance
</li>
<li>Extra Products
</li>
<li>On Order
</li>
</ul>
</li>
<li><span class="mainmenu">Warehouse</span>
<ul>
<li>Orders Shipped
</li>
<li>Shipping Charges
</li>
<li>Manage Receiving
</li>
<li>Products Needed
</li>
<li>Samples Received
</li>
</ul>
</li>
<li><span class="mainmenu">Marketing</span>
<ul>
<li>Promotional Emails
<ul>
<li>Validate Emails
</li>
<li>Send Promo Email
</li>
<li>Count Incomplete
</li>
<li>Search Mailing List
</li>
</ul>
</li>
</ul>
</li>
<li><span class="mainmenu">Web Site</span>
<ul>
<li>Page Text
</li>
</ul>
</li>
<li><span class="mainmenu">Reports</span>
<ul>
<li>Orders
<ul>
<li>Carts
</li>
</ul>
</li>
</ul>
</li>
<li><span class="mainmenu">Miscellaneous</span>
<ul>
<li>FNWL Calendar
<ul>
<li>Test Calendar
</li>
</ul>
</li>
</ul>
</li>
CSS & HTML on:
http://jsfiddle.net/andyjh07/cKnKL/
Please go to the misc menu at the end to see it in action (due to the small screen of jsFiddle)
Please feel free to nick the HTML and CSS codes as seems to be working :)
You may want to use relative and absolute positioning to move your sub-items and enable z-index to have them on top/below one another.
Here's an example of a mega menu I've used; take a look at how they display the sub items. It doesn't have more than one sub item, but the concept is the same. You may even want to use it to have all your sub items together, rather than use sub-sub items:
http://nettuts.s3.amazonaws.com/819_megamenu/demo/index.html
Is it possible to target only the "Pulldown Parent Menu" link below in CSS (I can't modify the code below)?
The line of code I wish to target so that I can modify it in CSS is:
<li class="page_item page-item-8">Pulldown Menu Parent
The page-item-8 class is dynamically generated so I can't rely on it.
The full code is:
<div id="access" role="navigation">
<div class="skip-link screen-reader-text">Skip to content</div>
<div class="menu">
<ul>
<li class="current_page_item">Home</li>
<li class="page_item page-item-19">Contact</li>
<li class="page_item page-item-8">Pulldown Menu Parent
<ul class='children'>
<li class="page_item page-item-9">Test Page 2</li>
<li class="page_item page-item-11">Test Page 3</li>
<li class="page_item page-item-13">Test Page 4</li>
<li class="page_item page-item-15">Test Page 5</li>
<li class="page_item page-item-17">Test Page 6</li>
</ul>
</li>
</ul>
</div>
</div><!-- #access -->
How can I access the Pulldown Menu Parent link above in CSS?
At your Appearance > Menus, you can click Screen Options and click CSS Classes to add specific class for a specific menu item.
Click here for full image view
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*/
}