Develop Reference

Possible to highlight path in many-nested css menu?

I've created a four-layer menu using CSS (ul and li) combined with PHP which pulls the options out of a database. It's not for navigation but to allow the user to filter up to a certain level of detail
Example: http://jsfiddle.net/7LFT5/
If you take the path "part of building" > "exterior" > "garage / car port" > "garage door", you'll see that the user would easily get confused about what path they've taken.
I'd like to highlight the path they took in a different colour. It would be ideal to do this in CSS - which feels like it should be possible, since the path is generating the visibility of menu items. I've been playing around with the css below, hoping :hover or :active would work - but no luck yet.
nav.filter li ul li ul li:hover ul {
display: block;
width: 150px;
padding: 0px;
left: 170px;
top: 0px;
/* margin: 0px; */
z-index: 3;
}
Has anyone done this before?

You need to change this selector:
nav.filter ul li a:hover {
Because you need to keep the highlight on the a tag when hover the entire content of the li
To this:
nav.filter ul li:hover > a {
Check this Demo http://jsfiddle.net/7LFT5/1/
Now combining the two selectors you can have one color for the active and one on the hover item like this :
http://jsfiddle.net/7LFT5/3/

CSS Tab Control - How do I show only the first div?

Okay...I know there are already loads of Pure CSS Tab Controls out there...
Here is my HTML
<div class="tabs">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div id="tabPage1">
<p>
Hello World
</p>
</div>
<div id="tabPage2">
<p>
Goodbye World
</p>
</div>
<div id="tabPage3">
<p>
Another World, somewhere far, far away!
</p>
</div>
</div>
Here is my CSS
.tabs > div {
display: none;
}
.tabs > div:target {
display: block;
}
There's no styling for this example as I'm only concerned with the behavior.
You can try it here...http://jsfiddle.net/rcrdC/
How do I get it to display the first div until an anchor is clicked?
How do I get it to leave the displayed div...displayed, even when I change the anchor to something else (i.e. #tabPage4)...if that makes sense?

from here , you can make the last one be display at the beginning with like this (working example)
.tabs > div:target ~ div:last-child,
.tabs > div{
display: none;
}
.tabs div:last-of-type,
.tabs > div:target {
display: block;
}
Just move the first tabpage to be the last.

This is an interesting challenge. Unfortunately, I don't believe the intended result can be achieved (purely) with CSS.
We can show the first div easily enough using:
div:first-of-type { display: block; }
But I don't know of a way to select our previously :targeted divs without using JavaScript.
Here I've set up some jQuery to apply class .active on any div with an id that equals that of a clicked anchor href. From there we can override display: none; on divs of that class with some simple CSS:
$('li a').each(function () {
$(this).click(function () {
var active = $(this).attr('href');
$(active).addClass('active');
});
});
And here's the related CSS:
div:first-of-type, div:target { display: block; }
div { display: none; }
.active { display: block; }
And a working example: http://jsfiddle.net/fjKUw/1/

showing the first tab on load should not be that hard. You can use the :first-of-type pseudo class. Something like this:
.tabs > div{
display: none;
}
.tabs > div:first-of-type,
.tabs > div:target {
display: block;
}
The second question is a bit harder. The first tab will be shown again as soon as your target moves to an anchor outside the tabs. http://jsfiddle.net/rcrdC/4/ You need some way to preserve state. The 'real life' solution would be to add a few lines of javascript to achieve this, as suggested already by #StuartKershaw.
If you insist on going fully css, you could use a (hidden) radio button to preserve the state. It is a bit hacky (inputs are not meant for that) and you would have to change your markup a bit, but it should be feasible.
An example of what I mean can be found here: http://jsfiddle.net/rcrdC/5/
Note that I placed some hidden radio buttons between the tabs. I replaced the links to the tabs by labels that reference those radio's. Then I use a combination of the :checked and the + selector to make things work. And the tab that is visible on load is the one with checked attribute.
Again, this is not the way I would recommend. You are adding to your markup, with the sole purpose of achieving a certain layout, which should be the task of your css. Also the stuff you need to add is far from semantically correct...

Changing css on span click

I have a 3 spans I use to navigate to 3 different pages, they basically act like buttons for me, only a plugin I use require them to be spans (why I cant use buttons, so dont tell me to use buttons instead).
What I want to do is change background color on the clicked span, so if I am on page 3, span 3 is green for instance, and when I click on another span, that one changes and the previous green span goes back to normal.
Any idea on how to do this either in js,html or css?

This is easily achieved with jQuery.
jQuery
$('span').on('click', function() {
$('span').removeClass('active');
$(this).addClass('active');
});
CSS
span {
background: #c1c1c1;
display: block;
width: 100px;
height: 25px;
float: left;
}
span.active {
background: green;
}
html
<span class="active">one</span>
<span>two</span>
<span>three</span>
<span>four</span>
This just adds the class active to the clicked element while removing any active before.
JSFIDDLE

JQuery addClass() that has a space in it?

How can I use JQuery's addClass method to add a class that has a space in it? For example:
.list {
padding-left: 0px;
margin-left: 20px;
}
.list li:hover {
background-color: AliceBlue;
}
I am trying to update/replace the inner html of a list inside an event handler, but when I do that all the CSS formatting goes away. I just need a way of putting it back, so I was going to use something like $('#my_list').addClass('list list li') but I don't know how to get it to recognize the li part. I've tried escaping the space, but no luck; passing it 'list list\ li' doesn't do the trick, either.

You only need to add the class list to the #my_list and rest of the code it just css. once you add the list class to the ul element, it will automatically apply the :hover style for the child li elements
jQuery,
$('#my_list').addClass('list');
css,
.list {
padding-left: 0px;
margin-left: 20px;
}
.list li:hover {
background-color: AliceBlue;
}
For more clear, in your code list is the only class you has. and li is not a class it is a li element inside the ul tag. and li:hover means hover effect of the li element

.list li is not specifying a class with a space in it. That is selecting an li element that is somewhere in the structure underneath any element with the list class in it. It's hard to say exactly what you need to do without seeing how your HTML is structured and how much you're replacing. If you just replace the lis inside of your .list element then it will still work fine. If you're replacing the whole thing then just make sure you add the list class to the parent element that contains the lis.

The CSS selector .list li matches the following:
Any <li> element that's a descendent of an element with the class list
It does not match an element with a class called "list li". If you want to use some kind of spacer character in your classes use a hyphen:
.list-li:hover {
}
To add this class:
$(this).addClass('list-li')

Icon to move when hovering over a menu button

Before you read this please get up this website to see what I am trying to do:
https://www.kris-willis.com
As you can see there is a RED arrow located below the menu and what it is that I'm trying to achieve is... when I hover over a menu button the arrow moves to the same button I'm hovering over without reloading the page.
Ideally I'd like the arrow to move back to a default button.. and also for the default button to change if clicked on a different menu button.
If you know any links to examples etc... I would really appreciate it!
Thank you for your time,
Kerry x

The first thing is that you have a wrong DOCTYPE.
<!DOCTYPE html PUBLIC "">
This causes you page to load in quirk mode. Change it to
<!DOCTYPE html>
for HTML5 or use the complete one including the FSI & FPI.
Second is you are using a <table> for navigation. Nothing seriously wrong with it but people tend to use ul
For the :hover, you can simply use
#MenuPosition table tbody tr td:hover
{
background-image: url("/images/Arrow.jpg");
}
You might have to play with paddings and margins or maybe use display: block or display: inline-block to position the arrow correctly.

Make the "buttons" anchors. Using css set create a rule for :hover to set a background image that contains the arrow.
There are plenty of CSS tutorials out there, Nettuts and Webdesigntuts have a lot of navigation articles. Or if you are comfortable with emulating others, find a site you like and pick apart the source until you figure out how they did it.
Keep in mind that javascript is not at all necessary to accomplish what you are doing. Unless you want some animations, and even then CSS can handle most of that work, pure CSS in my opinion is the better approach.

PURE CSS SOLUTION
Check this answer.
Is there any way to hover over one element and affect a different element?
So it might be:
#thething {
margin: 0;
}
.classone:hover + #thething {
margin-top: 10px;
margin-left: 10px;
}
If they're adjacent siblings in a parent div.

Just move the arrow bymargin-left with respect to left of the td DEMO
$("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});
Tp do this Add jQuery libirary to the head section of your page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Add this code in a external js file and add it to head section of your page
$(function(){
$("#MenuPosition").on("hover","td",function(){
$("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});
});
});
EDIT : For restoring the arrow orignal position use
$(function(){
currentPos = $("#Arrow").css("margin-left");
$("#MenuPosition").on("hover","td",function(){
$("#Arrow").css({"margin-left":$(this).position().left});
});
$("#MenuPosition").on("mouseout","td",function(){
$("#Arrow").css({"margin-left":currentPos});
});
});
NOTE : PLEASE SEE THE CALCULATION PART AND CORRECT IT.
PS: cant correct is because its my log out time from office ;) . but i thing you got the logic to do it

You can do something like this:
Using a span to add the bg arrow below the nav/menu lis in the HTML:
<ul class="nav">
<li>
Menu 1
<span class="arrow"> </span>
</li>
<li>
Menu 2
<span class="arrow"> </span>
</li>
</ul>
The CSS:
.nav {
font-size: anypx;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
.nav li {
background: #whatev;
display: block;
float: left;
height: anypx;
line-height: anypx;
padding: 0;
text-align: center;
}
.nav li a {
color: #any;
display: block;
padding: any;
position: relative;
text-decoration: none;
width: auto;
}
.arrow {
background: url("images/arrow.png") no-repeat scroll 0 9px transparent;
display: none;
height: anypx;
text-indent: -9999px;
width: whatevs;
z-index: 9999;
}
And Finally the JS/Jquery that makes it work:
$(document).ready(function(){
Your_menu();
});
function Your_menu(){
$(".nav li").hover(function(){
$(this).find('.arrow').css({visibility: "visible",display: "none"}).show();
},function(){
$(this).find('.arrow').css({visibility: "hidden"});
});
}
Here is a site that is showing this :)
http://www.drexelmedicine.org/