汉堡菜单无法消失

时间：2020-08-31 22:58:08

标签： html css

我的网站的汉堡包图标无法消失并在需要时显示。

我注释掉“显示：无；”在媒体屏幕文件中，但这不起作用。同样在.nav-con中，我用css样式设置了汉堡包图标

代码笔代码 https://codepen.io/JengaSneaky/pen/GRZvyqp

HTML 

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;900&family=Roboto+Condensed:wght@700&display=swap" rel="stylesheet">

  <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/javascript.js"></script>
  <script type="text/javascript" src="js/hamburger.js"></script>
  <script type="text/javascript" src="js/typing-effect.js"></script>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/animation.css">
  <link rel="stylesheet" href="css/media-screen.css">
  <link rel="stylesheet" href="css/hamburger.css">
  <link rel="stylesheet" href="css/button-arrow.css">

  <title>The HTML5 Herald</title>
</head>
<body>
    <!--navbar-->
    <header class="main-h">
        <div class="container-header">
            <label class="logo">HTM.</label>
            <div class="nav-con">
                <div id="nav-icon4">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
            <nav>
                <ul>
                    <li><a href="#">My Work</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact Me</a></li>
                </ul>
                
            </nav>
        </div>
    </header>
    <!--navbar-->

    <!-- Starting-menu-->
    <section id=hero>
        <div class="hero-1">
            <div class="hero container">
                <div class="hero-container">
                    <div class="wrap-h">
                        <div class="wrap-h-txt">
                            <h1 class="typing-effect-container">
                                <span class="txt-type" data-wait="3000" data-words='["Effiency", "User Experience", "Simple"]'></span><span class="cursor"></span>
                            </h1>
                            <h1>Program-<br> mer</h1>
                            <p>Hello, nice to meet u!<br>My name is Hugo</p>
                            <div class="button-h">
                                <a href="javascript:;">
                                    <svg class="icon-arrow before">
                                        <use xlink:href="#arrow"></use>
                                    </svg>
                                    <span class="label">Let's talk</span>
                                    <svg class="icon-arrow after">
                                        <use xlink:href="#arrow"></use>
                                    </svg>
                                </a>
                                
                                <svg style="display: none;">
                                  <defs>
                                    <symbol id="arrow" viewBox="0 0 35 15">
                                      <title>Arrow</title>
                                      <path d="M27.172 5L25 2.828 27.828 0 34.9 7.071l-7.07 7.071L25 11.314 27.314 9H0V5h27.172z "/>
                                    </symbol>
                                  </defs>
                                </svg>
                            </div>
                        </div>
                        <div class="main-pic-c"><img class="main-pic" src="images/Programming-amico.png"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End-->

    <!-- my work -->
    <div class="work-body">
        <section class="work-container">
            <a class="down-pointer" href="#"><span class="left"></span></a>
            <div class="work-category">
                <button id="web-scraping" class="">Web Scraping</button>
                <button id="web-design" class="">Web Design</button>
                <button id="web-animation" class="">web animation</button>
            </div>
            
            <div class="wrap">
                <div class="work-block-container">
                    <div class="work-block" id="web-s"></div>
                    <div class="work-block" id="web-d"></div>
                    <div class="work-block" id="web-s"></div>
                    <div class="work-block" id="web-d"></div>
                    <div class="work-block" id="web-d"></div>
                    <div class="work-block" id="web-a"></div>
                </div>
            </div>
            <div class="block-x">
                <div class="block-x-wrap">
                    <div class="block-x-1"></div>
                    <div class="block-x-1"></div>
                    <div class="block-x-1"></div>
                </div>
            </div>
    </div>
   
    
        
           
        
    </section>
    <!-- my work end -->

    <!-- about me -->
    <div class="container-about" id="">
        <div class="box-about box-a-1">
            <div class="nav-about">
                <img class="icons pic-1" src="images/profil.png">
                <img class="icons pic-2" src="images/profil.png">
                <img class="icons pic-3" src="images/profil.png">
            </div>
            <div class="text-about">
                <h1>General</h1>
                
            </div>
        </div>
    </div>
    <!-- about me  end-->

    <!-- contact me -->
    
    <div class="container-contact-me">
        <div class="wrapper-contact-me">
            <div class="card-1">
                <!--<img class="hand-left" src="images/hand-left.png">-->
                <div class="text-wrap">
                    <p>Email me at</p>
                    <a href="mailto:hugomith@gmail.com?subject=Contact_Me_from_qaisar.design">hugomith@<br>gmail.com</a>
                </div>
            </div>
            <div class="card-2">
                <!-- <img class="hand-right" src="images/hand-left.png"> -->
                <div class="text-wrap">
                    <input type="text" class="contact-form contact-form-1" placeholder="Your name">
                    <input type="text" class="contact-form contact-form-3" placeholder="Your email">
                    <textarea type="text" class="contact-form contact-form-2" placeholder="Your message"></textarea>
                    <button class="button"><a>Send</a></button>

                </div>
            </div>
        </div>
    </div>
    <!-- contact me end -->

