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/
Related
This is kind of tricky. I'm using this js effect that changes my navigation color as you scroll through different sections. So when you scroll past the section with the class "green" it changes the hover border color of my nav. This is usually how it's done
.midnightHeader.green a:hover {
border: 3px solid #2b5999;
}
the problem is, I have other links in my header which I don't want to apply this to. So I only want to style the links inside the unordered list items, but the following code doesn't work.
.midnightHeader.green nav ul li a:hover {
border: 3px solid #2b5999;
}
Basically would I style the "nav ul li a:hover" inside ".midnightHeader.green"
Please have a look at midnight.js it explains how this works
Can anyone help me work this one? Thanks
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...
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
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/
I have a site http://www.labanda.cl/ and I have a strange error with the submenu or subsections like "servicios".
When I move the cursor on this the rest of subsections this dissapear.
How can fix this?
You have a css class:
#nav ul ul {
position: a
bsolute;
display: none;
width: 14em;
top: 2.5em;
...
}
delete top: 2.5em;
Quite a simple and common mistake - you've applied the CSS "visible" style (for when the menu is visible) to the <a> tag. When you hover the <a> tag, it shows the submenu, then when you go to click a submenu item, you're not hover the <a> any more, so it hides it again.
If you apply the hover selectors the the <li> containing the <a> tag, it should work.