嗨，各位码农们！今天，我们将，使用HTML、CSS和JavaScript创建一个完全响应式的下拉菜单。我们的目标是展示一个时尚、多功能的下拉菜单，能够在不同的屏幕尺寸下无缝适配，提升用户体验，而无需繁琐的教程。
概述：
在这个项目展示中，我们将深入介绍如何创建一个不仅外观吸引人，而且在各种设备上都能正常工作的下拉菜单。通过利用HTML搭建结构，CSS进行样式设计，以及JavaScript实现交互功能，我们将打造一个动态菜单，体现现代网页设计原则。
主要亮点：
HTML结构：我们将使用HTML为我们的项目打下基础，构建导航栏和下拉菜单组件的结构。
CSS样式：通过CSS，我们将为下拉菜单添加样式，确保它在任何屏幕上都看起来精美、专业。
JavaScript功能：利用JavaScript，我们将为下拉菜单注入交互性，使用户能够轻松浏览我们的网站。
让我们开始吧：
从HTML的简单开端到CSS和JavaScript的魔法，让我们展示菜单的演变过程。
下拉菜单 HTML 代码：
代码语言：html复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉菜单</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="navbar">
<div class="logo">
<img src="./navbar-icon.png" alt="">
</div>
<div class="toggle-btn">
<div class="icon"></div>
</div>
<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li class="submenu-wrapper">
<a href="#">技能<span> > </span>
</a>
<ul class="submenu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">React.js</a></li>
<li><a href="#">Node.js</a></li>
</ul>
</li>
<li><a href="#">背景</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
<script src="./script.js"></script>
</body>
</html>下拉菜单 CSS 代码：
代码语言：css复制@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*,
::before,
::after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html{
font-size:13px;
}
body{
font-family: "Poppins", sans-serif;
font-size:1rem;
background: #222f37;
color:#d6e0f9;
}
.navbar{
width:100%;
position:fixed;
top:0;
left:0;
background: #101d23;
padding:0 5%;
display:flex;
align-items: center;
justify-content: space-between;
}
.logo{
width:5rem
}
.logo img{
width:100%;
}
.menu{
list-style: none;
}
.menu li{
position: relative;
float:left;
}
.menu li a{
font-family: "Poppins", sans-serif;
font-size:1.2rem;
color:#d6e0f9;
display:block;
text-decoration: none;
padding:1rem 1.5rem;
}
.menu li a:hover{
background: #495ca8;
}
.submenu{
position: absolute;
left:0;
background: #101d23;
display:none;
transition: all .3s ease-in-out;
}
.submenu-wrapper:hover .submenu,
.submenu-wrapper:focus-within .submenu{
display: initial;
}
.submenu li{
width:100%;
border-top:.1rem solid #222f37;
list-style: none;
}
.toggle-btn {
display: none; /* Initially hide the toggle button */
z-index:1000;
}
.icon {
position: relative;
width: 1.5rem;
height: .8rem;
cursor: pointer;
z-index:100;
}
.icon::before {
top: 0;
right:0;
content: '';
position: absolute;
width: 2rem;
height: .2rem;
background-color: #d6e0f9;
transition: all 0.3s ease-in-out;
}
.icon::after {
bottom: 0;
right:0;
content: '';
position: absolute;
width: 1.5rem;
height: .2rem;
background-color: #d6e0f9;
transition: transform 0.3s ease-in-out;
}
/* Rotate the before and after lines to create the close icon effect */
.icon.active::before {
width:1.5rem;
transform: rotate(-45deg) translate(-0.21rem, 0.21rem);
}
.icon.active::after {
transform: rotate(45deg) translate(-0.21rem, -0.21rem);
}
@media (max-width: 991px){
.toggle-btn{
display: block;
}
.menu{
width:100%;
position:absolute;
top:100%;
left:0;
background: #101d23;
border-top: .1rem solid #222f37;
display:none;
}
.menu.active{
display:initial
}
.menu li{
width:100%;
border-top: .1rem solid #
222f37;
}
.submenu{
position: relative;
width:100%;
}
.submenu li{
background: #222f37;
border-top: .1rem solid #101d23;
}
.submenu li a{
padding-left:2rem;
}
}下拉菜单 JavaScript 代码：
代码语言：javascript复制const icon = document.querySelector('.icon');
const menu = document.querySelector('.menu');
function toggleNavbar() {
menu.classList.toggle('active');
icon.classList.toggle('active');
}
document.querySelector('.toggle-btn').addEventListener('click', function () {
toggleNavbar();
});这样一来，我们就完成了一个漂亮而功能强大的响应式下拉菜单！希望你们喜欢这个项目，也能够从中学到一些有用的技术。
我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！
