从跨度创建汉堡包导航：汉堡不可见

这是新手，首次创建汉堡包菜单。我们的老师希望我们用跨度来做。但是，当我在相应的断点处查看站点时，它似乎不工作。它应该出现在右上角。我搜索了这个，并找到了一些使用切换作为alt方式创建动画汉堡包菜单的惊人解决方案。我也使用检查元素，似乎也无法在那里找到它。但我想按照她的设想来完成这项工作。任何你可以摆脱这个光线将是惊人的！提前致谢。从跨度创建汉堡包导航：汉堡不可见

这里是我的HTML：

<!DOCTYPE HTML> 
<html> 
<head> 
    <link type="text/css" rel="stylesheet" href="css/reset.css"> 
    <!-- link type="text/css" rel="stylesheet" href="css/normalize.css"> Commented Out As Per In Clas TA Fix--> 
    <link href='https://fonts.googleapis.com/css?family=Merriweather:700,700italic|Oswald:700|Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'> 
    <link type="text/css" rel="stylesheet" href="css/style.css"> 
    <title>Startup Matchmaker</title> 
    <meta name="description" content="Startup Matchmaker"/> 
    <meta name="keywords" content="love, startup, matching"/> 
    <meta name="author" content="Chantel Zapata"/> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
</head> 

<body> 

<!-- HEADER --> 
<header> 
    <h1>Startup Matchmaker</h1> 
    <div class="hamburger"> 
     <span class="burgerlines"></span> 
     <span class="burgerlines"></span> 
     <span class="burgerlines"></span> 
    </div> 
    <nav> 
     <ul> 
      <li class="main-nav"><a class="main-item" href="developers/developers.html">DEVELOPERS</a></li> 
      <li class="main-nav"><a class="main-item" href="designers/designers.html">DESIGNERS</a></li> 
      <li class="main-nav"><a class="secondary-item" href="howitworks/howitworks.html">How It Works</a></li> 
      <li class="main-nav"><a class="secondary-item" href="ourteam/ourteam.html">Our Team</a></li> 
      <li class="main-nav"><a class="secondary-item" href="blog/blog.html">Blog<a></li> 
     </ul> 
    </nav> 
</header> 

<!-- QUOTE --> 
<div class="quote"> 
    <h2>Because two brains <del class="quote-taste">taste</del><span> </span><ins class="quote-are">are</ins> better than one.</h2> 
</div> 

<!-- MAIN AREA --> 
<div class="main-image"> 
    <div class="translucent-container"> 
     <h3>Meet Your Match!</h3> 
     <p class="container-para">Have a great idea for your product, but need help making it a reality? We're here to help. Startup Matchmaker is the best place for designers and developers to find each other.</p> 
     <button class="live-button" href="#">CREATE A PROFILE</button> 
    </div> 
</div> 

<!-- PROMO TOUTS --> 
<div class="all-promo-touts"> 
<div class="promo-tout fl"> 
    <h4>Create a Profile</h4> 
    <p>Are you a Designer? Developer? Put yourself out there so that others can find you!</p> 
    <button class="gray-button" href="#" id="signuppop">SIGN UP NOW</button> 
</div> 
<div class="vertical-line fl"> 
</div> 
<div class="promo-tout fl"> 
    <h4>Find a Developer</h4> 
    <p>Are you a Designer? Developer? Put yourself out there so that others can find you!</p> 
    <button class="gray-button" href="#">START YOUR SEARCH</button> 
</div> 
<div class="vertical-line fl"> 
</div> 
<div class="promo-tout-last fr"> 
    <h4>Find a Designer</h4> 
    <p>Are you a Designer? Developer? Put yourself out there so that others can find you!</p> 
    <button class="gray-button" href="#">START YOUR SEARCH</button> 
</div> 
</div> 

<!-- FOOTER --> 
<footer> 
    <p class="footer-text .clearfix:after">&copy; 2013 Startup Matchmaker. Made in NY.</p> 
</footer> 

<script type="text/javascript"> 
    document.getElementById('signuppop').onclick = function(){ 
     window.alert("Not taking sign ups yet. Sorry."); 
    } 
</script> 
</body> 
</html>

这里是我的CSS：

/* FONT REF 
font-family: 'Source Sans Pro', Arial, sans-serif; 
font-family: 'Oswald', Arial, sans-serif; 
font-family: 'Merriweather', 'Times New Roman', serif; */ 

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

.clear { 
    clear: both; 
} 
.fl { 
    float: left; 
} 
.fr { 
    float: right; 
} 
* { 
    -moz-box-sizing: border-box; /* Firexfox */ 
    -webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */ 
    box-sizing: border-box; /* IE */ 
} 
body { 
    background-color: #fff; 
    margin: 0 auto; 
    width: 100%; 
    font-size: 60px; 
} 

/* Header */ 
header { 
    background-color: #000; 
    width: 100%; 
    overflow: hidden; 
    border-bottom: 4px solid #fdf731; 
} 

h1 { 
    font-family: 'Merriweather', 'Times New Roman', serif; 
    font-size: 0.5em; 
    color: #fdf731; 
    float: left; 
    margin: 4%; 
} 

