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

最新推荐文章于 2023-04-15 10:30:46 发布
置顶 最新推荐文章于 2023-04-15 10:30:46 发布
阅读量562 收藏 1
点赞数 1
分类专栏： 前端 H5 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LX2018612/article/details/107725752
版权

二级菜单效果图：

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元/天 解锁文章
九零后阿尔法
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css实现列表下拉菜单_逐行：点击打开下拉列表和菜单的高级CSS技巧
cumi6497的博客
07-28 9469
css实现列表下拉菜单by David Piepgrass 由David Piepgrass 逐行：点击打开下拉列表和菜单的高级CSS技巧 (Line-by-line: advanced CSS tricks for click-to-open drop-down lists and menus) For as long as I can remember, there were always...
利用flex实现的二级导航栏
colorfulqq的博客
04-11 1324
Flex布局的出现是为了什么 在我自己看来，flex布局的出现是为了让我们在处理一些较小且较为复杂的网页布局而出现的，这种布局方式很灵活，容器内的子元素能够按照任意的布局方式进行相应的排列。 为什么我要采取flex的方式来写导航栏的原因 在没接触flex布局之前，我写导航栏都是利用float来写，其中有些很麻烦的地方，清除浮动什么的都是很扎心的一些操作，还会有一些兼容方面的问题，但是fl...
flex组件，功能强大的下拉框
11-27
自己编写的一个flex下拉框组件，功能比较强大，可以做到二级级联，三级级联，四级级联等。并且在初始化页面的时候，可以自动显示已选择的
flex学习之联动下拉框实现
aiyongay1的博客
11-27 148
Java代码 TbArea.java package com.zn.entity; import java.util.HashSet; import java.util.Set; /** * TbArea entity. * * @author MyEclipse Persistence Tools */ ...
flex 带按钮的下拉菜单
螃蟹的程序博客
05-17 1150
直接代码 定义一个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
比较Flex布局,Grid布局,Float布局实现下拉导航栏的区别
前端卷王小白的博客
04-15 449
Flex布局,网格(Grid)布局,浮动(Float)布局,下拉导航栏实现
Flexbox 实战：使用 Flexbox 轻松实现下拉导航菜单
熊宗的博客
11-09 1889
CSS3弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。对于许多应用程序，弹性盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。 浏览器对Flexbox的支持越来越好。使用它可以轻松实现一些复杂的UI用户界面，不需要任何的CSS或
用flex布局搭建的纯div下拉列表，请问下大家觉得有没有什么地方不妥啊。
weixin_42851540的博客
05-06 160
首先，我先表明下，我并不是发什么教程，我一直是一个人在自学（学了一个多月了，新人如有不妥之处，请谅解，欢迎指教），周围也没有什么人和我交流，没事就看看别人的代码，我就觉得别人代码好像很多的样子，下拉列表全部都是用表格的形式，我就觉表格好像和div差不多啊，而且你还要去把表格的一些默认形式去除掉，那代码不是很多吗?直接用div排列然后居中多好啊。 .from-and-put{ border-...
纯CSS实现的大型下拉菜单的示例代码
09-24
纯CSS实现的大型下拉菜单是一种常见的网页设计技术，它能有效地展示大量分类信息，而不会占用过多的页面空间。这种菜单在大型网站或者需要多层次导航的网站中尤其有用。本文将详细介绍如何仅使用CSS来创建这样的大型...
flex自定义多级系统菜单
01-28
在xml中配置好一级菜单的图片路径，二三级菜单名称，即可生成多级系统菜单
FLEX实现的导航菜单
01-09
里面包含源码及事例，效果类似QQ导航菜单，可实现子菜单、为菜单添加图片等功能
Flex导航菜单
03-22
NULL 博文链接：https://guangqiang.iteye.com/blog/1007618
react实现移动端下拉菜单的示例代码
11-21
在React中实现移动端下拉菜单，我们可以遵循组件化的原则，将整个下拉菜单分为两部分：顶部的选项（Tab）和下拉的内容面板。在这个示例中，技术栈包括React、Material UI和Ant Design Mobile。下面我们将详细讲解...
jquery实现黑色导航二级下拉菜单
06-06
本教程将深入探讨如何使用jQuery实现一个黑色主题的导航二级下拉菜单，为你的网站增添专业且吸引人的用户体验。 一、jQuery基础 jQuery是一个高效、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作...
Flex 实现右键菜单
09-22
本文将深入探讨如何在Flex环境中实现自定义的右键菜单，包括屏蔽浏览器的默认右键菜单，创建XML格式的多级菜单，以及设置菜单出现位置的自适应策略。 首先，我们需要了解Flex屏蔽浏览器系统右键的基本方法。在...
flex 博客阅读器 实现代码
10-29
### Flex博客阅读器实现知识点详解 #### 一、项目背景及环境配置 - **Flex**是一种用于构建桌面和移动设备的高性能、丰富的互联网应用程序(RIA)的开源框架。本项目旨在构建一个博客阅读器，利用Flex的技术优势实现...
flex 二级导航栏
weixin_34101229的博客
04-27 377
1、二级导航栏 代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;flex 布局实现 navbar&lt;/title&gt; &lt;style type="text/css"&gt; * {
Flex4组件教程:自定义两级导航菜单组件
jakeorion的专栏
04-11 3217
Flex4组件教程:自定义两级导航菜单组件Posted 四月 8th, 2011 by 郭少瑞Flex4郭少瑞<br />声明：本文为RIAMeeting原创文章，您可以自由转载，但请务必说明文章来源并保留原文链接，谢谢！<br />对于两级导航菜单，我们应该不会陌生，很多网站都使用了这个效果，如下面这张图片所示，当鼠标划过或点击一级菜单，会出现相应的二级菜单，也就是我们经常说的菜单联动效果。<br /><br />当然图片中的这个效果是基于HTML和JavaScript实现的，那么在Flex开发中，我们能
写一个游戏网页导航栏带下拉菜单
最新发布
06-09
好的，这里是一个简单的游戏网页导航栏带下拉菜单的HTML和CSS代码示例： HTML代码： ``` <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">游戏分类</a> <ul> <li><a href="#">角色扮演</a></li> <li><a href="#">动作冒险</a></li> <li><a href="#">射击游戏</a></li> <li><a href="#">模拟经营</a></li> </ul> </li> <li><a href="#">最新游戏</a></li> <li><a href="#">热门游戏</a></li> <li><a href="#">游戏评测</a></li> <li><a href="#">游戏攻略</a></li> <li><a href="#">游戏论坛</a></li> </ul> </nav> ``` CSS代码： ``` nav { background-color: #333; color: #fff; } nav ul { list-style: none; margin: 0; padding: 0; display: flex; } nav ul li { position: relative; flex: 1; text-align: center; } nav ul li a { display: block; padding: 1rem; text-decoration: none; color: #fff; } nav ul li:hover > ul { display: flex; } nav ul ul { display: none; position: absolute; top: 100%; left: 0; background-color: #333; width: 100%; } nav ul ul li { position: relative; flex: 1; text-align: center; } nav ul ul li a { display: block; padding: 1rem; text-decoration: none; color: #fff; font-size: 0.9rem; } nav ul ul ul { top: 0; left: 100%; } ``` 这个代码示例中，我们使用了HTML的`<nav>`标签来表示导航栏，然后使用了一个`<ul>`标签作为导航菜单的容器。每个导航菜单项都是一个`<li>`标签，而每个下拉菜单项也是一个`<ul>`标签，其内部的每个菜单项是一个`<li>`标签。使用CSS来设置导航栏和下拉菜单的样式，其中`display: flex;`属性用于实现菜单的横向排列，`position`属性用于设置下拉菜单的位置。在鼠标悬停在导航菜单项上时，下拉菜单会显示出来，这是通过`nav ul li:hover > ul`选择器来实现的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值