Question

我试图制作幻灯片（从左到右）菜单，它似乎正在工作。
有没有办法可以推动＆＃34; showmenu＆＃34;打开菜单后向右转？现在它停留在它的位置，我不知道如何处理这个问题。

CSS：

.buttonMenu {
font-family:Arial;
font-weight:bold;
width:100%;
padding:10px;
background-color:rgba(0, 0, 0, 0.4);
border:0px;
color:white;
}
.buttonMenu:hover {
font-family:Arial;
font-weight:bold;
width:100%;
padding:10px;
background-color:rgba(0, 0, 0, 1);
border:0px;
color:white;
}
.buttonMenu:focus {
outline:0;
}
#showmenu {
border-top-right-radius:15px;
border-bottom-right-radius:15px;
font-weight:bold;
padding:5px;
padding-top:25px;
padding-bottom:25px;
background-color:black;
font-family:Arial;
color:white;
position:fixed;
top:45%;
left:0;
border-width:3px;
border-style:solid;
border-color:black;
border-left-width:0;
}
#showmenu:hover {
color:black;
background-color:white;
}
#menu {
display:none;
border:0;
border-right-width:2px;
border-style:solid;
border-color:rgba(0, 0, 0, 1);
top:0;
left:0;
height:100%;
width:300px;
background-color:rgba(0, 0, 0, 0.5);
position:fixed;
}
#accountDetails {
text-align:center;
font-family:Arial;
color:white;
padding:15px;
height:100px;
width:270px;
background-color:rgba(0, 0, 0, 0.4);
}
#profilePic {
vertical-align:middle;
border-radius:15px;
border-width:4px;
border-style:solid;
border-color:rgba(124, 252, 0, 1);
}
.black {
background-color:black;
color:black;
height:2px;
border:0;
}`

HTML：
<div id="menu"> <div id="accountDetails"> <img id="profilePic" width="100px" height="100px" src="">Account name</div> <hr class="black"> <button class="buttonMenu">HOME</button> <button class="buttonMenu">GAMES</button> <button class="buttonMenu">COMMUNITIES</button> <button class="buttonMenu">PLAYERS</button> </div> <div id="showmenu">M <br>E <br>N <br>U</div>

JQuery的：

    $(document).ready(function () {
    $('#showmenu').click(function () {
        $('#menu').toggle("slide");
    });
});

这里是JSFiddle：http://jsfiddle.net/sgf5f3w0/

提前致谢！

Answer 1

使用jquery.transfrom2d.js插件为#showmenu。

的CSS属性设置动画

从here下载插件并将其添加到您的HTML中。

Fiddle [已编辑]

上的演示

的JavaScript：

$(document).ready(function () {
    var cnt = 0;
    $('#showmenu').click(function () {
        if (cnt % 2 == 0) {
            $('#menu').animate({'left': '-2px'});
            $('#showmenu').animate({'left': '300px'});
        } else {
            $('#menu').animate({'left': '-302px'});
            $('#showmenu').animate({'left': '0px'});
        }
        cnt++;
    });
});

CSS：

#menu {
    display: block;
    border:0;
    border-right-width:2px;
    border-style:solid;
    border-color:rgba(0, 0, 0, 1);
    top:0;
    left:-302px;
    height:100%;
    width:300px;
    background-color:rgba(0, 0, 0, 0.5);
    position:fixed;
}

＆＃13;

$(document).ready(function () {
    var cnt = 0;
    $('#showmenu').click(function () {
        if (cnt % 2 == 0) {
            $('#menu').animate({'left': '-2px'});
            $('#showmenu').animate({'left': '300px'});
        } else {
            $('#menu').animate({'left': '-302px'});
            $('#showmenu').animate({'left': '0px'});
        }
        cnt++;
    });
});

＆＃13;

.buttonMenu {
    font-family:Arial;
    font-weight:bold;
    width:100%;
    padding:10px;
    background-color:rgba(0, 0, 0, 0.4);
    border:0px;
    color:white;
}
.buttonMenu:hover {
    font-family:Arial;
    font-weight:bold;
    width:100%;
    padding:10px;
    background-color:rgba(0, 0, 0, 1);
    border:0px;
    color:white;
}
.buttonMenu:focus {
    outline:0;
}
#showmenu {
    border-top-right-radius:15px;
    border-bottom-right-radius:15px;
    font-weight:bold;
    padding:5px;
    padding-top:25px;
    padding-bottom:25px;
    background-color:black;
    font-family:Arial;
    color:white;
    position:fixed;
    top:45%;
    left:0;
    border-width:3px;
    border-style:solid;
    border-color:black;
    border-left-width:0;
}
#showmenu:hover {
    color:black;
    background-color:white;
}
#menu {
    display: block;
    border:0;
    border-right-width:2px;
    border-style:solid;
    border-color:rgba(0, 0, 0, 1);
    top:0;
    left:-302px;
    height:100%;
    width:300px;
    background-color:rgba(0, 0, 0, 0.5);
    position:fixed;
}
#accountDetails {
    text-align:center;
    font-family:Arial;
    color:white;
    padding:15px;
    height:100px;
    width:270px;
    background-color:rgba(0, 0, 0, 0.4);
}
#profilePic {
    vertical-align:middle;
    border-radius:15px;
    border-width:4px;
    border-style:solid;
    border-color:rgba(124, 252, 0, 1);
}
.black {
    background-color:black;
    color:black;
    height:2px;
    border:0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="menu">
    <div id="accountDetails">
        <img id="profilePic" width="100px" height="100px" src="">Account name</div>
    <hr class="black">
    <button class="buttonMenu">HOME</button>
    <button class="buttonMenu">GAMES</button>
    <button class="buttonMenu">COMMUNITIES</button>
    <button class="buttonMenu">PLAYERS</button>
</div>
<div id="showmenu">M
    <br>E
    <br>N
    <br>U</div>
<script type="text/javascript" src="https://raw.githubusercontent.com/louisremi/jquery.transform.js/master/jquery.transform2d.js"></script>
</body>

＆＃13;

Answer 2

我不会为此安装第三方插件。我只想添加/删除左边缘。这很简单。您可以向CSS添加转换，而无需额外的第三方插件。

DEMO http://jsfiddle.net/sgf5f3w0/9/

    $(document).ready(function () {
        $('#showmenu').click(function () {
            $('#menu').toggleClass("showMenuNav");
        });
    });

在开始菜单上将div推到右侧

2 个答案:

Fiddle [已编辑]

的JavaScript：

CSS：