Apologies for what is probably quite a basic question, but I've not found a solution to this online.
I have a simple CSS menu, here's the CSS:
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
opacity:1;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #c00;
background-color: #fff;
}
/* End navigation bar styling. */
This is from an online tutorial, so not my code.
Here's the HTML:
<!-- language: lang-html -->
<ul id="nav">
<li>About Us</li>
<li>Our Products</li>
<li>FAQs</li>
<li>Contact</li>
<li>Login</li>
</ul>
All I want to do is have different colo(u)rs for each menu item when hovered over.
I assume you need to create a separate id (or class) for each item, but I am unsure of the syntax and no matter what I try it simply won't work.
Many thanks for any assistance.
add a class to the href links and then in your css call the hover state and then style accordingly. Here is an example using your code: http://jsfiddle.net/LGL37/
The HTML:
TEXT
The CSS
.about:hover { background: yellow; }
EDIT: this is a much better solution than the other answer as it is cross browser compatible and if you need to style more in the future you'll have individual classes to target rather than nth which can get confusing.
If you don't use the :nth-child() selector, you can add a unique class to each li in the nav
<li class="about"></li>
and set a hover effect in your stylesheet for that specific class
#nav li.about a:hover { background-color: red; }
You can use :nth-child selector but it won't work in some legacy versions of IE.
JsFiddle
#nav li:nth-child(1) a:hover {
color:green;
}
#nav li:nth-child(2) a:hover {
color:blue;
}
etc.
You could use nth-child:
li:nth-child(2) a:hover{
color: red;
}
http://jsfiddle.net/fAbFg/
This example affects the second item.
Related
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;
}
I am trying to create a tree with indentations in pure CSS. I have been trying using something like:
ul.tree ul {
padding-left: 5px;
}
However I would like to have a separation between each item in the list. If I use the code above the separating bar gets indented as well so it's not too good.
Here is my current code (I do the indent directly in js, which I don't like): jsfiddle
Ultimately, I want to create something that basically looks like that:
Any idea how to do this in pure CSS? kudos for the simplest answers.
Simple with Multi-level Depth Support
UPDATED: Tweaked to accommodate hover
No extra HTML needed, no having to limit depth because of css selector chaining, as it supports any number of levels deep without having to adjust your css at all for those levels (no keeping track of "padding" to set on the next level deep).
This works well with only a two minor limitations (which I don't believe will factor into affecting you).
See fiddle demo.
Add a position: relative to your ul.tree, but keep all the child elements the default static position. Then change/add the following css:
ul.tree a {
display: block;
height:30px;
line-height: 30px;
padding-left: 15px;
}
/* this is making our bottom border, but sizing off the .tree ul width */
ul.tree a:before {
content: '';
height: 30px; /* match your <a> height */
position: absolute;
left: 0;
right: 0;
z-index: -1;
border-bottom-width: 1px;
border-bottom-color: lightgray;
border-bottom-style: solid;
}
ul.tree a + ul {
padding-left: 15px; /* this is your spacing for each level */
}
ul.tree a:hover:before {
background-color: #DDDDDD;
}
The limitations are that no child elements can have a position set and we are using a pseudo-element (which means it cannot be used for some other feature, but that is probably not an issue either).
For lists with unknown depths, I've used an absolutely positioned element for separating lines. It adds a little extra markup, but seems to work.
div.separator {
position:absolute;
left:0px;
right:0px;
border-top:1px solid lightgray;
}
<ul class="tree">
<li><a>Item1</a><div class="separator"></div></li>
<li><a>Item2</a><div class="separator"></div>
<ul>
<li><a>Item3</a><div class="separator"></div></li>
<li><a>Item4</a><div class="separator"></div></li>
<li><a>Item5</a><div class="separator"></div>
<ul>
<li><a>Item6</a><div class="separator"></div></li>
</ul>
</li>
</ul>
</li>
</ul>
http://jsfiddle.net/7u87c/20/
This CSS makes the link inside a nested li have a padding-left of 30px, and I add another nested li link have padding-left: 60px.
ul.tree li ul li a {
padding-left: 30px;
}
ul.tree li ul li ul li a {
padding-left: 60px;
}
http://jsfiddle.net/7u87c/5/
No extra markup and use of icon image.
Pretty simple and dynamic based on the content.
Sample HTML:
<ul class="tree">
<li><span>public</span></li>
<li><span>server.js</span></li>
<li>
<span>server</span>
<ul>
<li><span>webfs</span></li>
</ul>
</li>
<li><span>specs</span></li>
<li>
<span>src</span>
<ul>
<li>
<span>core</span>
<ul>
<li><span>CellAddress.js</span></li>
</ul>
</li>
</ul>
</li>
</ul>
CSS:
ul.tree {
border-top: 1px solid grey;
}
ul.tree, ul.tree ul {
padding: 0;
margin: 0;
list-style: none;
}
ul span {
display: block;
padding-left: 25px;
border-bottom: 1px solid #666;
height: 25px;
line-height: 25px;
background: url("http://lorempixel.com/10/8/") no-repeat scroll 5px 8px transparent;
}
ul ul span {
padding-left: 35px;
background-position: 15px 8px;
}
ul ul ul span {
padding-left: 45px;
background-position: 25px 8px;
}
Please see example
Note: You can convert the spans into a tags
here is my html code
<div id="menus">
<ul>
<li>Home</li>
<li>Users</li>
<li>Project Manage</li>
<li>Transaction</li>
<li style="border-right:none;">Logout</li>
</ul>
</div>
here is my CSS
#menus li
{
float:left;
list-style-type: none;
padding-left: 25px;
padding-right: 25px;
border-right:groove 1px #FFFFFF;
background: #666666;
}
#menus li:hover
{
background: #999999;
}
#menus li a
{
font-size:24px;
text-decoration:none;
color:#FFFFFF;
}
#menus li a:hover
{
color:#000000;
}
now i want to change css when user click on li (like display current selected). can I do this using css only?? If yes then how??
Thanks in advance..
You can do it with CSS only using focus and tabindex
DEMO http://jsfiddle.net/kevinPHPkevin/LstNS/4/
li:focus {
background: red;
outline: 0;
}
A good way to employ an 'active' menu item solution is this
DEMO http://jsfiddle.net/kevinPHPkevin/LstNS/6/
Source: http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/
No, you can not do this with just css. I am not too sure what to say...
If you want to have a page specific active, place a different class in the backend, example:
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.
Ok,
So problem here... when using list-style-position:inside in IE8 the first like is indented but every line after that is not. So the new lines appear under the bullet.
This is fine, but when I use a list with that css applied with an a tag within the li then the text automatically gets pushed to the second line, and the first line is empty.
ie8 bug http://www.rocketspark.co.nz/bug_images/ie8_list.png
When I remove the a tag from the li then it jumps back up.
Any idea on why this might be or is this a bug in the ie8 world or do I just need to double check my css?
Any insights would be much appreciated.
As asked here is some code
<div id="sub_nav">
<ul>
...
<li><a class="active_page" href="#">Liposculpture</a>
<ul>
<li>What is Liposculpture?</li>
<li>About Liposculpture surgery</li>
<li>After Liposculpture surgery</li>
<li>Post Op Instructions</li>
<li>Liposculpture Side Effects</li>
<li>Liposuction Introduction to</li>
<li>Tumescent Liposculpture</li>
</ul>
</li>
...
</ul>
</div>
For the CSS I will try and show it best I can
#sub_nav li {
width: 200px;
padding:4px 0;
border-bottom: 1px #CCC solid;
}
#sub_nav li a {
text-decoration: none;
color:#555;
padding:7px 15px 7px 15px;
display: block;
}
#sub_nav li ul li {
list-style-position: inside;
list-style-type: disc;
font: 11px Arial;
padding-left:15px;
color:#FFF;
border-bottom: none;
}
#sub_nav li ul li a {
padding:0;
margin:0;
text-indent: 0;
}
Hope this helps
change
#sub_nav li a {
text-decoration: none;
color:#555;
padding:7px 15px 7px 15px;
display: block;
}
to
#sub_nav li a {
text-decoration: none;
color:#555;
padding:7px 15px 7px 15px;
display: inline-block;
*display: inline;
*zoom: 1;
}
#salgiza posted the answer in the comments above... "it looks like IE8 is having problems when calculating the width of the "a" (displayed as block) and pushing it down to a new line. The first thing I would try would be adding a width to the "a" element, to see if that's the problem."