堆栈内存溢出
  繁体   English   中英

对齐CSS汉堡菜单

[英]Aligning css hamburger menu

 原文  2015-03-01 01:08:23  7   1    jquery/ html/ css

问题描述

我正在我的网站（www.aaronvigal.com）上工作，但无法使菜单按钮对齐。 我有一个白色的DIV，我想将菜单按钮放在角落。

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

1 个解决方案

解决方案1
 0 已采纳  2015-03-01 01:43:19

那是您要找的东西吗？

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

我将按钮移到“主要”内部： 

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

我在“主要”上添加了相对位置： 

.main{
    position: relative;
}

并在按钮上将位置设置为绝对： 

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

因此，相对于“主要”，按钮的位置是绝对的。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 CSS动画汉堡菜单到X 汉堡菜单 jQuery HTML CSS 无响应 css : 汉堡菜单应该单独滚动 如何使用CSS汉堡菜单上下滑动移动菜单 CSS汉堡菜单不适合页面也没有滚动 纯 CSS 移动汉堡菜单不会关闭 onClick 的链接 悬停时仅对CSS动画的汉堡菜单图标没有单击 汉堡菜单关闭点击 用 JS 关闭汉堡菜单 Bootstrap汉堡菜单Jquery
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM