文档章节

CSS常用菜单(四)

博为峰教研组
 博为峰教研组
发布于 2017/05/03 18:57
字数 276
阅读 1
收藏 0

4、动画菜单

下面我们来实现如下图所示的动画菜单。当鼠标移入到菜单上,以动画的形式出现二级菜单。

 

html代码

 

css代码如下:

html, body, ul, li {padding:0; margin:0;}

body {font:10pt;}

ul,li {list-style-type:none; text-transform:capitalize;}

.clear {clear:both; *display:inline;/*IE only*/}

 

/*menu*/

#menu {margin:100px auto; display:block; width:1000px; height:34px;}

#nav {display:block;}

#nav .mainlevel {float:left; background:#3f240e; text-align:center; display:block;}

#nav .mainlevel a {color:#fff; text-decoration:none; line-height:34px; height:34px; text-align:center; padding:0 20px; display:block; _width:48px;}

#nav .mainlevel a:hover {color:#3f240e; text-decoration:none; background:#678900 url(images/slide-pannel_14.png) 0 0 repeat-x;}

#nav .mainlevel ul {position:absolute; display:none; *width:2000px;/*IE is great need, width>=li.length*/}

#nav .mainlevel li {float:left; background:#3f240e;}

#nav .mainlevel li a {padding:0 12px; line-height:24px; height:24px; display:block; _padding-bottom:6px;/*IE6 only*/}

#nav .mainlevel li a:hover {color:#3f240e; text-decoration:none; background:#678900 url(images/slide-pannel_14.png) 0 0 repeat-x;}

#nav li a em/*input an em tag as a space*/ {padding:0 3px;}

.note {color:#3f240e; border-right:1px solid #fff; background:#678900 url(images/slide-pannel_14.png) 0 0 repeat-x; display:block; line-height:34px; padding:0 3em;}

.Triangle_con {height:9px; background:url(images/bird.png) 36px 0 no-repeat; display:block; _margin-bottom:-6px;/*IE6 only*/}

.log {margin:100px auto; width:1000px; text-transform:capitalize; line-height:200%;}

使用jquery代码实现动画效果:

 

 

© 著作权归作者所有

上一篇: Swift3字典编辑
博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
css书写规范

一、CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(font, line-height, letter-spacing, color, text-ali......

皇上洗碗
2016/09/14
5
0
Jquery 手风琴菜单

布雷泽
2011/06/16
0
0
DIV+CSS规范命名大全集合

网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇。 常用DIV+CSS命名大全集合,即CSS命名规则 DIV CSS命...

0000001
2014/08/12
0
0
端程序员入门所要学习的16个知识点

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

急速奔跑中的蜗牛
2018/06/07
0
0
如何给网页css样式起个好名字?

页头:header 如:#header{属性:属性值;}或.header{属性:属性值;},也许你需要了解class与id区别及用法 登录条:loginBar 标志:logo 侧栏:sideBar 广告:banner 导航:nav 子导航:subNav ...

我输过但从未怕过
2016/03/04
53
0

没有更多内容

加载失败,请刷新页面

加载更多

Angular 英雄编辑器

应用程序现在有了基本的标题。 接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。 创建英雄组件 使用 Angular CLI 创建一个名为 heroes 的新组件。 ng gener...

honeymoose
12分钟前
1
0
Kernel DMA

为什么会有DMA(直接内存访问)?我们知道通常情况下,内存数据跟外设之间的通信是通过cpu来传递的。cpu运行io指令将数据从内存拷贝到外设的io端口,或者从外设的io端口拷贝到内存。由于外设...

yepanl
今天
4
0
hive

一、hive的定义: Hive是一个SQL解析引擎,将SQL语句转译成MR Job,然后再在Hadoop平台上运行,达到快速开发的目的 Hive中的表是纯逻辑表,就只是表的定义,即表的元数据。本质就是Hadoop的目...

霉男纸
今天
3
0
二、Spring Cloud—Eureka(Greenwich.SR1)

注:本系列文章所用工具及版本如下:开发工具(IDEA 2018.3.5),Spring Boot(2.1.3.RELEASE),Spring Cloud(Greenwich.SR1),Maven(3.6.0),JDK(1.8) Eureka: Eureka是Netflix开发...

倪伟伟
昨天
9
0
eclipse常用插件

amaterasUML https://takezoe.github.io/amateras-update-site/ https://github.com/takezoe/amateras-modeler modelGoon https://www.cnblogs.com/aademeng/articles/6890266.html......

大头鬼_yc
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部