个人中心
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
文章推荐： php - Symfony2- Twig : HTML Tag
文章推荐： html - 将固定侧边栏和流动内容与推拉类相结合
文章推荐： html - 如何延迟此网页上某些云的开始？
文章推荐： C++ Allegro 视觉故障
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com