html - 汉堡菜单不能消失
问题描述
我的网站的汉堡包图标不能消失并在我想要的时候出现。
我注释掉了“显示:无;” 在媒体屏幕文件中,但这不起作用。同样在 .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”的 hte 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;
}
解决方案
不确定您是否正确地表达了您的问题,但是您的 codepen 可以很好地与您使用时所拥有的内容display:none
:
@media screen and (max-width: 900px){
.nav-con{
display: none;
}
}
您确定您一直在使用 max-width: 900px 屏幕进行测试,这意味着 900px 或更小?
如果您只想让图标消失而不是整个导航,请#nav-icon4
改用。
推荐阅读
- python - 在工作进程启动之前将数据放入输入队列时,工作进程在 requests.get() 上崩溃
- async-await - 从异步请求中获取 Http Response Header
- reactjs - React/ReduxForm:redux 表单中是否有验证重复名称的验证?
- angular - 使用 Oauth2 从 Outlook 日历 API 获取代码
- python - CodeHS 8.3.8:Word Ladder 还需要什么?
- java - Gradle 不会从存储库中导入 jarg
- ios - 使用 GMUKMLParser Google Maps iOS 从 url 解析 KML
- sql - 如何从 SQL 查询中找到预期结果
- javascript - 在 Passportjs 中刷新 JWT 令牌
- android - 用于重复字符串的 Android 自定义 lint