文档章节

CSS实现常用菜单(一)

博为峰教研组
 博为峰教研组
发布于 2017/05/03 18:33
字数 263
阅读 2
收藏 0

在写网站的时候,每个网页的导航菜单都是必不可少的,下面我们就把实际开发经常会遇到的菜单总结一下。

1、普通菜单

把鼠标移到菜单内容上,出现二级菜单而且菜单的背景颜色变成深灰色。

(1)使用HTM+CSS来实现

HTML代码如下:

 

最外层是ul包含5个li,分别是首页,课程大厅,学习中心,经典案例,关于我们。二级菜单也是在当前li下的ul。每个li里面都包含链接a。

CSS代码如下:

 

(2)使用javaScript代码实现

在鼠标移入和移出时绑定onmouseover和onmouseout事件。鼠标移入时,显示二级菜单,鼠标移出时,隐藏二级菜单

(3)使用jquery代码实现

 

在鼠标移入和移出时绑定onmouseover和onmouseout事件。鼠标移入时,使用show方法显示二级菜单,鼠标移出时,使用hide方法隐藏二级菜单。

© 著作权归作者所有

博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
端程序员入门所要学习的16个知识点

1、HTML常用标签 语言是什么 、Web前端开发语言、 HTML超文本标记语言 、 网页主体结构 、常用标签、超链接(a标签)、Img图片标签 2、盒子模型 初探Div盒子模型 、css样式、 简单css样式、盒...

急速奔跑中的蜗牛
2018/06/07
0
0
CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)

如果下面有提及‘发稿时间’,或者‘截止时间’,是指‘2017-8-1’。因为这篇文章是一篇迁移文章,是我以前在其它社区发布的原创文章。 1.前言 在自己的专栏上写了十几篇文章了,都是与js有关...

守候i
2017/11/20
0
0
快切——响应CSS框架发布 v1.2 版本

快切(kuai.qietu.com)讯:快切css源自最早的quickcss框架,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,能够用于网站的快速设计,通过重设和重建浏览器标准,可...

tyshymy
2014/09/29
4.4K
12
从实战中学前端:顶部导航

本篇是从实战中学前端的第二篇,上一篇用css实现了几个还不错的按钮,这一篇来实现顶部导航,其中包含二级导航的实现。 首先我们来看看将要实现的导航效果图: 接下来我们要实现的导航功能:...

有力量的神经病
2016/12/07
12
0
37个超级棒的 jQuery菜单插件

导航是网站设计最重要的元素之一。一个优秀的导航菜单要简洁易用,方便用户。而用 jQuery 菜单插件制作出来的动态导航则能很好的满足这一点。jQuery 是一个轻量级的 JavaScript 框架,兼容 ...

墙头草
2012/03/22
18.3K
11

没有更多内容

加载失败,请刷新页面

加载更多

计算机网络

计算机网络体系结构 OSI 其中表示层和会话层用途如下: 表示层 :数据压缩、加密以及数据描述,这使得应用程序不必关心在各台主机中数据内部格式不同的问题。 会话层 :建立及管理会话。 五层...

一只小青蛙
今天
2
0
0.01-Win10安装linux子系统

一、安装Debian子系统 -1、控制面板设置: -1.1、打开“控制面板” —— “程序” —— “启用或关闭Windows功能” —— 勾选 “适用于Linux的Windows子系统” -2、设置: -2.1、打开“设置”...

静以修身2025
昨天
2
0
init 0-6 (启动级别:init 0,1,2,3,4,5,6)

启动级别: init 0,1,2,3,4,5,6 这是个很久的知识点了,只是自己一直都迷迷糊糊的,今天在翻出来好好理解下。。 0: 停机 1:单用户形式,只root进行维护 2:多用户,不能使用net file system...

圣洁之子
昨天
2
0
Android Camera HAL浅析

1、Camera成像原理介绍 Camera工作流程图 Camera的成像原理可以简单概括如下: 景物(SCENE)通过镜头(LENS)生成的光学图像投射到图像传感器(Sensor)表面上,然后转为电信号,经过A/D(模数转...

天王盖地虎626
昨天
2
0
聊聊Elasticsearch的ProcessProbe

序 本文主要研究一下Elasticsearch的ProcessProbe ProcessProbe elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/monitor/process/ProcessProbe.java public class ProcessProb......

go4it
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部