</body>
</html>

CSS 

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}
html{
    font-size: 10px;
    font-family: sofia_pro;
}
a{
    text-decoration: none;
}

/* navbar */
header{
    position: fixed;
    top: 0px;
    max-height: 100px;
    z-index: 999;
    width: 100%;
    background: none;
    overflow: hidden;
    background: #FFF;
    padding: 45px 0px 25px;
    transition: all ease 0.5s;
}
header .container-header{
    max-width: 1200px;
    margin: 0px auto;
    padding-left: 8px;
    padding-right: 8px;
}

label.logo{
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 22px;
    display: inline-block;
    margin-right: 40px;
    color: #c8d6df;
}
header nav{
    display: inline-block;
}
header ul li{
    display: inline;
    margin: 0 10px;

}
header ul li a{
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #092545;
    font-weight: 500;
} 

nav #icon{
    color: #fff;
}

/* navbar end */
.container{
    min-height: 65vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#hero{
    background-color: #fff;
    position: relative;
    z-index: 1;
}
#hero .hero{
    max-width: 1200px;
    margin: 0 auto;
    /*padding: 0 50px;*/
    justify-content: flex-start;
}

.hero-container{
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin-top: 250px;
}
.wrap-h-txt{
    display: block;
    width: 500px;
    height: 600px;
    float: left;
}
.wrap-h{
    display: block;
    width: 1200px;
}


.typing-effect-container span{
    font-size: 35px;
    font-weight: 200;
    color: #092545;
}

.typing-effect-container{
    margin-left: 6.5px;
    margin-bottom: 20px;
    padding: 0;
}

.cursor{
    display: inline-block;
    width: 21px;
    height: 6px;
    background-color: #092545;
    margin-left: 2px;
    animation: blink .7s infinite;
}
@keyframes blink{
    0% { background-color: #092545;}
    /*49% { background-color: #092545;}*/
    50%{ background-color: transparent;}
    /*90%{ background-color: transparent;}*/
    100%{ background-color: #092545; }
}

#hero h1{
    display: block;    
    font-size: 130px;
    color: transparent;   
    font-family: 'Roboto Condensed', sans-serif;
    background-image: linear-gradient(to bottom, #f15b74, #ff6021);
    -webkit-background-clip: text;
    background-clip: text;
    line-height: 100px;
    font-weight: 900;

    float: left;
}

.main-pic-c{
    display: inline-block;
    width: 500px;
    height: 500px;
    margin-left: 100px;
    float: left;
}
.main-pic-c img{
    width: 100%;
    height: 100%;
}

#hero p{
    display: block;
    font-size: 17px;
    margin-top: 50px;
    color: black;
    font-family: 'Montserrat', sans-serif;
    float: left;
}
.button-h{
    display: block;
    height: 10px;
    width: 100%;
    float: left;
    margin-top: 50px;
}

/*animation*/
@keyframes text_reveal_box{
    50%{
        width: 100%;
        left: 0;
    }
    100%{
        width: 0;
        left: 100%;
    }
}
@keyframes box_reveal_box{
    50%{
        width: 100%;
        left: 0;
    }
    100%{
        width: 0;
        left: 100%;
    }
}
@keyframes text_reveal{
    100%{
        color: #fff;
    }
}
@keyframes text_reveal-h1{
    100%{
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        background-image: linear-gradient(to bottom, #f15b74, #ff6021);
    }
}
@keyframes box_reveal{
    100%{
        visibility: visible;
    }
}

.down-pointer{
    align-items: center;
    justify-content: center;
    display: flex;
    position: relative;
    z-index: 3;
    top: -160px;
    
}
.down-pointer .left{
    width: 20px;
    height: 20px;
    transition: .5s;
    float: left;
    box-shadow: -2px 2px;
    color: #32312F;
}
.down-pointer .left{
    transform: rotate(-45deg);
}


.work-body{

}

.work-container{
    background-color: #f6f6f6;
    height: 1000px;
    max-width: 1400px;
    border-radius: 20px 20px 20px 20px;
    margin: 0px auto;
    top: 50px;
    padding: 100px;
    position: relative;
    z-index: 2;
    text-align: center;
}
.work-category{
    align-items: center;
    justify-content: center;
    display: flex;
}
.work-category button{
    text-transform: capitalize;
    border: 1px solid #32312F;
    padding: 15px 30px;
    font-size: 1.5rem;
    font-weight: 600;
    border-radius: 3px;
    color: #32312F;
    outline: none;
    cursor: pointer;
}
#web-s{
    background-color: red;
}
#web-d{
    background-color: blue;
}

#web-a{
    background-color: yellow;
}

.work-category button.open{
    background-color: grey;
    color: #fff;
    border: 0;
}
.work-category button:hover{
    background-color: grey;
    color: #fff;
    border: 0;
}
#web-scraping{
    margin: auto 100px auto auto;
}
#web-design{
    margin: auto 0px auto 0px;
}
#web-animation{
    margin: auto auto auto 100px;
}
.work-block-container .hide{
    display: none;
}
.wrap{
    display: flex;
    width: 100%;
    height: 100px;
    justify-content: center;
    align-items: center; 
}
.work-block-container{
    display: inline-block;
    width: 100%;
    overflow: hidden;
    background-color:#f6f6f6;
    height: 600px;
    margin-top: 700px;
}
.work-block{
    display: block; 
    height: 180px;
    width: 32.3%; /* exta bredden för att fylla hela containern*/
    padding: 20px;
    border-radius: 3px;
    background-color: black;
    float: left;
    margin: 0.5%;
}

/*about me*/

.container-about{
    max-width: 1200px;
    margin: 0 auto;
    height: 900px;
    margin-top: 250px;
    
}
.container-about .box-about{
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background-color: red;
}
.container-about .box-a-1{
    float: left;
}

.container-about .box-about .text-about{
    padding: 50px;
}
.container-about .box-about .text-about h1{
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 25px;
    margin-top: 20px;
}

.container-about .box-about .nav-about{
    position: relative;
    left: 0;
    top: 10px;
    height: 200px;
    width: 50px;
    float: right;
    background-color: salmon;
    margin-top: 300px;
}
.container-about .box-about .nav-about .icons{
    width: 50px;
    height: 50px;
    background-color: black;
}
.container-about .box-about .nav-about .pic-2{
    margin-top: 30px;
}
.container-about .box-about .nav-about .pic-3{
    margin-top: 30px;
}

/*about me end */

/* contact me section */

