Question

新手，第一次创建汉堡包菜单。我们的老师希望我们用跨度来做。但是，当我在相应的断点处查看站点时，它似乎不起作用。它应该出现在右上角。我用谷歌搜索了这个并找到了一些惊人的解决方案，使用切换作为创建动画汉堡包菜单的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);
}

Answer 1

我认为首先应该从“.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

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

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

1 个答案: