Question

我目前正在开始学习jquery，我想制作一个这样的菜单：

enter image description here

当按下时，3条变为[x] +将菜单自动向左滑动，如下所示：

我尝试了很多东西，但不幸的是，这是我可以在这里查看：

我还尝试使用:before/:after

制作白色偏斜线失败

如果有人能帮助我，我想要最简单的解决方案。

。
。
修改
好吧，我现在已经走了一半，我玩了一点BootStrap并按照我想要的方式得到了菜单+按钮（仍然不是100＆amp;确定如何）但是它有效，也找到了一个好的针并做了[x]的事情，但由于某种原因，[x]一直没有动画，而是停在中间（我更新了引脚，所以再次检查）仍然，我无法找到使菜单滑动+白线。。
。
编辑2：
完成菜单滑动和放大[x]，实际上[x]非常容易制作，我不知道为什么ppl会让它变得非常坚硬无论如何我会制作一个单独的笔也许它可以帮助别人，现在它只是倾斜的白线。。
。
编辑3：
完成了倾斜线“笔更新”，但无法找到总是将它始终保持在div的中间位置，是否有一个JS代码可以使偏斜采用窗口调整大小？

Answer 1

只有javascript

HTML：

<div id="left"></div>
<div id="right">
        <a href="#" class="menu-button">
          <span class="sr-only">Toggle Navigation</span>
          <span id="aa"></span>
          <span class="menu-bar bar2"></span>
          <span id="ba"></span>
        </a>
    <div id="menu-self">
        <nav id="menu">
          <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">PROJECTS</a></li>
            <li><a href="#">STUDIO</a></li>
            <li><a href="#">NEWS</a></li>
            <li><a href="#">CONTACT</a></li>
          </ul>
        </nav>
      </div>
</div>

的CSS：

body{
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
}
#left{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    right:200px;
    background: #e9eae2;
}
#right{
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    width:200px;
    background-color:#7acec3;
}
.menu-button {
    padding: 40px;
    border: 3px solid white;
    color: white;
    position: absolute;
    transition: all 0.5s ease-in-out;
    top:50px;
    left:50px;
    z-index: 10;
}
.clr {
background-color: #f8c255;
border-color: transparent;
}
.sr-only{
    display:none;
}
.menu-bar {
display: block;
position: relative;
background: #fff;
width: 24px;
height: 2px;
-webkit-transition: all 300ms;
transition: all 300ms;
margin: 0 auto;
}
.menu-bar + .menu-bar {
    margin-top: 5px;
}
.bar1a {
                top: 25%;
                transform: rotateZ(-45deg) translate(-5px,5px) scaleX(1.5);
}
.bar3a {
                bottom: 25%;
                transform: rotateZ(45deg) translate(-5px,-5px) scaleX(1.5);
}
.bar1b {
            top: 0;
            animation: topbar-back 500ms;
            animation-fill-mode: both;
            animation-play-state: initial !important;
        }
.bar3b {
            bottom: 0;
            animation: bottombar-back 500ms;
            animation-fill-mode: both;
            animation-play-state: initial !important;
}
#menu-self {
    position: absolute;
    top: 50px;
    right: 150px;
    width: 630px;
    overflow: hidden;
}
#menu {
    position: relative;
    right: -630px;
    background-color: #f8c255;
    transition: right 0.5s;
    height:74px;
    padding: 28px 0 0 20px;
}
li {
    display: inline-block;
    margin: 0 50px 0 0;
    list-style: none !important;
}
a {
    color: white;
    text-decoration: none !important;
}
a:hover {
    color: #4a1c02;
}

和javascript：

var D=document,
menu=D.getElementById('menu'),
menu_button=D.getElementsByClassName('menu-button')[0],
bar2=D.getElementsByClassName('bar2')[0],
aa=D.getElementById('aa'),
ba=D.getElementById('ba');
menu_button.onclick=onclick;
function onclick(){
    if(menu.style.right == "-630px"){
menu.setAttribute('style', 'right:0px;');
menu_button.className += " clr";
bar2.style.opacity='0';
aa.className='menu-bar bar1a';
ba.className='menu-bar bar3a';
    }
    else{
menu.setAttribute('style', 'right:-630px;');
menu_button.className="menu-button";
bar2.style.opacity='1';
aa.className='menu-bar bar1b';
ba.className='menu-bar bar3b';
    }
}
onclick();

动画菜单按钮时滑动菜单

1 个答案: