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>

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

1 个答案: