帶翻滾圖像的動畫側邊菜單

Question

我正在嘗試重新創建帶有靈感來自this live example的翻轉圖像的動畫側面菜單。

我有下面的代碼，想知道是否有任何可能性鏈接菜單，翻轉演示圖像像我們在上面顯示的例子以及如何。有什麼想法嗎？

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>