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.
Related
I'd appreciate any help with this.
I've been through the styles and can't find what is causing this problem; I need to remove the blue shadow element that occurs when hovering over a top navigation menu element. This is only happening for items with sub-menu items and only happen sin Chrome and Safari.
Here's the link to the problem navigation http://www.freedomflooring.co.nz/testing-changes.html
The site is using Zurb Foundation framework.
<nav class="marketing-topbar">
<div class="desktopMenuWrap ">
<ul class="dropdown menu" data-dropdown-menu data-click-open="false">
<li>About
<ul class="submenu menu vertical" data-submenu>
<li>Approach</li>
<li>Finance</li>
</ul>
</li>
</ul>
</div>
</nav>
You are probably looking for outline: 0px; which will remove the "border" when an element is focused. I tested it with Chrome and it works well for me.
See https://developer.mozilla.org/en/docs/Web/CSS/outline for more information on outline.
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
How do I remove text wrapping for the child elements in a dropdown?
JSFiddle with CSS here: http://jsfiddle.net/6Bqfn/4/
<ul>
<li>Home</li>
<li>Shop
<ul class="children">
<li>Longer Title</li>
<li>Short</li>
<li>Short</li>
</ul>
</li>
</ul>
I can't get the ul holding the children elements to resize to the size of the largest child li.
You need to include white-space:nowrap; in your css for the items you wish not to wrap:
ul.children li {
white-space:nowrap;
}
This will force all items to show up on a single line, and since all your widths are set to auto, it'll expand accordingly. I updated your jsFiddle as well.
You might try something like embedding a non-breaking space...
Longer Title
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.
I know, a vague title but it's hard to describe what I want in one sentence.
My problem is as follows, I have a template with several dropdown menus activated by jQuery. The dropdown lists appear as second level navigational items within a the first-level list, as follows:
<ul class="tools">
<li class="dropdown">
Tools
<ul class="submenu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</li>
<li>More</li>
</ul>
The submenu is hidden by default, and can be shown by clicking the list item it belongs to (in this case 'tools'). The submenu is positioned absolute, so that when it shows it's always just below the clicked link. This all works perfectly fine.
The problem is that all this is wrapped in a div that has an overflow: hidden. When the submenu is too close to the right side of this div, and the list items are too long, the list falls under the right border of the wrapper, rendering it partly invisible.
Overflow: auto gives the wrapper a scrollbar, which is unwanted. Overflow: visible solves the problem, but makes the wrapper have no height so that the background color and borders aren't visible, which is part of it's function, so that doesn't help either.
To not have to quote a large bunch of code, a live example can be seen on http://www.pkr.nl/template/forumdisplay.html
Does anyone know a solution that will make the menus either show outside the wrapper, or that makes them align to it's right in a decent way?
Is there a reason you are floating #container .column left?
If you remove the float and then remove the overflow:hidden from #container, your menu will show up.