0
Für meine Website, ich mache ein Menü, ich versuche, das Hamburger-Symbol in einem anderen div, um einen schwarzen Hintergrund dafür zu bekommen, aber alles, was ich bekomme ist this. Ich auch, will der Hamburger und der Hintergrund, um auf der linken Seite zu sitzen. Weiß jemand, wie man das macht?Put div innerhalb Hintergrund div
var theToggle = document.getElementById('toggle');
// based on Todd Motto functions
// http://toddmotto.com/labs/reusable-js/
// hasClass
function hasClass(elem, className) {
return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
}
// addClass
function addClass(elem, className) {
if (!hasClass(elem, className)) {
elem.className += ' ' + className;
}
}
// removeClass
function removeClass(elem, className) {
var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' ';
if (hasClass(elem, className)) {
while (newClass.indexOf(' ' + className + ' ') >= 0) {
newClass = newClass.replace(' ' + className + ' ', ' ');
}
elem.className = newClass.replace(/^\s+|\s+$/g, '');
}
}
// toggleClass
function toggleClass(elem, className) {
var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, " ") + ' ';
if (hasClass(elem, className)) {
while (newClass.indexOf(" " + className + " ") >= 0) {
newClass = newClass.replace(" " + className + " ", " ");
}
elem.className = newClass.replace(/^\s+|\s+$/g, '');
} else {
elem.className += ' ' + className;
}
}
theToggle.onclick = function() {
toggleClass(this, 'on');
return false;
}body,
html {
margin: 0;
padding: 0;
}
video.home {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div.vid {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
footer {
background: #222020;
height: 50px;
position: fixed;
bottom: 0;
margin-bottom: 0.5em;
margin-bottom: 0.5em;
margin-left: 0.5em;
margin-right: 0.5em;
width: 99%;
}
p.copyright {
color: white;
text-transform: uppercase;
font-size: 15px;
}
div.footer {
float: left;
margin-left: 2em;
}
div.menuback {
background-color: #222020;
padding: 10px;
width: 50px;
height: 50px;
}
/* Important styles */
#toggle {
display: block;
width: 28px;
height: 30px;
margin: 30px auto 10px;
}
#toggle span:after,
#toggle span:before {
content: "";
position: absolute;
left: 0;
top: -9px;
}
#toggle span:after {
top: 9px;
}
#toggle span {
position: relative;
display: block;
}
#toggle span,
#toggle span:after,
#toggle span:before {
width: 100%;
height: 5px;
background-color: #fff;
transition: all 0.3s;
backface-visibility: hidden;
border-radius: 2px;
}
/* on activation */
#toggle.on span {
background-color: transparent;
}
#toggle.on span:before {
transform: rotate(45deg) translate(5px, 5px);
}
#toggle.on span:after {
transform: rotate(-45deg) translate(7px, -8px);
}
#toggle.on + #menu {
opacity: 1;
visibility: visible;
}
/* menu appearance*/
#menu {
position: relative;
color: #999;
width: 200px;
padding: 10px;
margin: auto;
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
text-align: center;
border-radius: 4px;
background: white;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
/* just for this demo */
opacity: 0;
visibility: hidden;
transition: opacity .4s;
}
#menu:after {
position: absolute;
top: -15px;
left: 95px;
content: "";
display: block;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 20px solid white;
}
ul,
li,
li a {
list-style: none;
display: block;
margin: 0;
padding: 0;
}
li a {
padding: 5px;
color: #888;
text-decoration: none;
transition: all .2s;
}
li a:hover,
li a:focus {
background: #1ABC9C;
color: #fff;
}
/* demo styles */
body {
margin-top: 3em;
background: #eee;
color: #555;
font-family: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif;
}
p,
p a {
font-size: 12px;
text-align: center;
color: #888;
}<header>
<a href="#menu" id="toggle"><span></span></a>
<div class="menuback">
<div id="menu">
<ul>
<li><a href="#home">Home</a>
</li>
<li><a href="#about">About</a>
</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</header>
<div class="vid">
<video class="home" preload="auto" autoplay="true" loop="loop">
<source src="Images/TransitionName.mp4" type="video/mp4">
<p>Video not supported</p>
</video>
</div>
<footer>
<div class="footer">
<p class="copyright">Copyright © 2017 WILLIAM CHEN</p>
</div>
</footer>