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..

    Using a lot of style sheets. Needing opinions on how to move forward efficiently

    How to find CSS deceleration for :hover state using Chrome's inspector

    Want to duplicate css styles for an ID based style, how to do this with least duplication?

    AngularJS / CSS - How to set the width of a select box to a value from $scope?

    Parsing awful HTML: How do I recognize boundaries with xpath?

    How to make Chrome and IE display block hyperlinks correctly

    How to build a mobile responsive menu that will always have a 100% height and show all its list items

    CSS Border Color: How to set bottom border color?

    Images not showing up in IE 9

    how to get rid of the border-bottom by css?

    Angular show / hide with animation

    How can I make a two column layout's main div auto fit to browser width?

    How to select XML element by xlink:href attribute with CSS?

    How to set a CSS selector for links ( a Tag ) for a Class

    How to link a main.css to all Django templates? [closed]

    jQuery & CSS - How to stop a relative element from floating left and right (when you're scrolling)?

    How to force Visual Studio to honor the BOM at the start of a UTF-8 encoded CSS file?

    how to position div with css and force text to wrap around

    How to create mirrored image effect with CSS single element

    How to center the pagination in jQuery Bootstrap DataTables plugin?

    Showing only one row of items with css independently of users resolution?

    How to fix these jagged lines?

    How to make the div's appear inline in the following code?

    How to alter CSS properties using PHP based on a conditional

    Css how to set 3 block block/div's in one line [closed]

    Capybara/CSS: How to find an input field by label AND value?

    HTML - How do I insert a tag into each line of a
     block without hard coding?

    CSS - How to set many div width with a non-round percentage to fill a parent div space

    With HTML and CSS, how to have an image that is vertically aligned with a horizontal line?

    How do I create a CSS class Union?