Animated side-menu with rollover images

Question

I am trying to recreate an animated side-menu with rollover images inspired by this live example .

I have the following code and wanted to know if there is any possibility to link the menu, to rollover presentation images like we have in the above shown example and how. Any thoughts?

 body { font: normal 1.0em Arial, sans-serif; background: #A8CBFF; } nav { font-size: 3.0em; line-height: 1.0em; color: white; width:6em; height: 9.0em; position:absolute; top:0; bottom:0; margin:auto; left: -4.5em; } nav ul { list-style: none; margin: 0; padding: 0; } nav ul li { background-color: blue; height: 1.0em; padding: 0.25em; position: relative; border-top-right-radius: 0.75em; border-bottom-right-radius: 0.75em; -webkit-transition: -webkit-transform 500ms, background-color 500ms, color 500ms; transition: transform 500ms, background-color 500ms, color 500ms; } nav ul li:nth-child(1) { background-color: #00aced;} nav ul li:nth-child(2) { background-color: #3b5998;} nav ul li:nth-child(3) { background-color: #517fa4;} nav ul li:nth-child(4) { background-color: #007bb6;} nav ul li:nth-child(5) { background-color: #cb2027;} nav ul li:nth-child(6) { background-color: #ea4c89;} nav ul li:hover { background-color: #C1232D; -webkit-transform: translateX(4.5em); transform: translateX(4.5em); } nav ul li span { display:block; font-family: Arial; position: absolute; font-size:1em; line-height: 1.25em; height:1.0em; top:0; bottom:0; margin:auto; right: 0.16666666666667em; color: #F8F6FF; } a { color: #FFF; text-decoration: none; } 

 <nav> <ul> <li><a href="http://www.twitter.com">Category 1</a></li> <li><a href="http://www.facebook.com">Category 2</a></li> <li><a href="http://www.instagram.com">Category 3</a></li> </ul> </nav> 

Answer 1

You could try using a div with a hidden overflow, and using an animated .scrollTop. See this fiddle here: https://jsfiddle.net/Domination/nezwu0ye/9/

HTML:

<nav>
  <ul>
    <li name='cat1'><a href="http://www.twitter.com">Category 1</a></li>
    <li name='cat2'><a href="http://www.facebook.com">Category 2</a></li>
    <li name='cat3'><a href="http://www.instagram.com">Category 3</a></li>
  </ul>
    <div id='menuRight'>
       <div>
           stufffss
           <img src='http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg'>
           </img>
       </div>
      <div>
          More stufffss
          <img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
          </img>
      </div>
      <div>
          Even more stufffss
          <img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
          </img>
      </div>
    </div>
</nav>

CSS:

body {
    font: normal 1.0em Arial, sans-serif;
    background: #A8CBFF;
}

nav {
    font-size: 3.0em;
    line-height: 1.0em;
    color: white;

    width:6em;
    height: 9.0em;

    position:absolute;
    top:0; bottom:0;
    margin:auto;
    left: -4.5em;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    background-color: blue;
    height: 1.0em;
    padding: 0.25em;
    position: relative;

    border-top-right-radius: 0.75em;
    border-bottom-right-radius: 0.75em;

    -webkit-transition: -webkit-transform 500ms, background-color 500ms, color 500ms;
    transition: transform 500ms, background-color 500ms, color 500ms;
}

nav ul li:nth-child(1) { background-color: #00aced;}
nav ul li:nth-child(2) { background-color: #3b5998;}
nav ul li:nth-child(3) { background-color: #517fa4;}
nav ul li:nth-child(4) { background-color: #007bb6;}
nav ul li:nth-child(5) { background-color: #cb2027;}
nav ul li:nth-child(6) { background-color: #ea4c89;}

nav ul li.hovered {
    background-color: #C1232D;
    -webkit-transform: translateX(4.5em);
    transform: translateX(4.5em);
}

nav ul li span {
    display:block;
    font-family: Arial;
    position: absolute;
    font-size:1em;
    line-height: 1.25em;
    height:1.0em;
    top:0; bottom:0;
    margin:auto;
    right: 0.16666666666667em;
    color: #F8F6FF;
}

a {
    color: #FFF;
    text-decoration: none;
}

/*new*/
#menuRight{
    height:400px;
    overflow:hidden;
    position:relative;
    left:250px;
}
#menuRight div{
    height:100%;
}
#menuRight img{
    width:100%;
    height:auto;
}

JS:

var height, index, prevIndex

$('nav ul li').mouseover(function(){
    //Set the aesthetics (similar to :hover)
    $('nav ul li').removeClass('hovered');
    $(this).addClass('hovered');

    //Gets relevant data required for scrolling of menuRight    
    height = $("#menuRight").css("height").replace('px','');
    index = $(this).index();

    //If the category button (from the navlist) has changed
    if (index != prevIndex){
        $("#menuRight").stop(); //Stop animation queues
        $("#menuRight").animate({"scrollTop":height*index}, 400, 'easeOutBounce');
        prevIndex = index;
    }
});

To install jQuery UI (required for easing), include this in your HTML tags:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>