I'm trying to create a two-level horizontal navigation menu (or menubar) that displays the child submenu items when you hover over the parent menu item. If one of the child items is selected, the parent item has a visual indicator that the current page corresponds to one of its child items, and its child items remain displayed.
Child2 is current page:
parent1 *parent2* parent3
|
child1 *child2* child3
When I hover over parent1 or parent3, their children are displayed as desired. My challenge is that I can't figure out how to hide parent2's children when the other parents' children are being displayed. Is there a CSS way to accomplish this? I know I can use jquery to hide parent2's children when mousing out of parent2 and parent2's children, but I'd rather not have to use javascript for maximum usability.
Here is a live example
CSS:
ul.AspNet-Menu
{
position: relative;
}
ul.AspNet-Menu,
ul.AspNet-Menu ul
{
margin: 0;
padding: 0;
display: block;
}
ul.AspNet-Menu li
{
position: static;
list-style: none;
float: left;
}
ul.AspNet-Menu li a,
ul.AspNet-Menu li span
{
display: block;
text-decoration: none;
}
ul.AspNet-Menu ul
{
visibility: hidden;
position: absolute;
}
ul.AspNet-Menu li:hover ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul
{
visibility: hidden;
}
ul.AspNet-Menu li:hover ul,
ul.AspNet-Menu li li:hover ul,
ul.AspNet-Menu li li li:hover ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
{
visibility: visible;
}
.main-nav2 .AspNet-Menu-Horizontal{
margin: 0;
padding: 0;
font: bold 13px/16px Arial, sans-serif;
position: absolute;
top: 21px;
left: 290px;
}
.main-nav2 ul.AspNet-Menu li {
display: inline;
}
.main-nav2 ul.AspNet-Menu li a,
.main-nav2 ul.AspNet-Menu li span.AspNet-Menu-NonLink {
color: #fff;
background: url(../../nav-bg.gif) no-repeat 0 -24px;
height: 24px;
text-decoration: none;
margin: 0 1px 0 0;
}
.main-nav2 ul.AspNet-Menu li a span,
.main-nav2 ul.AspNet-Menu li span.AspNet-Menu-NonLink span {
background: url(../../nav-bg-right.gif) no-repeat 100% -24px;
padding: 4px 12px 4px 12px;
cursor: pointer;
}
.main-nav2 ul.AspNet-Menu li a:hover,
.main-nav2 ul.AspNet-Menu li a.active {
background-position: 0 0;
color: #1b8db3;
}
.main-nav2 ul.AspNet-Menu li a:hover span,
.main-nav2 ul.AspNet-Menu li a.active span {
background-position: 100% 0;
}
.main-nav2 ul.AspNet-Menu li.AspNet-Menu-Selected a,
.main-nav2 ul.AspNet-Menu li.AspNet-Menu-ChildSelected a
{
background-position: 0 0;
color: #1b8db3;
}
.main-nav2 ul.AspNet-Menu li.AspNet-Menu-Selected a span,
.main-nav2 ul.AspNet-Menu li.AspNet-Menu-ChildSelected a span
{
background-position: 100% 0;
}
.main-nav2 ul.AspNet-Menu li.AspNet-Menu-ChildSelected ul
{
visibility: visible;
}
.main-nav2 ul.AspNet-Menu ul{
width:500px;
}
.main-nav2 ul.AspNet-Menu ul li {
font: 12px/20px Arial, sans-serif;
padding: 0 5px 0 0;
display: inline;
}
.main-nav2 ul.AspNet-Menu ul li a {
text-decoration: none;
color: #1b8db3;
padding: 0 0 0 12px;
background-image:none;
}
.main-nav2 ul.AspNet-Menu ul li a:hover {
text-decoration: underline;
}
HTML:
<div class="main-nav2" id="ctl00_MainMenu">
<div class="AspNet-Menu-Horizontal">
<ul class="AspNet-Menu">
<li class="AspNet-Menu-Item">
<a href="javascript:return false;#1">
<span> A Menu Option</span></a>
<ul>
<li class="AspNet-Menu-Item">
<a href="/CSSMenu/A1.aspx">
A1 SubMenu Option</a>
</li>
<li class="AspNet-Menu-Item">
<a href="/CSSMenu/A2.aspx">
A2 SubMenu Option</a>
</li>
</ul>
</li>
<li class="AspNet-Menu-Item">
<a href="javascript:return false;">
<span> B Menu Option</span></a>
<ul>
<li class="AspNet-Menu-Item">
<a href="/CSSMenu/B1.aspx">
B1 SubMenu Option</a>
</li>
<li class="AspNet-Menu-Item">
<a href="/CSSMenu/B2.aspx">
B2 SubMenu Option</a>
</li>
</ul>
</li>
<li class=" AspNet-Menu-Selected">
<a href="/CSSMenu/C.aspx">
<span> C Menu Option</span></a>
</li>
</ul>
</div>
</div>
Many thanks in advance for any tips or help!
Terry
The simple solution is attempt to degrade as best as possible. In this case, I'd set a background color on the child menu and jack up z-index on hover only, so the bg will cover other child menus--[edit] they'll still be visible, but the text won't overlap. Then use javascript to make it as you really want.
The more complicated solution means you have to make all child menus take up identical space--one way is to use negative margin and then padding to cover up that space--and let whatever child menu that's displayed cover up the open one, again by greater z-index (applied to the parent on hover).
edit Another thing I use all the time to handle this kind of situation is to do something like the following
ul:hover ul { display:none; } //or in your case, set to invisible
ul li:hover ul { display:block; } //in your case, set to visible
This means the submenu will disappear when the UL is hovered over and, because the li:hover is lower in the cascade and more specific (I usually have to deal with lots of here-state class names--don't think you will), should allow for the submenu to reappear. It's not quite as fine-grained as you want, but nearly.
If what you want is that when the user clicks a child2 selection the response produces a page with child2 displayed, but child2 should disappear when the user hovers over parent1 or parent3, then you'll need to use JavaScript. The reason being that it's an event that affects more than one node in the DOM in different ways. CSS only affects 1+ nodes in the DOM in the same way, and usually only at page load. The exception are pseudo-classes like :hover which can affect display after page load.
If you need a CSS multi-menu solution, or just want to look at a good one that might help you find what your answer, check out this GRC CSS. I learned a lot from it, and hacked it into a solution I've used numerous times.
There is no pseudo class in css to trigger mouse out equivalent event. You have to use javascript to accomplish what you are trying to do. There are lot of menus/plugins available which does exactly what you are doing (What I mean by the statement is no need to reinvent the wheel).
I'm positive you won't be able accomplish this level of fine-grained control solely through CSS. You'll need to change states on your DOM elements with JS.
Its possible to do without javascript. Check the answer in this page.
Horizontal CSS subnav issues!
Giving higher z-index to siblings child items and less z-index to active menu's child items.
Related
I quite new to programming, as far as html/css is programming. I'm trying to make a website for my own company (in dutch).
I want a nice looking drop-down menu but it won't scale with the page. I have tried using different codes from some sites, but when the page is on half screen it never looks nice and doens't work normally, I was hoping that one of you could help me with this problem, if it is possible at all.
The site i got a part of the code from:
https://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/
My html(5) code:
<nav>
<ul >
<li>Home</li>
<li>
Uitzoeken
<ul
<li>Desktops</li>
<li>Laptops</li>
<li>Producenten</li>
<li>Smartphones</li>
<li>Tablets</li>
<li>Overige</li>
</ul>
</li>
<li>Installeren</li>
<li><a href="Software/Software.html" >Software</a>
<ul>
<li>Basis</li>
<li>Gevorderd
</ul>
<li>Social Media</li>
<li>Problemen</li>
<li>Contact</li>
</ul>
</nav>
My Css code:
nav ul ul {
display : none;
}
nav ul li:hover > ul {
display : block;
}
nav ul {
background: #18c006;
background: linear-gradient(top, #18c0060%, #189c06 100%);
background: -moz-linear-gradient(top, #18c006 0%, #189c06 100%);
background: -webkit-linear-gradient(top, #18c006 0%,#189c06 100%);
box-shadow : 0px 0px 9px rgba(0,0,0,0.15);
padding : 0 20px;
border-radius : 10px;
list-style : none;
position : relative;
display : inline-table;
}
nav ul:after {
content : "";
clear : both;
display : block;
}
nav ul li {
float : left;
}
nav ul li:hover a {
color : #810a11;
}
nav ul li a {
display : block;
padding : 25px 40px;
color : #a60a11;
text-decoration : none;
}
nav ul ul {
background : #18c006;
border-radius : 0px;
padding : 0;
position : absolute;
top : 100%;
}
nav ul ul li {
float : none;
position : relative;
}
nav ul ul li a {
padding : 15px 40px;
color : #a60a11;
}
nav ul ul li a:hover {
background : #18c006;
}
So your new code is :
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
Hope it help.
I want a nice looking drop-down menu but it won't scale with the page.
I have tried using different codes from some sites, but when the page
is on half screen it never looks nice and doesn't work normally, I was
hoping that one of you could help me with this problem, if it is
possible at all.
Your request is vague, so it means we have to guess at your needs. Do you mean, when the browser window is very narrow, you don't like how that particular (from the article) menu transforms? Do you wish to keep the horizontal bar, with a drop-down menu, even in the most narrow view (e.g. 300px wide)?
If that's the case, and your technical skills are low, then continue looking at other articles and demos until you find something you like. However, you will find, most modern menu systems and themes will have some kind of menu system which transforms anything less than say 500-600px wide screens. Search google for "Responsive design".
If you want to tweak the code yourself, technically you should be investigating CSS media queries. You can use them to setup conditional rules for different display sizes.
I have a menu with four items and each one of them has a different colors.
My challenge is to darken each item on hover and I know I can use opacity to achieve this but before that, every time I hover on one of items it only highlights part of it and skips the padding. I know it is a stupid question to ask but this is my first front end job since 1999 :)
Could you please help me with understanding what is wrong here? thank you all.
this is the menu structure
<div class="menu-bar-inner">
<ul class="menu-bar-menu">
<li class="color1">Item 1</li>
<li class="color2">Item 2</li>
<li class="color3">Item 3</li>
<li class="color4">Item 4</li>
</ul>
and this is my CSS
.menu-bar-menu li, .menu-bar-menu li a {
list-style: none;
float: left;
padding: 6px 20px 7px 20px;
text-align: center;
text-decoration: none;
color: #ffffff;
font-size: 16px;
font-weight: 400;
background-color: #ce5043
}
.menu-bar-menu li a:hover {
background-color: black;
}
.color1 {background-color: #ce5043}
.color2 {background-color: #fb8521}
.color3 {background-color: #444444}
.color4 {background-color: #b3c833}
You can use this for hovering:
.menu-bar-menu li:hover, .menu-bar-menu li:hover a {
background-color: black;
}
it take care of both li element and its child anchor when li is hovered
Demo :http://jsfiddle.net/DajQ9/1/
I'd take the padding off the li elements and put it on the a elements instead. Also, set a to display: block;, so it occupies the entire height and width of its parent li. Like so:
.menu-bar-menu li, .menu-bar-menu li a {
list-style: none;
float: left;
text-align: center;
text-decoration: none;
color: #ffffff;
font-size: 16px;
font-weight: 400;
background-color: #ce5043
}
.menu-bar-menu li a {
display: block;
padding: 10px 20px;
}
Here's a fiddle: http://jsfiddle.net/82uyt/
Also, you were missing the closing </div> tag.
While there are many ways to fix this, the root of your issue is the fact that you're padding both the container AND the link inside it when you style the li and the li a in one shot. What you're left with is an a tag that has padding inside an li that has padding, and the padding of the li tag is the unchanging color. By adding:
.menu-bar-menu li{
padding:0;
margin:0;
}
AFTER the declaration you have, you can fix this, or simply separate out your declarations to make it a bit more obvious. Also, when in doubt, a tool like the Firebug extension for Firefox will be your best friend. You can launch it, then click an item in your page to see the styles that are affecting that exact piece... sometimes just the highlighting/border while you move around is enough to make you see what's happening.
Yoy need to apply padding to the element on which you are applying the hover action. Here is your code updated. Visit this link: http://jsfiddle.net/dnPmE/1/
css:
.menu-bar-menu li, .menu-bar-menu li a {
list-style: none;
float: left;
text-align: center;
text-decoration: none;
color: #ffffff;
font-size: 16px;
font-weight: 400;
}
.menu-bar-menu li a{
padding: 12px 40px 14px 40px;
}
.menu-bar-menu li a:hover {
background-color: black;
}
.color1 {
background: #ce5043;
}
.color2 {
background: #fb8521;
}
.color3 {
background: #444444;
}
.color4 {
background: #b3c833;
}
Basically, I have this website:
http://www.ug.it.usyd.edu.au/~sgre9702/week3/dropDownMenu/semantics.html
I want to centre the drop-down list items on the nav-bar, I know I can centre it with:
left:-11px;
However, I don't want to use a value I have calculated. Instead I would like it to automatically centre, taking the margin/padding values into consideration. I don't know if this is possible after googling around a bit.
My related HTML code is:
<nav>
<ul id="nav">
<li>Tours
<ul>
<li>New South Wales
<li>Australian Capital Territory
<li>Queensland
<li>Western Australia
<li>Northen Territory
<li>Tasmania
<li>South Australia
<li>Victoria
</ul>
<li>Attractions
<li>Food
<li>Resources
<li>About
<li>Contact
<ul>
<li>Online
<li>Phone
<li>Facimile
</ul>
</ul>
</nav>
The related CSS:
/* general nav list */
nav ul li {
background-color: #EEEEEE;
border-color: #000000;
border-style: solid;
border-width: 1px;
display: inline-block;
margin: 0px 5px;
padding: 5px;
position: relative;
text-align: center;
width: 120px;
}
/* nav sub list */
nav ul li ul {
display: none;
}
/* nav sub list shown */
nav ul li:hover ul {
display: block;
width: 142px;
position: absolute;
list-style-type: none;
}
/* nav sub list shown - list item */
nav ul li:hover ul li {
display:block;
background-color: #AACCFF;
border: solid 1px #000000;
position: relative;
/*left:-11px;*/
}
Remove the padding from the ul>li elements and apply to the anchors themselves (they will need display:block). Remove the margins from the sub-li elements
Then give the child ul width: auto. The submenu block will still be offset 1px to the right, though, as it will takes its left edge from where its parent's left border ends. You can get around that by either replacing the borders without outlines (which don't effect the widths of their host elements), putting borders on the child anchor/li elements or finally trying a left:-1px value on the child UL.
I use the following menu:
<ul id="menu">
<li class="subMenu">
<h2><span>menu item</span></h2>
<div>
<p><span>submenu item</span></p>
</div>
</li></ul>
I have the following css:
ul#menu {
float:right;
height:80px;
color: #FFF;
margin: 0;
padding: 0.8em 0em;
}
ul#menu li {
display: inline;
margin: 0.1em 1em;
position: relative;
}
ul#menu h2,ul#menu h3 {
font-size: 1em;
font-weight: bold;
display: inline;
}
ul#menu li a {
text-decoration: none;
}
ul#menu li a:hover {
text-decoration: underline;
}
ul#menu li.subMenu a {
padding: 0 1.2em;
}
ul#menu li.subMenu a:hover {
text-decoration: underline;
}
ul#menu div {
display: none;
}
ul#menu li.subMenu div {
border: 1px solid #fff;
width: 125px;
position: absolute;
top: 2.5em;
left: 30px;
background: #fff;
color: #000;
}
ul#menu li.hovered div {
display: block;
}
ul#menu li.subMenu div a {
text-decoration: none!important;
}
can anybody advise how i can keep menu item hovered when i hover over the submenu item
thank you in advance.
Quick solution in jsFiddle. (See the comments in the CSS to find out what I've changed.)
You are most of the way there already. Replacing the ul#menu li.hovered div selector in your CSS with ul#menu li:hover div is most of the battle; the rest is adjusting the submenu position so that you can actually hover over it without it disappearing. (In the jsFiddle above I've simply used padding instead of offsetting with absolute positioning.)
However, please pay attention to the commenters above! Their observations are entirely correct and germane:
The markup being used is rather heavy and unorthodox. For example, your submenu "items" are paragraphs in a div, but normally I would expect to see just a nested list; also, the spans seem unnecessary, and you don't need the submenu class on the list items when you already have an ID on the parent ul.
Second, they are also correct that there are plenty of great tutorials and examples for this out there, so while rolling your own worthwhile exercise you don't need to do it alone—nor should you! My first introduction was this old A List Apart article, and you can even ignore the whole section about JavaScript/Suckerfix since it's 2011 and most of us are perfectly happy to forget about IE6.
http://www.devinrolsen.com/pure-css-horizontal-menu/
You could use li:hover to keep the contents of the li tag displayed. You could also follow this simple tutorial on creating a pure CSS hover menu.
I have a menu:
<div class="headerMenu">
<ul>
<li>Home <span>Home Page<span></li>
<li>About <span>About My Website<span></li>
<li>Contact <span>Get in touch<span></a></li>
</ul>
</div>
My current CSS is as follow:
.headerMenu{
width: 100%;
}
.headerMenu ul{
margin: 0;
padding: 0;
float: left;
}
.headerMenu ul li{
display: inline;
}
.headerMenu ul li a{
float: left;
color: white;
padding-top:25px;
padding-left:50px;
font-size:24pt;
}
.headerMenu ul li a:visited{
color: white;
}
.headerMenu ul li a:hover, .menu ul li .current{
color: #fff;
background: url(../../Content/Images/menu-selector.png) repeat-x; /* 25x10 arrow/*
}
And now for the question:
How can i get the content in the span tag to be below the Main text.
When i hover over the anchor, How do i add the hover image as shown in screen shot
The Mockup i created in Photoshop looks like this:
I know this would be easily achievable by making use of images, but my solution requires that menu to be created dynamically.
1) How can i get the content in the span tag to be below the Main text.
You need to use display: block on the span to have it appear on a new line:
.headerMenu ul li a span {
display: block;
}
2) When i hover over the anchor, How do i add the hover image as shown in screen shot
Try to center the arrow to the top. This might work:
.headerMenu ul li a:hover, .menu ul li .current {
color: #fff;
background: url(../../Content/Images/menu-selector.png) no-repeat center top;
display:block;
/* also make sure that you use display block with correct height
so that you can positionate the arrow on the correct place... */
}
Add the following code for problem 1:
.headerMenu ul li a span {
display: block;
}
This sets the <span> to display as a block level element, therefore occupying the full parent container width by default.
For problem 2, there are multiple ways to do this. However, my suggestion would be to add the array to the <li> and use the :hover pseudo class. Note: that this will only work in IE for 7+.
.menu ul li:hover{
background: url(../../Content/Images/menu-selector.png) repeat-x;
}
See it in action - http://jsfiddle.net/kxqx8/1/ (I changed the colors to help display)