How to show a div behind navigation on rollover


Tags: css,menu,navigation,jquery-animate,rollover

Problem :

I'm still trying to get the hang of this web coding thing. Lord knows there is no knowing it all. SO, I'm reaching out in hopes of some help.

I have a div containing a <nav>, and let's say this nav has a <ul> with <li>'s inside it.... How would I go about making a picture appear behind the navigation based on the li highlighted. Say I have a vertical menu:

Home | Gallery | Contacts

and I want the images to extent freely. Lets say Mario appears in behind contacts on rollover. I want his head to overlap Gallery, but he should be behind Contacts. I do intend for these images to be to the far left so as not to interfere to badly with navigation. Can I do this with JUST CSS or will I need jQuery.



Solution :

Is this what are you looking for http://jsfiddle.net/rMCMt/ ?

You can use first-child and nth-child selectors: http://jsfiddle.net/Qq9Nm/

As menu items have different widths, you have to adjust the padding and the margin individually.

The CSS code, below:

li
{
    box-shadow: 4px 4px 2px grey;
    margin: 10px;
    list-style-type: none;
    float: left;
}
li:first-child:hover,
li:nth-child(2):hover,
li:nth-child(3):hover,
li:nth-child(4):hover,
li:nth-child(5):hover
{
    background-size: 200px 200px;
    background-repeat: no-repeat;
    padding-bottom: 180px;
    margin-bottom: -170px;
}
li:first-child:hover
{
    background-image: url('http://goo.gl/RqQtl');
    padding-right: 145px;
    margin-right: -135px;
}
li:nth-child(2):hover
{
    background-image: url('http://goo.gl/TWI0t');
    padding-right: 130px;
    margin-right: -120px;
}
li:nth-child(3):hover
{
    background-image: url('http://goo.gl/xRPiq');
    padding-right: 115px;
    margin-right: -105px;
}
li:nth-child(4):hover
{
    background-image: url('http://goo.gl/u3Akz');
    padding-right: 140px;
    margin-right: -130px;
}
li:nth-child(5):hover
{
    background-image: url('http://goo.gl/Em9Ij');
    padding-right: 140px;
    margin-right: -130px;
}

and the html:

<nav>
   <ul>
      <li> HOME </li>
      <li> GALLERY </li>
      <li> CONTACTS </li>
      <li> EXTRA1 </li>
      <li> EXTRA2 </li>
   </ul>
</nav>

    CSS Howto..

    How do you add a footer with css display: table?

    How to assign CSS to mobile page in asp.net

    How do I add a CSS class to an element from CSS (not jquery nor javascript)?

    how to use liveview in dreamweaver cs5 and local xampp server

    CSS - How make the page scroll over the edge of the window

    How to encapsulate CSS, especially for popups and no iframe involved?

    How to align a menu bar using css and html? [closed]

    How Does CSS Opacity Work When Adding Class?

    How can i auto rotate this carousel

    How/where to center Items on Webpage

    how to make background css url dynamic using jquery

    How to use JavaScript to scale an image to fit

    How can I show an absolutely positioned div inside a fixed positioned div?

    CSS - HTML - How to align images properly across the page

    how to make minified and readable css file in sublime text?

    How to avoid click on within an from triggering click event on without Javascript/jQuery?

    Image, src, href in same span. How to locate? Webdriver, css locator

    How can i get target with a hover an element under an element?

    How to apply css transformations on HTML elements using jQuery?

    How do I make my lightbox not scroll?

    How to mimic Photoshop “Color Overlay” in CSS

    How would I get an img element to render under a background-image in CSS

    How to get actual (not original) height of a CSS-rotated element

    How do I do the exact opposite [closed]

    How to make div height 100% inside relative div?

    How do I replace color: windowtext;

    How to animate top % after a delay?

    How to apply table css to this structure?

    How to styling div with CSS fixed width and auto-resize?

    How to I get this element to span 100% of LI? [closed]