[英]Aligning css hamburger menu
I am working on my website (www.aaronvigal.com) and I can not get my menu button to align. 我正在我的网站(www.aaronvigal.com)上工作,但无法使菜单按钮对齐。 I have a white DIV, where I would like my menu button to sit in the corner.
我有一个白色的DIV,我想将菜单按钮放在角落。
The DIV's width is 80% which makes it tough. DIV的宽度为80%,这使其很难承受。 The actual body has a list, with a div that actually looks like the body over it that slides over when the menu button is hit, in order to reveal the list (navigation).
实际的主体具有一个列表,其中的div实际上看起来像是它的主体,当单击菜单按钮时,该主体在其上滑动以显示该列表(导航)。 I am new to HTML/CSS so if you could actually re-do the code instead of telling me how to do it, that would be GREAT!
我是HTML / CSS的新手,所以如果您实际上可以重做代码而不是告诉我如何做,那就太好了! The code is posted below, and you can see what I am talking about on www.aaronvigal.com.
该代码发布在下面,您可以在www.aaronvigal.com上看到我在说什么。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link href="stylesheets/style.css" type="text/css" rel="stylesheet" />
<script src="/js/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="/js/script.js"></script>
<title>Home</title>
</head>
<body>
<ul class="navigation">
<li class="nav-item"><a href="index.html">Home</a></li>
<li class="nav-item"><a href="math.html">Math</a></li>
<li class="nav-item"><a href="band.html">Band</a></li>
<li class="nav-item"><a href="english.html">English</a></li>
<li class="nav-item"><a href="about.html">About Me</a></li>
</ul>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"></label>
<div class="site-wrap">
<div class="bar"> </div>
<div class="main">
</div>
</div>
</body>
Css: CSS:
body {
overflow-x: hidden;
margin: 0px;
background-color: #333333;
}
.main{
width: 80%;
color: black;
background-color: whitesmoke;
height: 600px;
margin: 23px auto 20px auto;
border-radius: 3px;
}
.navigation {
/* critical sizing and position styles */
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
/* non-critical appearance styles */
list-style: none;
background: dimgrey;
}
.nav-item {
/* non-critical appearance styles */
width: 200px;
border-top: 1px solid dimgrey;
border-bottom: 1px solid dimgrey;
}
.nav-item a {
/* non-critical appearance styles */
display: block;
padding: 1em;
background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(71,71,71,71) 100%);
color: white;
font-size: 1.2em;
text-decoration: none;
transition: color 0.2s, background 0.5s;
}
.nav-item a:hover {
color: orangered;
background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(253, 63, 5, 1) 100%);
text-shadow: 1px 2px black;
}
/* Site Wrapper - Everything that isn't navigation */
.site-wrap {
/* Critical position and size styles */
min-height: 100%;
min-width: 100%;
background-image: url("/images/1.jpg");
background-size: cover;
background-attachment: local;
background-repeat: no-repeat;
position: relative;
top: 0;
bottom: 100%;
left: 0;
z-index: 1;
}
.site-wrap-about {
/* Critical position and size styles */
min-height: 100%;
min-width: 100%;
background-image: url("/images/2.jpg");
background-size: cover;
background-attachment: local;
background-repeat: no-repeat;
position: relative;
top: 0;
bottom: 100%;
left: 0;
z-index: 1;
}
.site-wrap-band {
/* Critical position and size styles */
min-height: 100%;
min-width: 100%;
background-image: url("/images/3.jpg");
background-size: cover;
background-attachment: local;
background-repeat: no-repeat;
position: relative;
top: 0;
bottom: 100%;
left: 0;
z-index: 1;
}
.site-wrap-english {
/* Critical position and size styles */
min-height: 100%;
min-width: 100%;
background-image: url("/images/4.jpg");
background-size: cover;
background-attachment: local;
background-repeat: no-repeat;
position: relative;
top: 0;
bottom: 100%;
left: 0;
z-index: 1;
}
.site-wrap-math {
/* Critical position and size styles */
min-height: 100%;
min-width: 100%;
background-image: url("/images/5.jpg");
background-size: cover;
background-attachment: local;
background-repeat: no-repeat;
position: relative;
top: 0;
bottom: 100%;
left: 0;
z-index: 1;
}
/* Nav Trigger */
.nav-trigger {
/* critical styles - hide the checkbox input */
position: absolute;
clip: rect(0, 0, 0, 0);
}
label[for="nav-trigger"] {
/* critical positioning styles */
position: fixed;
right: 77%;
top: 23px;
z-index: 2;
/* non-critical apperance styles */
height: 48.5px;
width: 120px;
cursor: context-menu;
background-image: url("/images/menu.png");
background-size: contain;
}
/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
transition: left 0.5s;
}
.nav-trigger + label, .site-wrap-about {
transition: left 0.5s;
}
.nav-trigger + label, .site-wrap-band {
transition: left 0.5s;
}
.nav-trigger + label, .site-wrap-english {
transition: left 0.5s;
}
.nav-trigger + label, .site-wrap-math {
transition: left 0.5s;
}
.nav-trigger:checked + label {
left: 215px;
}
.nav-trigger:checked ~ .site-wrap {
left: 200px;
}
.nav-trigger:checked ~ .site-wrap-about {
left: 200px;
}
.nav-trigger:checked ~ .site-wrap-band {
left: 200px;
}
.nav-trigger:checked ~ .site-wrap-english {
left: 200px;
}
.nav-trigger:checked ~ .site-wrap-math {
left: 200px;
}
/* Micro reset */
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
html, body { height: 100%; width: 100%; font-family: Helvetica, Arial, sans-serif; }
.bar{
width: 100%;
height: 3px;
background-color: orangered;
}
Is that what you're looking for ? 那是您要找的东西吗?
https://jsfiddle.net/xqenh54c/1/ https://jsfiddle.net/xqenh54c/1/
I moved the button inside "main": 我将按钮移到“主要”内部:
<div class="site-wrap">
<div class="bar"> </div>
<div class="main">
<label for="nav-trigger"></label>
</div>
</div>
I added a relative position to "main": 我在“主要”上添加了相对位置:
.main{
position: relative;
}
And set the position to absolute on the button: 并在按钮上将位置设置为绝对:
label[for="nav-trigger"] {
position: absolute;
left: 0;
top: 0;
}
The position of the button is therefore absolute, in relation to "main". 因此,相对于“主要”,按钮的位置是绝对的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.