初次写博客之运用flex实现下拉菜单

最新推荐文章于 2023-04-15 10:30:46 发布

置顶

九零后阿尔法

最新推荐文章于 2023-04-15 10:30:46 发布

阅读量641

点赞数 1

分类专栏：前端 H5 文章标签： css html

本文链接：https://blog.youkuaiyun.com/lx2018612/article/details/107725752

版权

这篇博客介绍了如何使用CSS的Flex布局来实现一个简单的下拉菜单。通过修改不同的CSS属性，展示了初始状态、鼠标悬停一级标题以及二级标题显示时的样式变化。HTML和CSS代码示例详细说明了菜单的结构和样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

二级菜单效果图：

1.初始状态下的样式以及布局：

2.当鼠标放在一级标题上时的效果，字体和背景色改变

3.鼠标放到二级标题时显示的效果

HTML代码：

<!DOCTYPE html>
<html>
<head>
<link href="../css/erji_flex.css" rel="stylesheet">
<meta charset="utf-8">
<title>flex 导航栏</title>
</head>
<body>
<div id="flex_container">
<div id="flex_erji"><a href="#">菜单一</a>
<li>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

九零后阿尔法

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序实现循环列表下拉功能（点击事件）

Xinacridine的博客

09-15

3075

点击不同列表下拉直接上代码 wxml <view class="sele" bindtap='bindShowMsg' data-id="{{item.user_id}}" wx:for='{{list}}' wx:for-item="item" wx:key='index'> <view class="sele_c"> <view class="sele_imag"> <image src="{{item.user_image}}">&l

微信小程序自定义长列表实现下拉刷新上拉加载

FVZ的博客

01-31

966

之前写项目遇到要用长列表由于数据量比较多所以就优先考虑小程序原生的组件微信小程序官方提供了recycle-view长列表组件（长列表组件）但是给的实例不是很清楚，所以就自己写了一个 index.js import request from '../../../utils/request' Page({ /** * 页面的初始数据 */ data: { start: 1, //起始页 pageSize: 10, //每页的数据 dataList: [], //

参与评论您还未登录，请先登录后发表或查看评论

flex组件，功能强大的下拉框

11-27

自己编写的一个flex下拉框组件，功能比较强大，可以做到二级级联，三级级联，四级级联等。并且在初始化页面的时候，可以自动显示已选择的

flex Menu(下拉菜单)的实现

螃蟹的程序博客

05-17

1155

直接代码定义一个Menu组件 <mx:Menu xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" > <![CDATA[ im

flex 带按钮的下拉菜单

螃蟹的程序博客

05-17

1200

直接代码定义一个Button组件 <s:Button xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" click="showMenu(event)" fo

Flexbox 实战：使用 Flexbox 轻松实现下拉导航菜单

熊宗的博客

11-09

2024

CSS3弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。对于许多应用程序，弹性盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。浏览器对Flexbox的支持越来越好。使用它可以轻松实现一些复杂的UI用户界面，不需要任何的CSS或

flex学习之联动下拉框实现

aiyongay1的博客

11-27

177

Java代码 TbArea.java package com.zn.entity; import java.util.HashSet; import java.util.Set; /** * TbArea entity. * * @author MyEclipse Persistence Tools */ ...

美团的下拉菜单

08-25

在网页设计和开发中，下拉菜单是一种常见的交互元素，它提供了一种高效的方式来组织和展示大量的导航选项，而不会占用过多的屏幕空间。美团作为知名的在线服务平台，其网站和APP上的下拉菜单设计无疑是一个值得学习...

flex横向带图下拉列表和联动下拉列表

fengzheng0603的专栏

01-30

218

flex横向带图下拉列表和联动下拉列表 效果图：联动效果图：代码： <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spa...

一个FLEX4 二级联动 下拉菜单的例子

hboje90q

07-02

249

　　发现FLEX4和3 有一些细微的不同，直接给dataProvider赋值会出现类型转换错误！！！ flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> ...

FLEX实现的导航菜单

01-09

里面包含源码及事例，效果类似QQ导航菜单，可实现子菜单、为菜单添加图片等功能

flex复选框和下拉列表的几种用法整理

10-27

自己闲暇时间整理了有关复选框可下拉的几种用法，在这里与大家分享下，感兴趣的朋友可以参考下哈，希望对大家有所帮助

flex自定义多级系统菜单

01-28

在xml中配置好一级菜单的图片路径，二三级菜单名称，即可生成多级系统菜单

Flex导航菜单

03-22

NULL 博文链接：https://guangqiang.iteye.com/blog/1007618

比较Flex布局,Grid布局,Float布局实现下拉导航栏的区别

前端卷王小白的博客

04-15

653

Flex布局,网格(Grid)布局,浮动(Float)布局,下拉导航栏实现

用flex布局搭建的纯div下拉列表，请问下大家觉得有没有什么地方不妥啊。

weixin_42851540的博客

05-06

191

首先，我先表明下，我并不是发什么教程，我一直是一个人在自学（学了一个多月了，新人如有不妥之处，请谅解，欢迎指教），周围也没有什么人和我交流，没事就看看别人的代码，我就觉得别人代码好像很多的样子，下拉列表全部都是用表格的形式，我就觉表格好像和div差不多啊，而且你还要去把表格的一些默认形式去除掉，那代码不是很多吗?直接用div排列然后居中多好啊。 .from-and-put{ border-...

Flex总结--实现文本框的输入下拉提示

Sean.Pu的专栏

07-14

1950

在很多时候我们要实现一个输入，显示提示并且可以从提示选择的功能，这是一种基于ComboBox 的变相实现，从服务器上动态获取 <!--[CDATA[ import mx.managers.PopUpManager; import mx.controls.Text; import mx.rpc.events.ResultEvent;

导航条下拉菜单的实现及思路

m0_63622279的博客

01-02

1520

导航条的导航项话，最简单的对于初学者就使用float浮动，使其导航项横向排列，当然如果学了flex,gird布局，这些会更简单实现。下拉菜单的思路其实就是其父盒子选择，从而使它的子盒子显示，并且还要将下拉菜单脱离文档流，从而自定义其宽高。好嘞，话不多说，上代码！ CSS部分今天的分享到此结束啦，各位uu，点个赞再走QAQ…

利用flex实现的二级导航栏

colorfulqq的博客

04-11

1438

Flex布局的出现是为了什么在我自己看来，flex布局的出现是为了让我们在处理一些较小且较为复杂的网页布局而出现的，这种布局方式很灵活，容器内的子元素能够按照任意的布局方式进行相应的排列。为什么我要采取flex的方式来写导航栏的原因在没接触flex布局之前，我写导航栏都是利用float来写，其中有些很麻烦的地方，清除浮动什么的都是很扎心的一些操作，还会有一些兼容方面的问题，但是fl...

flex布局实现下拉菜单

最新发布

01-14

### 如何使用 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">☰</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]。