堆棧內存溢出
  簡體   English   中英

對齊CSS漢堡菜單

[英]Aligning css hamburger menu

 原文  2015-03-01 01:08:23  4   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