Question

我正在使用CSS制作下拉菜单。调整页面大小时，下拉菜单不起作用。当我单击菜单时它什么也没做。我也想知道，当我调整页面大小时，导航栏在调整大小后不会显示“关于”菜单。调整页面大小时，我不知道如何调整大小。

这是我第一次使用CSS和HTML。我很想向你们这里学习。

这是我的HTML代码

<head>

    <link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
    <link href="css/pj2.css" rel="stylesheet" type"text/css">
    <meta name="viewport" content="width-device-width, initial-scale=1">
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta charset= "UTF-8">
    <title>KeeNok</title>

</head>

<body>
<div class="wrap">

<!--Responsive menu-->
    <div class="topnav" id="myTopnav">
        <a href="#home" class="active">Home</a>
        <div class="dropdown">
                <button class="dropbtn">Events 
                  <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown-content">
                  <a href="#">Past Events</a>
                  <a href="#">Future Events</a>
                </div>
              </div> 
        <a href="#about">About</a>
        <a href="javascript:void(0);" class="icon" onclick="myfunction()">&#9776;</a>
    </div>

<!--Menu-->
    <div id="main_menu">
        <div class="logo_area">
            <a href="#"><img src="C:\Users\John\Documents\Other\Cooking\Kee Nok\graphics\KeeNokLogo.jpg" alt="logo"></a>
        </div>
        <div class="inner_main_menu">
            <ul id="menu">
                <li><a href="#">Events</a>
                    <ul>
                        <li><a href="#">Past Events</a></li>
                        <li><a href="#">Future Events</a></li>
                    </ul>
                </li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
    </div>

<!--Popup Photos-->
    <div class="thumbs">
        <div id="Mian Kham" href="#"><img src="C:\Users\John\Documents\Other\Cooking\Kee Nok\Photos\1\Mian Kham.png" alt="Mian Kham"></div>
        <div id="Gai Tod" href="#"><img src="C:\Users\John\Documents\Other\Cooking\Kee Nok\Photos\1\Gai Tod.png" alt="Gai Tod"></div>
        <div id="Tom Khao Pod" href="#"><img src="C:\Users\John\Documents\Other\Cooking\Kee Nok\Photos\1\Tom Khao Pod.png" alt="Tom Khao Pod"></div>
    </div>  

<footer></footer>
</div> 
</body

这是我的CSS代码

body {
    margin: auto;
    background: rgba(255, 255, 255, 0.945);
    font-family: 'Ubuntu', sans-serif;
    overflow: auto;
    height:100%;


}

.wrap {
    position: fixed;
    top: 0;
    left: 0;
    border: 20px solid #9fd7fd;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.inner_main_menu {
    margin: 0 auto;
    width: 1300px;

}

.inner_main_menu ul{
    margin: 60px;
    padding: 0;
    list-style: none;
    text-align: right;
    padding-top: 30px;
    z-index: 1;

}

.inner_main_menu ul li{
    float: none;
    display: inline-block;
    position: relative;

}

.inner_main_menu ul li:nth-child(1){
    float: left;
}



.inner_main_menu ul li a {
    color: #262626;
    font-size: 20px;
    text-transform: uppercase;
    text-decoration: none;
    display: block;
    padding: 10px 20px;
}

.inner_main_menu ul li a:hover {
    color: #eb3332;

}

.inner_main_menu ul li ul {
    position: absolute;
    top: 40px;
    left: 0;
    width: 200px;
    padding: 0;
    display: none;
    margin: 0; 
}

.inner_main_menu ul li:hover ul {
    display: block;
}

.inner_main_menu ul li ul li{
    float: left;

}

.inner_main_menu ul li ul li a{
    font-size: 15px;

}



#main_menu {
    width: 100%;
    position: relative;

}

.logo_area img{
   max-width: 300px;
    position: absolute;
    left: 50%;
    top: 0;
    content: " ";
    margin-left: -150px;
    text-align: center;

}

#main_menu:after {
    content: "";
    display: table;
    clear: both;
  }

.thumbs {   
    display: flex;
    justify-content: space-between;
    margin: 80px 0;
}

.thumbs img{   
    max-width: 300px;

}


.topnav {
    background-color:#555d61;
    overflow: hidden;
}

.topnav a {
    float:left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 16px;


} 

.active {

    color: black;
}

.topnav .icon {
    display: none;
}

.dropdown {
    float:left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    padding: 14px 16px;


}

.dropdown-content {
    display: none;
    position: absolute;
    background-color:#555d61;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;

}

.topnav a:hover {
    background-color: #aaadad; 
    color: black;


} 
.dropdown:hover .dropbtn {
    background-color:  #aaadad; 
    color: black;

}

.dropdown-content a:hover {
    background-color: #aaadad; 
    color: black;
}

.dropdown:hover .dropdown-content {
    display:block;
}

@media screen and (max-width: 600px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
      display: none;
    }
    .topnav a.icon {
      float: right;
      display: block;
    }
  }

  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
    }
  }

This is how my page look like before resizing

This is my page looks like after resizing

Answer 1

我在您的CSS中看到有一条评论写着：

当用户单击图标时，“响应式”类将使用JavaScript添加到topnav中。

我认为您缺少将类添加到导航所需的JavaScript。

它看起来像这样：

const icon = document.querySelector(".icon")
const nav = document.querySelector(".topnav")

icon.onclick = function() {
  nav.classList.toggle('responsive');
}

调整页面大小后，下拉菜单不起作用

1 个答案: