如何用css做下拉菜单

html-css012

如何用css做下拉菜单,第1张

纯CSS的下拉菜单,此处理解的意思就是

标签套

标签,然后再给

标签设置样式。在被套的

标签设置平时状态为隐藏,再等鼠标移动到上一个

标签时,将被套的

标签显示(样式:overflow:hidden

)。

贴一段网上摘的纯CSS下拉菜单(二级)

利用float制作兼容ie6纯css下来菜单

*

{

margin:0

padding:0

}

ul

{

list-style:none

}

a:hover

{color:#555

}

.nav

{

float:left

overflow:hidden

text-align:center

font-size:14px

}

.nav

dd

{

float:left

width:300px

margin:-888px

-150px

0

0

}

.nav

dd

a

{

float:left

margin-top:888px

display:block

position:relative

background:#eee

width:150px

height:30px

line-height:30px

border-bottom:1px

solid

#fff

}

.nav

a:hover

{

margin-right:1px

background:#3cf

}

.nav

dd

ul

{

float:left

font-size:0

z-index:888

}

.nav

dd

li

a

{

clear:left

width:150px

margin-top:0

font-size:14px

}

.nav

dd

li

a:hover

{

margin-right:1px

}

首页

关于我们

公司简介

公司文化

企业荣誉

联系我们

新闻动态

国内新闻

国外新闻

产品展示

111

222

大概的过程是这样的:

...

a(this).addClass("animated").find(".aninode").each(function() {

a(this).addClass(a(this).attr("data-animate"))

})

...

页面滚动到每个 section 元素的时候,先给它加个名为 animated 的 class ,在这样的 section 内部找到 class 名为 aninode 的 div 元素。这样的 div 元素或者其内部的元素会有个 data-animate="a-****" 的属性。把这个属性的值,也就是 a-**** 也当做 class 名称传给这个 div 元素或者其内部的元素。这个 class 里面就包含有动画样式。也就是说,通过 class="animated" 当做钩子,有 animated 这个 class 的时候,名为 aninode 的 div 元素或者其内部的元素才会执行相关的动画效果。

动画效果的 CSS 样式在 core.js 里面。控制动画执行是在 baomi.js 里面。

其实这个页面可以再完善下 section 元素 move 出屏幕的时候,去掉 animated;当move 回来的时候再加上 animated。目前的情况是,滚动到页面最低下以后,再往上滚动页面,就看不见动画效果了

以将 下拉菜单嵌入由盒子中 充当的按钮 为例来说明问题,以类选择器为button的盒子当作触发下拉菜单的容器(即是当鼠标移动到该按钮上面出现下拉框),则必须将hover属性附着在按钮盒子的上一级盒子上,但是通常上一级的盒子比当前盒子大或者里面有多个小盒子,那么鼠标放在按钮外部和上一级盒子的内部仍然可以将下拉带单显示,于是尝试在按钮盒子的上一级加上了一个与按钮大小一样的按钮,并将下拉菜单附着于此。

第一想法就是给未显示(默认隐藏时)的下拉菜单栏添加,其结果就是边框一直处于显示状态,在下拉菜单栏隐藏时无法隐藏。解决方法就是将边框的属性加在hover属性里面,未显示时的边框设置为零。

未显示时属性为( display: none)显示时属性为(display: block),结果就是能够显示与隐藏,但是动画效果没有表现出来。想不通...

除了使用display的属性之外,还可以使用:下拉菜单栏的隐藏通过使菜单栏的属性overflow: hidden 来实现。

list中(隐藏时)的height设置为零,hover中(显示时)的height设置为110px,使用动画transition属性来过渡。

同样是通过overflow: hidden实现隐藏,但是是通过visibility:visible显示隐藏,动画效果仍然有效。

就是相比方法二将hover里面的属性由display: block改为visibility:visible

以上均为鄙人实践的结果,理解甚微,纰漏繁多,还请斧正。

比如说:下拉菜单收起时的动画没有搞明白怎样控制,而且下拉菜单收起时的动画没有边框;假如使用visibility: hidden和visibility:visible实现隐藏和显示时,会出现动画效果播放完之前,下拉菜单栏内容已经展示出来。