CSS原生实现下拉列表的两种方式

CSS伪类的一个非常重要的应用就是下拉菜单。

最近在学习中发现网上纯粹用CSS实现的下拉菜单主要有两种思路:一种是通过visibility属性的切换,另一种是基于display属性的切换。二者在大体的结构上是一致的,只是对于二级子菜单的隐藏和显示的实现策略上有所不同。

下拉菜单的HTML代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>CSS下拉菜单</title>  <!-- <link rel="stylesheet" type="text/css" href="nav1.css" /> -->  <!-- <link rel="stylesheet" type="text/css" href="nav2.css" /> -->  </head>  

<body>  <div class="menu">      <ul>          <li>              <a href="#">menu_0</a>              <ul>                  <li><a href="#">item_0</a></li>                  <li><a href="#">item_1</a></li>                  <li><a href="#">item_2</a></li>                  <li><a href="#">item_3</a></li>                  <li><a href="#">item_4</a></li>              </ul>          </li>          <li>              <a href="#">menu_1</a>              <ul>                  <li><a href="#">item_5</a></li>                  <li><a href="#">item_6</a></li>                  <li><a href="#">item_7</a></li>                  <li><a href="#">item_8</a></li>                  <li><a href="#">item_9</a></li>              </ul>          </li>          <li>              <a href="#">menu_2</a>              <ul>                  <li><a href="#">item_10</a></li>                  <li><a href="#">item_11</a></li>                  <li><a href="#">item_12</a></li>                  <li><a href="#">item_13</a></li>                  <li><a href="#">item_14</a></li>              </ul>          </li>          <li>              <a href="#">menu_3</a>              <ul>                  <li><a href="#">item_15</a></li>                  <li><a href="#">item_16</a></li>                  <li><a href="#">item_17</a></li>                  <li><a href="#">item_18</a></li>                  <li><a href="#">item_19</a></li>              </ul>          </li>          <li>              <a href="#">menu_4</a>              <ul>                  <li><a href="#">item_20</a></li>                  <li><a href="#">item_21</a></li>                  <li><a href="#">item_22</a></li>                  <li><a href="#">item_23</a></li>                  <li><a href="#">item_24</a></li>              </ul>          </li>      </ul>  </div>  <div style="clear: left;">Content!</div>  </body>  </html>  

在不添加CSS的情况下,下拉菜单实际上就是二级无序列表。在CSS中通过对子列表的隐藏与显示的操作来达到下拉的效果。

两种实现下拉的方法的共同点在于:

1.        必须将最外层的ul元素的padding属性设为0,以保证整个下拉菜单中的没有无序列表中的自动缩进。同时,将list-style-type设为none,以去除列表项前的标记。

2.        如果主菜单需要横向,则需要把li元素设置为浮动元素,即float: left。

3.        使二级子菜单呈一列的方法是将二级列表的ul元素和li元素设置为相同的宽度。

4.        必须把二级列表的ul元素的position属性为absolute,以保证将该元素及其子元素从文件流中去除,这样一来当二级菜单显示的时候不会影响下面的其它元素。

5.        下拉菜单后面的页面元素,需要把clear属性设置为left或者both。这是因为下拉菜单被设为了浮动元素,如果不这样做的话后面的页面元素的位置将会不恰当。

6.        需要通过伪类:link、:visited以及:hover来设置元素有焦点和没有焦点时的颜色状态等。

不同点如前所述,即是:当一级菜单项没有焦点的时候,方法一会把二级菜单的ul元素的visibility属性设为hidden,使整个二级菜单不可见;当有焦点的时候,需要把相应的二级菜单的visibility属性改为visible,使其可见。而方法二则将需要不可见的二级菜单ul元素的display元素设为none,当需要可见的时候改为block。

上述状态的切换均通过伪类来完成而不调用JavaScript。

详细代码如下:

nav1.css(通过切换visibility属性)

.menu {      font-family: Arial, Helvetica, sans-serif;      width: 455px;      margin: 0 auto;  }  

.menu ul {      padding: 0;      list-style-type: none;  }  

.menu ul li {      float: left;      width: 90px;      text-align: center;      line-height: 30px;      background: #FC0;      border: #fff 1px solid;      border-width: 0 1px 0 0;  

}  

