带有翻转图像的动画侧菜单

Question

我正在尝试使用从此实时示例中获得灵感的过渡图像来重新创建动画的侧菜单。

我有以下代码，想知道是否有可能链接菜单，将鼠标悬停在演示文稿图像上，就像上面显示的示例中那样，以及如何进行。 有什么想法吗？

 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

您可以尝试使用具有隐藏溢出的div，以及使用动画的.scrollTop。 在这里看到这个小提琴： 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;
    }
});

要安装jQuery UI（轻松执行），请在HTML标记中包括以下内容：

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