首页【前端实例教程】使用 HTML CSS 和 JavaScript 创建导航栏+下拉选择框菜单

【前端实例教程】使用 HTML CSS 和 JavaScript 创建导航栏+下拉选择框菜单

时间: 2024-09-30 11:13:42 浏览: 58

创建一个简单的导航栏加上下拉选择框菜单，通常需要HTML、CSS和JavaScript配合。以下是步骤和示例代码： **HTML (结构)：** ```html <!DOCTYPE html> <html lang="zh"> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <nav id="navbar"> <ul class="menu"> <li><a href="#">主页</a></li> <li class="dropdown"> <a href="#" class="dropbtn">产品分类</a> <div class="dropdown-content"> <a href="#">类别1</a> <a href="#">类别2</a> <a href="#">更多...</a> </div> </li> <li><a href="#">关于我们</a></li> </ul> </nav> <script src="script.js"></script> </body> </html> ``` **CSS (样式)：** (styles.css) ```css #navbar { background-color: #333; } .menu { list-style-type: none; padding: 0; margin: 0; } .menu li { display: inline-block; position: relative; } .dropbtn { color: white; padding: 16px; background-color: inherit; font-size: 16px; border: none; cursor: pointer; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown:hover .dropdown-content { display: block; } ``` **JavaScript (交互)：** (script.js) ```javascript document.querySelector('.dropbtn').addEventListener('click', function() { this.classList.toggle('active'); this.nextElementSibling.classList.toggle('show'); }); ``` 这个例子中，当用户点击“产品分类”按钮时，会显示下拉菜单。`.active`类用于切换悬停效果，`.show`类则用于控制下拉菜单的显示。

阅读全文