gpt4 book ai didi

jquery - 对齐 css 汉堡菜单

转载 作者:行者123 更新时间:2023-11-28 03:14:41 26 4
gpt4 key购买 nike

我正在我的网站 (www.aaronvigal.com) 上工作,我无法让我的菜单按钮对齐。我有一个白色的 DIV,我希望我的菜单按钮位于 Angular 落。

DIV 的宽度为 80%,这使得它很难处理。实际的主体有一个列表,其中一个 div 实际上看起来像它上面的主体,当点击菜单按钮时它会滑过,以便显示列表(导航)。我是 HTML/CSS 的新手,所以如果您真的可以重新编写代码而不是告诉我怎么做,那就太好了!代码贴在下面,你可以在 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:

    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;
}

最佳答案

这就是您要找的吗?

https://jsfiddle.net/xqenh54c/1/

我把按钮移到了“main”里面:

<div class="site-wrap">
<div class="bar"> </div>
<div class="main">
<label for="nav-trigger"></label>
</div>
</div>

我给“main”添加了一个相对位置:

.main{
position: relative;
}

然后在按钮上将位置设置为绝对:

label[for="nav-trigger"] {
position: absolute;
left: 0;
top: 0;
}

因此按钮的位置是绝对的,相对于“main”。

关于jquery - 对齐 css 汉堡菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28788931/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com