nav { 
    margin-right: 4%; 
    margin-top: 2%; 
    float: right; 
} 

.hamburger { 
    display: none; 
} 

@media only screen and (max-width:767px){ 
    .hamburger { 
    margin-right: 4%; 
    margin-top: 2%; 
    float: right; 
    background-color: white; 
    display: block; 
    } 
    .burgerlines { 
    height: 20px; 
    width: 20px; 
    } 
} 

.main-nav { 
    display: inline-block; 
    color: #000; 
} 

.main-item { 
    font-family: 'Oswald', Arial, sans-serif; 
    font-weight: bold; 
    font-size: 0.3em; 
    color: #fff; 
    text-decoration: none; 
} 
.main-item:hover { 
    font-family: 'Oswald', Arial, sans-serif; 
    font-weight: bold; 
    font-size: 0.3em; 
    color: #fdf731; 
    text-decoration: none; 
} 
.main-item:active { 
    font-family: 'Oswald', Arial, sans-serif; 
    font-weight: bold; 
    font-size: 0.3em; 
    color: #fff; 
    text-decoration: none; 
    background-color: #c6c6c6; 
} 
.secondary-item { 
    font-family: 'Source Sans Pro', Arial, sans-serif; 
    font-size: 0.3em; 
    color: #fff; 
    text-decoration: none; 
} 
.secondary-item:hover { 
    font-family: 'Source Sans Pro', Arial, sans-serif; 
    font-size: 0.3em; 
    color: #fff; 
    text-decoration: none; 
} 

@media only screen and (max-width:767px){ 
    .main-nav { 
     display: none; 
    } 
} 

/* Footer */ 
footer { 
    background-color: #000; 
    height: 70px; 
    margin-bottom: 0; 
    position: initial; 
} 
.footer-text { 
    color: #fff; 
    font-family: 'Source Sans Pro', Arial, sans-serif; 
    font-size: 0.3333333333333333em; 
    margin-left: 4%; 
    padding-top: 2%; 
} 


/* Quote */ 
.quote { 
    height: 70px; 
    background-color: #c6c6c6; 
    text-align: center; 
    margin: 0 auto; 
} 
h2 { 
    font-family: 'Merriweather', 'Times New Roman', serif; 
    font-style: italic; 
    font-weight: bold; 
    font-size: 0.4166666666666667em; 
    color: #000; 
    padding-top: 2%; 
} 
.quote-taste { 
    font-family: 'Merriweather', 'Times New Roman', serif; 
    font-style: italic; 
    font-weight: bold; 
    font-size: 1em; 
    color: rgba(0, 0, 0, 0.3); 
    text-decoration: line-through; 
    padding-top: 2%; 
} 
.quote-are { 
    font-family: 'Merriweather', 'Times New Roman', serif; 
    font-style: italic; 
    font-weight: bold; 
    font-size: 1em; 
    color: #000; 
    padding-top: 2%; 
    border-bottom: 2px solid #fdf731; 
    text-decoration: none; 
} 

/* Main Area */ 
.main-image { 
    height: 450px; 
    width: 100%; 
    background-image: url(../images/coworking.jpg); 
    background-size: cover; 
    background-position: center; 
} 

@media only screen and (min-width:430px) and (max-width:767px) { 
    .main-image { 
     height: 600px; 
    } 
} 

@media only screen and (max-width:429px){ 
    .main-image { 
     height: 620px; 
    } 
} 

.translucent-container { 
    width: 42%; 
    background-color: rgba(255, 255, 255, 0.85); 
    display: inline-block; 
    float: right; 
    margin-top: 4%; 
    margin-right: 4%; 
    padding: 3%; 
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.65); 
} 

@media only screen and (max-width:767px){ 
    .translucent-container { 
     width: 50%; 
     padding: 6%; 
    } 
} 

h3 { 
    font-family: 'Source Sans Pro', Arial, sans-serif; 
    font-weight: bold; 
    font-size: 0.5em; 
    color: rgba(0, 0, 0, 1); 
    padding: 6% 4% 2% 4%; 
} 
.container-para { 
    font-family: 'Source Sans Pro', Arial, sans-serif; 
    font-size: 0.3333333333333333em; 
    color: rgba(0, 0, 0, 1); 
    padding: 0 4% 2% 4%; 
    line-height: 28px; 
    margin-bottom: 4%; 
} 
.live-button { 
    background-color: #fdf731; 
    width: 100%; 
    padding: 4%; 
    border-radius: 5px; 
    text-decoration: none;s 
    text-align: center; 
    font-family: 'Oswald', Arial, sans-serif; 
    color: rgba(0, 0, 0, 1); 
    font-size: 0.3333333333333333em; 
    box-shadow: 0px 4px rgba(204, 202, 44, 1); 
    border: none; 
} 

/* Promo Area */ 
.all-promo-touts { 
    width: 100%; 
    padding: 40px 40px 40px 40px; 
    overflow: hidden; 
} 
.promo-tout { 
    width: 30%; 
} 

.promo-tout-last { 
    width: 30%; 
    margin-right: 0px; 
} 

