div css下拉导航菜单 div+css制作导航下拉菜单

div+css制作导航下拉菜单――简介

div+css制作导航下拉菜单

div+css制作导航下拉菜单――方法/步骤

div+css制作导航下拉菜单 1、

1.最终预览效果:


div+css制作导航下拉菜单 2、

2.首先看如下代码:


div+css制作导航下拉菜单 3、

3.预览效果:


div+css制作导航下拉菜单 4、

4.新增如下代码:

div+css制作导航下拉菜单_css下拉菜单


div+css制作导航下拉菜单 5、

5.预览效果如下:


div+css制作导航下拉菜单 6、

6. 发现样式乱了,这是因为新增的li继承了原本的 Float:left;

新增代码如下:


div+css制作导航下拉菜单 7、

7. 预览效果图:

div+css制作导航下拉菜单_css下拉菜单


div+css制作导航下拉菜单 8、

8.现在把下拉列表的背景图片去掉,并增加Hover样式


div+css制作导航下拉菜单 9、

9.预览效果如下:


div+css制作导航下拉菜单 10、

10.现在基本实现了下拉效果,接下来就是要实现当鼠标移动到一级菜单上的时候,显示二级菜单,当鼠标移开一级菜单的时候,隐藏二级菜单,这需要CSS和JS双重来控制。

看如下代码:

div+css制作导航下拉菜单_css下拉菜单


div+css制作导航下拉菜单 11、

11.代码解释:

首先隐藏二级菜单的Ul #menu ul li ul{ display:none; width:154px;}

设置一个一级菜单li的listshow 下的二级菜单的样式为显示:#menu ul li.listshow ul{ display:block;}

这样就给了二级菜单两个状态,默认情况下隐藏,当一级菜单有样式listshow的时候,二级菜单显示。

至于这两种状态的切换就是JS代码的控制。

JS代码解读(从上到下每行解读):

首先定义一个函数:menuFix

函数内部定义变量 sfEles 为获取的一级菜单项。

因为一级菜单有多个,所以循环每个菜单,sfEles[i]代表循环到的每个菜单项,例如 java菜单

每个菜单项设置两个状态onmouseover onmouseout 即鼠标移动到菜单上和鼠标移开的两个状态。

在每个状态中设置菜单项(即一级菜单li)的class.


div+css制作导航下拉菜单 12、

12.最终效果:

div css下拉导航菜单 div+css制作导航下拉菜单

  

爱华网本文地址 » http://www.aihuau.com/a/8104180103/201244.html

更多阅读

多种下拉菜单样式 下拉菜单样式

追求不同的下拉菜单样式是站长们用来吸引眼球的一个方式,怎样的下拉菜单才能够令人印象深刻呢!多种下拉菜单样式——工具/原料菜单制作工具多种下拉菜单样式——步骤/方法多种下拉菜单样式 1、要想在千篇一律的下拉菜单样式中脱颖而

excel 下拉菜单和筛选技巧 html筛选功能下拉菜单

此文转自www.bdaccp.comexcel 下拉菜单和筛选技巧先摘录一下,虽然这个做法没达到自己所想的要求,还是先储存一下。自己的表格再研究,弄好了再发上来。用Excel的下拉菜单制作了一个简单的查询表,使用起来觉得很方便。1. 启动Excel 2003(其

超详细EasyBoot制作光盘中文启动菜单教程 光盘菜单制作

EasyBoot制作中文启动菜单教程点我下载软件先装入/新建启动菜单文件1) 按"打开",装入菜单文件。(说明:安装后自动生成cdmenu.ezb样例,可在此基础上进行修改,十分方便。)2) 按“新建”创建一个新的菜单文件。启动菜单的5种对象属性1) 屏幕

Grub4dos菜单制作 grub4dos菜单制作教程

Grub4dos菜单制作 点击: 次时间:2011-06-04 08:34Grub是Linux的一个系统载入启动程序,正如NTLDR之于Windows NT/2K/XP。它就是为多重引导而生,而且适用于多种平台,这里所说的Windows下的Grub就是Grub4dos。在NTFS格式下,在boot.ini里添

Flash导航制作 flash导航菜单制作

  一直以来学习PS都是靠自己在网上找教程,在制图中慢慢摸索。所以很多东西还是不明白,对制图工具不能很好的理解,当然也不能更好的应用~还好国庆节这几日,在北京工作的姨妹放假回来,我在她那里学习了不少东西。她介绍我也试着学习一下F

声明:《div css下拉导航菜单 div+css制作导航下拉菜单》为网友英雄分享!如侵犯到您的合法权益请联系我们删除