CSS3动画滑动/隐藏导航以影响其他元素

当我触发显示1时，我想要有1和2的平滑动画过渡。 我已经在这里完成了：http://codepen.io/jacksonbeale/pen/epjcs使用负顶边距，但问题是1的高度会根据导航中的项目数量而变化，所以这不会为我工作。

nav {
    margin-top:-95px;
    width:100%;
    box-sizing:border-box;
    z-index:5;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    &.showmenu {
      margin-top:0;
    }
  }

我目前的项目不允许使用jQuery，任何js都需要由其他开发人员编写。 我只能控制HTML和CSS。 我似乎已经遇到了这个问题，所以如果有人能够提供一个关于纯css方法来完成我所需要的建议，那将是非常棒的。

---

你可以这样做：

在菜单和内容周围添加一个容器

绝对地定位您的内容

然后，由于容器只有菜单的高度（内容不在流程中，且position:absolute; ），您可以使用translateY通过translateY(-100%) / translateY(0)来切换菜单的输入和输出，

DEMO

HTML：

<div class="test">
  <div><span class="menulink">Menu</span></div>
  <div class="content">
    <nav>
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Three</li>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Three</li>
      </ul>
    </nav>
    <div>content</div>
  </div>
</div>

CSS：（对不起，我不习惯SCSS）

.test {
  width:400px;
  position:relative;
  > div, nav {
    border:3px solid #CCC;
  }
  > div:first-child {
    height:30px;
    z-index:10;
    background:teal;
    position:relative;
    z-index:1;
    span {
      float:right;
      display:table;
      height:100%;
      &:hover {
        cursor:pointer;
      }
    }
  }
  nav {
    width:100%;
    box-sizing:border-box;
    z-index:5;
    &.showmenu {
      margin-top:0;
    }
  }
}
.content > div{
  min-height:200px;
    position:absolute;
    left:-3px; top:100%;
    width:100%;
  border:3px solid #ccc;
}
.content{
  z-index:0;
  transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
  -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.content.showmenu{
  transform: translateY(0);
  -webkit-transform: translateY(0);
}

jQuery：

$( ".menulink" ).click(function() {
  $( ".content" ).toggleClass( "showmenu" );
});

---

在您的项目中添加此代码。

jsfiddle演示

像这样设置CSS样式。

<style>
    .menu {
        max-width: 500px;
        background-color: #000;
    }
    .menu a{
        color: #fff;
        text-decoration: none;
    }
.menu ul{
        padding:0px;
        position:relative;
        z-index:999;            
}
    .menu > ul > li{
        display: inline;    
        position: relative;
    }
    .menu > ul > li a{
        display: inline-block;
        padding: 8px 15px;
    }
    .menu li ul{
        top: 120%;
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 0;
        width:100%;
        max-width: 150px;
        transition: all 0.5s ease 0s;
        -webkit-transition: all 0.5s ease 0s;
        background-color: rgba(0, 0, 0, 0.8);
    }
    .menu li ul li{
        position: relative;
        list-style: none;
    }        
    .menu li:hover > ul{
            opacity:1;  
            visibility:visible;
            top:100%;
    }
    .menu ul ul > li > ul{
        top: 0% !important;
        left: 120%;
    }
    .menu ul ul li:hover > ul{
        left: 100%;
    }
.no-padding{
        padding-left: 0px;
        padding-right: 0px;
    }

</style

并设置HTML代码就像这样。

<nav class="menu">
            <ul>
                <li><a href="#">Home</a>
                    <ul>
                        <li><a href="#">Submenu</a></li>
                        <li><a href="#">Submenu</a></li>
                        <li><a href="#">Submenu</a></li>
                        <li><a href="#">Submenu</a>
                            <ul>
                                <li><a href="#">Submenu</a></li>
                                <li><a href="#">Submenu</a></li>
                                <li><a href="#">Submenu</a></li>
                                <li><a href="#">Submenu</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">About</a></li>
                <li><a href="#">contact</a></li>
            </ul>
    </nav>

链接地址: http://www.djcxy.com/p/82079.html

上一篇: CSS3 animate slide/hide navigation to influence other elements

下一篇: debootstrap inside a docker container