.menu ul li a:link, .menu ul li a:visited {      text-decoration: none;      color: #000;  }  

.menu ul li:hover {      background: #F60;  }  

.menu ul li:hover a {      color: #fff;  }  

.menu ul li ul {      visibility: hidden;      position: absolute;      width: 90px;  }  

.menu ul li:hover ul li {      visibility: visible;      background: #F96;      color: #000;      width: 90px;  }  

.menu ul li ul li a:link, .menu ul li ul li a:visited {      color: #000;  }  

.menu ul li ul li:hover {      background: #39F;  }

nav2.css(通过切换display属性)

.menu {      font-family: Georgia, "Times New Roman", Times, serif;      margin: 0 auto;      width: 505px;  }  

.menu ul {      padding: 0;      list-style-type: none;  }  

.menu ul li {      float: left;  }  

.menu ul li a:link, .menu ul li a:visited {      background: #3CF;      color: #000;      text-decoration: none;      display: block;      width: 100px;      height: 30px;      text-align: center;  }  

.menu ul li:hover a {      background: #009;      color: #fff;      font-weight: bold;  }  

.menu ul li ul {      display: none;  }  

.menu ul li:hover ul {      display: block;      width: 100px;      position: absolute;  }  

.menu ul li ul li a:link, .menu ul li ul li a:visited {      background: #6FF;      color: #000;  }  

.menu ul li ul li:hover a {      background: #60F;      color: #F60;      font-weight: bold;  }

时间: 2024-10-12 15:52:47

CSS原生实现下拉列表的两种方式的相关文章

CSS中清除浮动的两种方式

在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: 1 <div class="father"> 2 <div class="div1">1</div> 3 <div class="div2">2</div> 4 <div class="div3

JS对象转URL参数(原生JS和jQuery两种方式)

转自:点击打开链接 现在的js框架将ajax请求封装得非常简单,例如下面: [javascript] view plain copy $.ajax({ type: "POST", url: "some.php", data: { name: "John", location: "Boston" } }).done(function( msg ) { alert( "Data Saved: " + msg )

[CSS] 子元素垂直居中的两种方式

1. 多个子元素水平并排,IE10以下失效 1 display: flex; 2 align-items: center; 3 justify-content: center; 2.多个子元素竖直排列,这种方式会导致margin失效,IE8以下失效 1 display: table-cell; 2 vertical-align: middle;

css清除浮动的两种方式(clearfix和clear)

最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中.两种方式怎么写都在base.css中. 在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都没清除浮动,导致经常会有div包不住子级的东西(经常一审查height=0).现利用两例子来巩固下. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"

jQuery开发插件的两种方式

最近挺多人写jQuery的,都是关于jQuery扩展方面的,使用方面的讲的比较多,但是关于详细的一个基础的过程讲的比较少一点,做web开发的基本上都会用到jQuery,本人就根据jQuery的使用经验讲讲插件开发.jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数是属于jQuery命名空间的函数),如果将jQuery看成一个类,那么就相当于给jQuery类本身添加方法.第二种是对象扩展的方式开发插件,即jQuery对象添加方法. 类扩展

【REACT NATIVE 系列教程之十三】利用LISTVIEW与TEXTINPUT制作聊天/对话框&&获取组件实例常用的两种方式

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2346.html 本篇Himi来利用ListView和TextInput这两种组件实现对话.聊天框. 首先需要准备的有几点:(组件的学习就不赘述了,简单且官方有文档) 1. 学习下 ListView: 官方示例:http://reactnative.cn/docs/0.27/tutorial.html#content

css如何实现一个文字两种颜色代码实例

css如何实现一个文字两种颜色代码实例:在实际应用中可能需要设置文本效果比较炫酷.有一种效果就是将一个文字设置为两种颜色,使用普通的方法肯定是无法实现.下面就分享一下实现此功能的代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/&qu

MongoDB的使用学习之(七)MongoDB的聚合查询(两种方式)附项目源码

先来张在路上-- 此项目是用Maven创建的,没有使用Maven的,自己百度.谷歌去:直接用Junit测试就行,先执行里面的save方法,添加10000条测试数据提供各种聚合查询等. 废话不多说,上干货-- 一.MongoDB数据库的配置(mongodb.xml) 以下是我自己的配置,红色字体请改为自己本机的东东,你说不懂设置端口,不会创建数据库名称,不会配置用户名密码,那有请查阅本系列的第4节(MongoDB的使用学习之(四)权限设置--用户名.密码.端口==),你说懒得设置,那就@#¥%--

ASP.NET Web API接受AngualrJS的QueryString的两种方式

ASP.NET Web API如何接受来自AngualrJS的QueryString呢?本篇体验两种方式. 第一种方式:http://localhost:49705/api/products?search=GDN 这种方式是QueryString原生的格式. 首先,把当前的域名和端口号放到一个自定义的module中去. 1 (function () { 2 "use strict"; 3 4 angular.module("custommodule", ["