前端下拉菜单的三种实现方法

第一种方式：（CSS实现）

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {  margin: 0;  padding: 0;}.nav {  background-color: #eee;  width: 600px;  height: 40px;  margin: 0 auto;}ul {  list-style: none;}ul li {  float: left;  line-height: 40px;  text-align: center;  position: relative;}a {  text-decoration: none;  color: #000;  display: block;  padding: 0 10px;}a:hover {  color: #fff;  background-color: #666;}ul li ul li {  float: none;  background-color: #eee;}ul li ul {  position: absolute;  left: 0px;  top: 40px;  display: none;}ul li ul li a:hover {  background-color: blue;}ul li:hover ul {  display: block;}</style>
</head>
<body><div class="nav"><ul><li><a href="#">第一页</a><ul><li><a href="#">副一</a></li></ul></li><li><a href="#">第二页</a><ul><li><a href="#">副一</a> </li></ul></li><li><a href="#">第三页</a></li></ul></div>
</body>

第二种方式：（js实现）

<body><script>function showSecondLeave(li) {var Li = li.getElementsByTagName('ul')[0]Li.style.display = "block"}function hideSecondLeave(li){var Li = li.getElementsByTagName('ul')[0]Li.style.display = "none"}</script><div class="nav"><ul><li><a href="#">首页</a></li><li onmouseover="showSecondLeave(this)" onmouseout="hideSecondLeave(this)"><a href="#">第二页</a><ul><li><a href="#">副一</a></li><li><a href="#">副二</a></li></ul></li><li onmouseover="showSecondLeave(this)" onmouseout="hideSecondLeave(this)"><a href="#">第三页</a><ul><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></ul></div>
</body>

第三种方式：（jQuery实现）

<body><script>$(function () {$(".navMenu").mouseover(function () {$(this).children('ul').show()})$(".navMenu").mouseout(function () {$(this).children('ul').hide()})})</script><div class="nav"><ul><li><a href="#">首页</a></li><li class="navMenu"><a href="#">第二页</a><ul><li><a href="#">副一</a></li><li><a href="#">副二</a></li></ul></li><li class="navMenu"><a href="#">第三页</a><ul><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></ul></div>
</body>

前端下拉菜单的三种实现方法相关推荐

java excel 数据有效性_Excel设置数据有效性实现单元格下拉菜单的3种方法
Excel设置数据有效性实现单元格下拉菜单的3种方法一.直接输入: 1.选择要设置的单元格,譬如A1单元格: 2.选择菜单栏的"数据"→"有效性"→出现&qu ...
设置数据有效性实现单元格下拉菜单的3种方法
设置数据有效性实现单元格下拉菜单的3种方法一.直接输入: 1.选择要设置的单元格,譬如A1单元格: 2.选择菜单栏的"数据"→"有效性"→出现 ...
下拉菜单的四种实现方式
今日在做下拉菜单时思考实现下拉菜单的几种实现方式,现在对这几种实现方式进行总结. 1:改变下拉菜单的display /*HTML结构,以下四种方法通用*/ <div id="conta ...
android二级菜单实现,Android编程实现二级下拉菜单及快速搜索的方法
本文实例讲述了Android编程实现二级下拉菜单及快速搜索的方法.分享给大家供大家参考,具体如下: 一.我们要做什么? 上面有个搜索框,下面是一个二级下拉菜单. 输入查询内容,下面列表将显示查询结果. ...
用纯css实现下拉菜单的几种方式
第一种:display:none和display:block切换 1 <!DOCTYPE html> 2 <html lang="en"> 3 <he ...
[笔记]前端 - 下拉菜单的实现
前言:本文是课堂笔记,记录了一个下拉菜单的页面分解和搭建过程: 1页面分析 1.1 页面大盒子:放标题和菜单 DIV 标题: Menu h1-h6 菜单:ul li 1.2 样式: 大盒子:宽高 ...
下拉菜单的两种实现方式：CSS和JS
本文的下拉菜单核心是通过改变DISPLAY的值,来改变菜单的出现和隐藏. 在此简单介绍DISPLAY: display:[参数] 属性定义:设置元素如何显示. 参数:默认为inline,具体参数如下表 ...
下拉菜单的两种实现方式
需求: 1:鼠标滑过,nav中的标题底色变为orange,并且显示底下的内容 2:鼠标离开,nav中的标题底色去除,并且隐藏的内容 HTML <nav><ul><li&g ...
android的dropdownmenu,Bootstrap 下拉菜单.dropdown的具体使用方法
本章将具体讲解下拉菜单的交互.使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏.标签页.胶囊式导航菜单.按钮等)添加下拉菜单. 下拉菜单.dropdown具体用法 .dropdown ...

前端下拉菜单的三种实现方法

前端下拉菜单的三种实现方法相关推荐

最新文章

热门文章