.vertical-line { 
    height: 210px; 
    width: 2px; 
    background-color: #c6c6c6; 
    margin-right: 2.15%; 
    margin-left: 2.15%; 
} 

@media only screen and (max-width:767px){ 
    .all-promo-touts { 
     width: 100%; 
    } 
    .promo-tout { 
     width: 100%; 
    } 
    .promo-tout-last { 
     width: 100%; 
    } 
    .vertical-line { 
     width: 100%; 
     height: 2px; 
     margin: 10% 0; 
    } 
} 

h4 { 
    font-family: 'Merriweather', 'Times New Roman', serif; 
    font-weight: bold; 
    font-size: 0.4166666666666667em; 
    color: rgba(0, 0, 0, 1); 
    padding-bottom: 5px; 
    padding-top: 2%; 
} 
p { 
    font-family: 'Source Sans Pro', Arial, sans-serif; 
    font-size: 0.3333333333333333em; 
    color: rgba(0, 0, 0, 1); 
    line-height: 28px; 
    padding-bottom: 4%; 
} 
.gray-button { 
    background-color: #c6c6c6; 
    width: 100%; 
    padding: 4%; 
    border-radius: 5px; 
    text-decoration: none; 
    text-align: center; 
    font-family: 'Oswald', Arial, sans-serif; 
    color: rgba(0, 0, 0, 1); 
    font-size: 0.3333333333333333em; 
    box-shadow: 0px 4px rgba(180, 180, 180, 1); 
    border: none; 
} 


/* Coming Soon */ 
.coming-soon { 
    width: 100%; 
    text-align: center; 
    padding-top: 10%; 
    padding-bottom: 10%; 
    margin-bottom: 0px; 
    background-color: #c6c6c6; 
} 


/*------------------------------------------------ 
overflow hidden inital*/ 

/* Developer Page Boxes */ 
.dev-boxes { 
    width: 100%; 
    background-color: #c6c6c6; 
    overflow: hidden; 
    margin: 0 auto; 
} 
.dev-single-box { 
    height: 419px; 
    width: 297px; 
    background-color: #fff; 
    margin-top: 4%; 
    margin-left: 4%; 
    margin-bottom: 4%; 
    overflow: hidden; 
} 
.interior-box { 
    height: 280px; 
    width: 280px; 
    background-color: #c6c6c6; 
    margin-left: 9px; 
    margin-top: 9px; 
} 
.specs { 
    font-family: 'Oswald', Arial, sans-serif; 
    font-weight: bold; 
    font-size: 0.3333333333333333em; 
    color: rgba(0, 0, 0, .5); 
    text-decoration: none; 
    text-align: center; 
    padding-top: 130px; 
} 
.some-person { 
    font-family: 'Source Sans Pro', Arial, sans-serif; 
    font-size: 0.3333333333333333em; 
    color: rgba(0, 0, 0, 1); 
    line-height: 28px; 
    margin-left: 9px; 
    margin-top: 9px; 
    margin-bottom: 9px; 
} 

.contact-button { 
    background-color: #fdf731; 
    padding: 16px 80px 14px 80px; 
    border-radius: 5px; 
    text-decoration: none; 
    text-align: center; 
    margin-left: 40px; 
    font-family: 'Oswald', Arial, sans-serif; 
    color: rgba(0, 0, 0, 1); 
    font-size: 0.3333333333333333em; 
    box-shadow: 0px 4px rgba(204, 202, 44, 1); 
}

来源

2016-03-08 NicoleZ

建议您编辑标题以获得体面的回复。同时，指定您想要的内容以及确切位置 –

感谢您提供更准确的反馈。我很感激它，并将为我今后可能提出的任何问题保持这种特定的级别。 – NicoleZ

我觉得首先你应该从你的“.hamburger”类中删除背景颜色和比你应该试试下面的代码。

.hamburger span { 
     /* hamburger icon */ 
     position: relative; 
     display: inline-block; 
     width: 18px; 
     height: 2px; 
     background-color: rgba(255, 255, 255, 0.8); 
     vertical-align: middle; 
     margin-left: 10px; 
     -webkit-transform: translateY(-2px); 
     -moz-transform: translateY(-2px); 
     -ms-transform: translateY(-2px); 
     -o-transform: translateY(-2px); 
     transform: translateY(-2px); 
    } 
.hamburger span::before, .hamburger span::after { 
     content: ''; 
     display: inline-block; 
     position: absolute; 
     left: 0; 
     width: 100%; 
     height: 100%; 
     background-color: inherit; 
     -webkit-transition: all 0.2s; 
     -moz-transition: all 0.2s; 
     transition: all 0.2s; 
    } 
.hamburger span::before { 
    top: -6px; 
} 
.hamburger span::after { 
    bottom: -6px; 
}

而且你必须改变你的汉堡包菜单HTML象下面这样：

<div class="hamburger"> 
    <span></span> 
</div>

请找fiddle here

我希望这是你想要的。此外，您必须将事件附加到打开/关闭菜单。

来源

2016-03-08 07:43:12 Nimmi

这工作！非常感谢：） – NicoleZ

从跨度创建汉堡包导航：汉堡不可见

回答

相关问题