Clever Geek Handbook

Advanced CSS deployment - sharing parent container

I am working with CSS and trying to create a navigation menu without using js to trigger the rollover. This navigator is quite tricky because the design has arrows like separators, it will be a pain to separate the links into separate backgrounds ...

For some reason I can't figure it out right now and thought I posed the question there ... Is it possible to use a pseudo-class: hover over the UL background replacement with each link.

I created a fiddle of everything. http://jsfiddle.net/kenaesthetic/dkEAr/

body{
    background-color:#efefef;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}

#content{
    background-color:white;
    margin: 28px auto;
    padding:33px;
    width:894px;
    border-radius:8px;
    box-shadow:1px 1px 5px #ddd;
    height:600px;
}

ul#nav{
    width:100%;
    height:48px;
    background-image:url(http://www.mniac.com/mniac-assets/images/nav-sprite.png);
}

ul#nav li{
    float:left;
}

ul#nav li a{
    display:block;
    color:#6f6f70;
    text-transform:uppercase;
    text-decoration:none;
    padding:17px 0 16px 0;
    text-align:center;
    font-size:15px;
}

ul#nav li a:hover{
    color:#fff;
}

ul#nav li a.home{
    width:56px;
    text-indent:-9999px;
}

ul#nav li a.home:hover{

}

ul#nav li a.background{
    width:210px;
}

ul#nav li a.process{
    width:214px;
}
ul#nav li a.impliment{
    width:214px;
}

ul#nav li a.reference{
    width:200px;
}

This is css.

Anyone want to hack it? It can be done? I have a headache:)

Thanks everyone.

UPDATE:

Ok guys / gals here's my solution (Note: had to work in IE8)

I used absolute positioning and a new sprite.

http://jsfiddle.net/kenaesthetic/rA59L/2/

The last link doesn't work ... Not sure why as it works fine locally here. Don't have time to end it.

thanks for the help

+3


source to share


3 answers


Yes, this is possible by using a lot of pseudo-classes and putting the background in ::after

from the last element li

.

But the best way would be to apply some of this background to each list item, this way you can just include it on li:hover



ok i couldn't help it and made one without images using gradients and transforms :)

+1


source 


ul#nav li.home:hover{
    background-image:url('newBackgroundimage.png');
}

Although you don't need to be that specific:



li.home:hover{
     background-image:url('newBackgroundimage.png');
}
li.background:hover{
     background-image:url('newBackgroundimage.png');
}
li.process:hover{
     background-image:url('newBackgroundimage.png');
}

Etc...

0


source


One way to do this is to switch the background image to li

instead of a ul, as having a hovering child affecting the parent can be difficult.

Something like this example might work, although it's built far enough away to show the Background action in action.

http://jsfiddle.net/PzHT9/

0


source






More articles:


All Articles