个人中心
gpt4 book ai didi

html - 从 Span : Hamburger not visible 创建汉堡导航

转载 作者：行者123 更新时间：2023-11-28 06:16:38 26 4
gpt4 key购买 nike

这是第一次创建汉堡菜单。我们的老师希望我们用跨度来做。但是，当我在相应的断点处查看站点时，它似乎不起作用。它应该出现在右上角。我用谷歌搜索了这个并找到了一些使用切换作为创建动画汉堡菜单的替代方法的惊人解决方案。我也使用了 inspect element，但似乎也找不到它。但我想按照她概述的方式完成这项工作。你能在这上面阐明的任何光都将是惊人的!提前致谢。

这是我的 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);
}

最佳答案

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

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

关于html - 从 Span : Hamburger not visible 创建汉堡导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35859360/

26 4 0
文章推荐： c++ - 指向 >> 运算符的 fstream 问题的指针？
文章推荐： ios - UITableViewCell 类中的预期声明
文章推荐： c++ - 在我的 Matrix4 类中使用一些用户定义的运算符的操作返回高值非常高的值
文章推荐： javascript - 如何在 mvc 4 按钮单击上显示 jquery 模式弹出窗口
行者123
个人简介

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

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