flex布局实现下拉菜单

### 如何使用 CSS Flexbox 创建响应式下拉菜单 为了创建一个既美观又实用的响应式下拉菜单，可以利用 CSS 的 `flex` 属性来管理子项的位置和排列方式。下面提供了一个基于 Flexbox 实现的简单例子。 #### HTML 结构 首先定义基本的HTML结构： ```html <div class="navbar"> <div class="nav-container"> <a href="#" class="logo">Logo</a> <ul class="nav-items"> <li><a href="#">Home</a></li> <li class="dropdown"> <a href="#" class="dropbtn">Services ▾</a> <ul class="dropdown-content"> <li><a href="#">Web Design</a></li> <li><a href="#">SEO Optimization</a></li> <li><a href="#">Social Media Marketing</a></li> </ul> </li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact Us</a></li> </ul> <!-- 汉堡按钮 --> <button class="hamburger">&#9776;</button> </div> </div> ``` #### 使用 Flexbox 进行样式设置 接着通过CSS中的Flex属性来进行布局设计： ```css /* 导航条整体 */ .navbar { background-color: #333; } .nav-container { max-width: 1200px; margin: auto; padding: 0 2rem; display: flex; justify-content: space-between; align-items: center; } .logo, .nav-items li a { color: white; text-decoration: none; } .nav-items { list-style-type: none; display: flex; } .nav-items li { position: relative; /* 用于定位下拉内容 */ padding-left: 1em; } ``` 对于下拉菜单的部分，则需特别处理其可见性以及过渡效果： ```css .dropdown-content { display: none; position: absolute; top: 100%; left: 0; min-width: 160px; box-shadow: 0px 8px 16px rgba(0,0,0,.2); z-index: 1; background-color: inherit; } .dropdown:hover>.dropdown-content { display: block; } .dropdown-content>li>a { padding: .5rem 1rem; display: block; } .dropdown-content>li>a:hover { background-color: darkgrey; } ``` 最后加入媒体查询以支持移动设备上的交互体验[^3]： ```css @media only screen and (max-width: 768px) { .nav-items { display: none; flex-direction: column; width: 100%; } .nav-items.active { display: flex; } .hamburger { display: inline-block; } } ``` JavaScript 可用来控制移动端点击汉堡图标的展开/收起行为: ```javascript document.querySelector('.hamburger').addEventListener('click', function() { document.querySelector('.nav-items').classList.toggle('active'); }); ``` 这样就完成了一个简单的、基于Flexbox技术的响应式下拉菜单的设计与实现过程[^1]。