汉堡菜单固定在右下方，引导程序

Question

我一直在寻找引导程序中移动菜单中的一张幻灯片，我能得到的最接近的是这个https://codepen.io/erikterwan/pen/EVzeRP ,但是我无法使其从右向左打开在右下角有这个汉堡包，有什么主意吗？

Answer 1

这将有点棘手，因为创建者写道：

太糟糕了，菜单必须位于按钮内部

但是，嘿，这纯粹是CSS魔术。

要添加的代码是

/*
 * This move all the navbar to right because the ul is inside the button
 */
#menuToggle{
    position:fixed;
    left: calc(100vw - 70px);
    top:calc(100vh - 50px);
}

/*
 * This will position the menu
 */
#menu{
    top: calc(-100vh + 50px);
    left: 70px;
    margin: 0;
    margin-top: -100px;
    height: 100vh;
}

/*
 * Fade menu from the right
 */
#menuToggle input:checked ~ ul
{
    transform: translate(-100%, 0);
    opacity: 1;
}

/*
 * Correct the overflow
 */
 html{
     max-width: 100vw;
     overflow-x: hidden;
 }

 /* * Made by Erik Terwan * 24th of November 2015 * All rights reserved * * Modified by Alessandro Lodi * 5th of August 2017 * * If you are thinking of using this in * production code, beware of the browser * prefixes. */ body { margin: 0; padding: 0; /* make it look decent enough */ background: #232323; color: #cdcdcd; font-family: "Avenir Next", "Avenir", sans-serif; } a { text-decoration: none; color: #232323; transition: color 0.3s ease; } a:hover { color: tomato; } #menuToggle { display: block; position: relative; top: 50px; left: 50px; z-index: 1; -webkit-user-select: none; user-select: none; } #menuToggle input { display: block; width: 40px; height: 32px; position: absolute; top: -7px; left: -5px; cursor: pointer; opacity: 0; /* hide this */ z-index: 2; /* and place it over the hamburger */ -webkit-touch-callout: none; } /* * Just a quick hamburger */ #menuToggle span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background: #cdcdcd; border-radius: 3px; z-index: 1; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease; } #menuToggle span:first-child { transform-origin: 0% 0%; } #menuToggle span:nth-last-child(2) { transform-origin: 0% 100%; } /* * Transform all the slices of hamburger * into a crossmark. */ #menuToggle input:checked ~ span { opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: #232323; } /* * But let's hide the middle one. */ #menuToggle input:checked ~ span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); } /* * Ohyeah and the last one should go the other direction */ #menuToggle input:checked ~ span:nth-last-child(2) { opacity: 1; transform: rotate(-45deg) translate(0, -1px); } /* * Make this absolute positioned * at the top left of the screen */ #menu { position: absolute; width: 250px; margin: -100px 0 0 -50px; padding: 50px; padding-top: 125px; background: #ededed; list-style-type: none; -webkit-font-smoothing: antialiased; /* to stop flickering of text in safari */ transform-origin: 0% 0%; //transform: translate(-100%, 0); transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); } #menu li { padding: 10px 0; font-size: 22px; } /* * And let's fade it in from the left */ #menuToggle input:checked ~ ul { transform: translate(-100%, 0); opacity: 1; } #menuToggle{ position:fixed; left: calc(100vw - 70px); top:calc(100vh - 50px); } #menu{ top: calc(-100vh + 50px); left: 70px; margin: 0; margin-top: -100px; height: 100vh; } html{ max-width: 100vw; overflow-x: hidden; } 

 <nav role="navigation"> <div id="menuToggle"> <!-- A fake / hidden checkbox is used as click reciever, so you can use the :checked selector on it. --> <input type="checkbox" /> <!-- Some spans to act as a hamburger. They are acting like a real hamburger, not that McDonalds stuff. --> <span></span> <span></span> <span></span> <!-- Too bad the menu has to be inside of the button but hey, it's pure CSS magic. --> <ul id="menu"> <a href="#"><li>Home</li></a> <a href="#"><li>About</li></a> <a href="#"><li>Info</li></a> <a href="#"><li>Contact</li></a> <a href="https://erikterwan.com/" target="_blank"><li>Show me more</li></a> </ul> </div> </nav>