纯CSS制作页面导航下拉菜单

作者:Davidszhou   来源:SEO优化博客   时间:2015-04-23 22:14:10   点击:

在上一篇制作企业网站建设的页面布局实战中提到了一个点:使用纯CSS制作下拉菜单,

这篇文章就详细来说一下纯CSS制作下拉菜单。

纯CSS制作页面导航下拉菜单

经过长期的写CSS以及企业仿站中,总是在其他页面给我惊喜以及增加知识学习CSS的地方,其中就有使用“position:relative;”结合“display:none;以及“display:block;”制作下来菜单。

Position:CSS中用于定位的标签,他的值详解如下:

static 

: 

默认值。无特殊定位,对象遵循HTML定位规则

absolute 

: 

将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据 body 对象。而其层叠通过 z-index 属性定义

fixed 

: 

未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范

relative 

: 

对象不可层叠,但将依据 left , right , top , bottom 等属性在正常文档流中偏移位置

 

:hover:#选择符/.选择符:我们大多的时候在超链接样式中能够见到,意思当鼠标移动覆盖上面未点击的效果动作,其实他不仅仅作用于超链接,也可以用li,p等中(其实我也是经常用在这两个地方以及超链接中)

 

下面这个纯CSS制作下拉式菜单的思想就是:在鼠标未覆盖在元素对象上,他的样式属性是:display:none; 当鼠标移动覆盖上面其 CSS属性值为:display:block; 然后结合position:relative; 依据top\left\right\bottom来定 位。

     心得:

1、第一点还是蛮重要的,但我不清楚他术语是怎么表达,我自己理解的就是主从关系或者说上下级包含关系,例如:

1、

<div></div>

<div></div>

这种是失败的,在附件企业建站资料中有源码演示

2、ul li 这种的下拉样式,可能比较适合简单的文字形式的纯CSS下拉菜单,p与p 适合一些比较复杂的,可以方便在p里面继续规划布局。

3、纯CSS制作的下拉样式上下级之间的不能有margin的外间距,如果需要建议使用内间距padding,因为当鼠标移开上级元素下拉就会失效,上下级必须是紧紧挨着的,间隙可以使用上面说的padding或者使用border白色或者和背景色相同的边框代替。

4、结合一级一级部署源码,还可以实现三级或者四级弹出,结合top/left/right/bottom的属性值调试,还可以实现不仅仅在于往下方向弹拉出菜单哦,

5、其他注意点以后遇到在添加。由于是半路出身,只要是能达到目的的方法就是好方法,p+CSS纯粹是看页面源码看多了自学,半桶水,本站有任何错误点或者有其他更好方法点的地方,希望联系底部的联系QQ,互相学习。该篇文章讲到的源码素材点击下方附件:

 

纯CSS制作下拉式导航菜单
文件类型: .html f3b2a1e944a90e7fd0a14fce9224d99f.html (3.18 KB)

 

TAGS:CSS , 下拉菜单

来自Davids zhou博客原创文章请尊重作者:http://www.zongk.com/zongk/41.html转载请标注此链接

网站统计
文章总数:129
今天发布:0
软件资源数:18