.container-contact-me{
    height: 1000px;
    background: #fff;
}
.wrapper-contact-me{
    max-width: 1200px;
    margin: auto;
    margin-top: 45%;
    height: 700px;
}
.card-1{
    position: relative;
    height: 90%;
    width: 780px;
    background-color: #Ffc;
    float: left;
    z-index: 2;
    box-shadow: 5px 5px 10px -2px rgba(33,33,33,.3);    
    border-bottom-right-radius: 60px 5px;
    border:1px solid #E8E8E8;
    border-top: 0;
    padding-left: 130px;
}
.card-1:before  {
    display: block;
    content: ""; 
    background: rgba(227, 200, 114, 0.40);
    width: 300px;
    height: 28px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    border-radius: 6px/18px 0;
    position: absolute;
    top: -13px;
    left: 250px;
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg);
}
.card-1::after {
    left: 50px;
    right: 5px;
    transform: rotate(3deg); 
}
.card-1 .text-wrap{
    position: absolute;
    width: 70%;
    top: 28%;
    height: 250px;
}
.card-1 .text-wrap p{
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: black;
    font-weight: 500;
    padding-bottom: 40px;
}
.card-1 .text-wrap a{
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 70px;
    color: #18304d;
    line-height: 80px;
    border-bottom: 3px solid #2d6ae3;
}
.card-1 .text-wrap a:hover{
    border-bottom: 5px solid #2d6ae3;
}
.card-2{
    position: relative;
    height: 90%;
    width: 400px;
    background-color: #e7edf2;
    float: right;
    z-index: 1;
    right: 50px;
    top: 100px;
}
.card-2 .text-wrap{
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    padding: 50px;
    height: 100%;
}
.card-2 .contact-form{
    width: 100%;
    height: 80px;
    background-color: #dbe0e4;
    border-radius: 3px;
    border: 0;
    margin-top: 30px;
    color: black;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
}
.card-2 .contact-form::placeholder{
    color: black;
    font-family: 'Montserrat', sans-serif;
}
.card-2 .contact-form:focus{
    outline-width: 0;
}

.card-2 .contact-form-1{
    margin-top: 20px;
    padding: 20px;
}
.card-2 .contact-form-3{
    margin-top: 30px;
    padding: 20px;
}
.card-2 .contact-form-2{
    height: 200px;
    padding: 20px;
    
}
.card-2 button{
    height: 50px;
    width: 120px;
    margin-top: 30px;
    border: 0;
    background: #2d6ae3;
    border-radius: 3px;
}
.card-2 button a{
    color: #fff;
    font-size: 15px;
    font-family: 'Montserrat', sans-serif;
}

用于媒体屏幕的CSS（问题出在这里）

/*navbar*/
@media screen and (max-width: 900px){
    .nav-con{
        display: flex; /* tar inte bort display: none; fixa!*/
    }
    
    .main-h.open{
        background: #fc5f32;
    } 
    nav ul{
        background: #fc5f32;
        position: fixed;
        top: 100px;
        left: 0;
        bottom: 0;
        opacity: 0;
        visibility: hidden;
        text-align: center;
        padding-top: 30%;
    }
    .main-h.open nav ul{
        width: 100%;
        height: 100%;
        opacity: 1;
        visibility: visible;
        transition: all ease 0.3s;
    }
    .main-h.open label.logo{
        display: block;
    }
    .main-h.open header nav{
        display: block;
    }
    .main-h.open header ul li{
        display: block;
    }
    .main-h.open nav li{
        display: block;
        margin: 50px 0;
        line-height: 80px;
    }
    .main-h.open ul li a{
        font-size: 38px;
        border-bottom: 3px solid #2d6ae3;
    }  
}


@media screen and (max-width: 1640px){
    .work-container{
        margin: 0px 120px;
    }
    #hero .hero{
        margin: 0px 120px;
    }
    header .container-header{
        margin: 0px 120px;
    }
}

@media screen and (max-width: 1080px){
    .work-block{
        width: 49%;   
    }
    
}
@media screen and (max-width: 850px){
    .work-block{
        width: 100%;
    }
}

仅适用于汉堡图标的CSS（这是我要消失的“ .nav-con”的超CSS）


.nav-con{
    /*display: none;*/
    position: absolute;
    width: 50px;
    height: 50px;
    top: 40px;
    right: 40px;
}

#nav-icon4 {
    width: 30px;
    height: 30px;
    position: relative;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

#nav-icon4 span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: black;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

/* aniamtion*/

#nav-icon4 {
}

#nav-icon4 span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(2) {
  top: 10px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(3) {
  top: 20px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -3px;
  left: 8px;
}

#nav-icon4.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-icon4.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 19px;
  left: 8px;
}

1 个答案:

答案 0 :(得分：0)

不确定您说的话对不对，但是您使用display:none时，您的Codepen可以很好地满足您的需求：

@media screen and (max-width: 900px){
  .nav-con{
     display: none;
  }
}

确定要测试的最大宽度为900px的屏幕（等于或小于900px）吗？

如果只希望图标消失而不是整个导航消失，请改用#nav-icon4。

相关问题
最新问题