纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）

原文:纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）

虽然网上类似甚至相同的案例有很多，但是我还是写下，以记下笔记，也可供大家参考

希望大家可以指导批评~~

首先我们以列表ul li 来开始我们菜单也可以说导航条的制作：

在页面中我们首先构建以下XHTML结构：

<body><ul id="navWrapper"><li><a href="#">Menu A</a><ul><li><a href="#">Menu A, Item 1</a></li><li><a href="#">Menu A, Item 2</a></li><li><a href="#">Menu A, Item 3</a></li><li><a href="#">Menu A, Item 4</a></li><li><a href="#">Menu A, Item 5</a></li><li><a href="#">Menu A, Item 6</a></li></ul></li><li><a href="#">Menu B</a><div id="test"><a href="#">Menu B, Item 1</a></div></li></ul><div id="banner"></div><div id="content"><p>Page content here.</p></div>
</body>

View Code

效果：

接着，我们来一步一步设计样式及功能（先给每个元素加个边框以便后续样式设计区别）：

样式代码：

<style>ul{border:1px solid red;}li{border:1px solid lightgreen;}div{border:1px solid black;}
</style>

View Code

效果：

这样我们就可以好区分，好设计了~~

下面去掉链接的下滑线和列表的“.”“。”，并且使父级的列表横向排列，子级列表还是纵向排列，这样才像下拉菜单嘛~~（这里是两级列表嵌套，一个父级一个子级）

样式代码：

<style>ul{border:1px solid red;}li{border:1px solid lightgreen;}div{border:1px solid black;}a{text-decoration:none;}ul#navWrapper li{float:left;list-style:none;}ul#navWrapper li ul li{float:none;}div#banner{clear:both;}
</style>

View Code

效果：

下面来隐藏子级列表和子级容器（这里子级容器是指id为test的div容器），当鼠标移动到父级列表时相对应的子级列表显现出来，通过“ :hover ”实现，隐藏显现通过display的“ none ”和“ block ”来实现，注意这里不用visibility的“ hidden ”和“ visible ”来实现，至于区别大家可以把相应的属性换成visibility来看看效果，这里就不实现了

样式代码：

<style>ul{border:1px solid red;}li{border:1px solid lightgreen;}div{border:1px solid black;}a{text-decoration:none;}ul#navWrapper li{float:left;list-style:none;}ul#navWrapper li ul li{float:none;}div#banner{clear:both;}ul#navWrapper ul,ul#navWrapper div#test{display:none;position:absolute;}ul#navWrapper li:hover ul,ul#navWrapper li:hover div#test{display:block;}
</style>

View Code

效果：

这里有一点需要注意，当不设置子级的position为“ absolute ”时，鼠标移动到父级，出现的子级会在页面占据一定的位置，那么“ Page content here ”将会产生移动，这是十分不好的。所以我们设置子级“ position:absolute; ”，这样便可以使它们脱离正常的流程，不影响后面的内容位置！

再将父级位置稍微偏移下和将第一个父级下的自己列表向左偏移与父级边框对齐，并且给第二个父级下的div容器一定的“容积”

样式代码：

<style>ul{border:1px solid red;}li{border:1px solid lightgreen;}div{border:1px solid black;}a{text-decoration:none;}ul#navWrapper li{float:left;list-style:none;}ul#navWrapper li ul li{float:none;margin-left:-41px;}div#banner{clear:both;height:50px;margin-top:30px;}ul#navWrapper ul,ul#navWrapper div#test{display:none;position:absolute;}ul#navWrapper li:hover ul,ul#navWrapper li:hover div#test{display:block;}ul#navWrapper{margin-left:-41px;}ul#navWrapper div#test{height:200px;width:600px;background:lightgray;}
</style>

View Code

效果：

将所有边框去掉后这里最基本的结构就设计好了，其他的样式可以随意调整啦~~

比如：

将所有边框去掉后，并对整体进行下设计

样式代码：

<style>body,div,ul,li{padding:0;margin:0;} a{text-decoration:none;}ul#navWrapper li{float:left;list-style:none;height:45px;line-height:45px;}ul#navWrapper li ul li{float:none;}div#banner{clear:both;height:50px;margin-top:50px;margin-left:50px;}div#content{margin-left:50px;}ul#navWrapper ul{display:none;position:absolute;background:#CCC;}ul#navWrapper div#test{display:none;position:absolute;height:200px;width:600px;background:#cde6c7;}ul#navWrapper li:hover ul,ul#navWrapper li:hover div#test{display:block;}ul#navWrapper{background:#CCC;height:45px;width:960px;margin:0 auto;margin-top:30px;}li a{font-size:24px;color:#333;display:block;height:45px;padding:0 20px;}li a:hover{color:#fff;background:#000;}
</style>

View Code

效果：

　　图一：

　　图二：

OK！这就是在以上基本结构上设计的一个例子了。如果还需要设计，只需要在以上最基本结构上设计就行了~~

参考文献：微软官方文档“如何创建CSS下拉菜单”

纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）相关推荐

HTML下拉菜单怎么做成横向,css导航条横向带下拉菜单
css+div导航下拉二级菜单竖排效果如何改为横排? ,在"下一站"有三个二级竖排菜单,如何能变为横排?困扰了我一天了,让二级菜单变成一行,只需要在竖排的效果上,让二级菜单都浮动起 ...
下拉菜单的两种实现方式：CSS和JS
本文的下拉菜单核心是通过改变DISPLAY的值,来改变菜单的出现和隐藏. 在此简单介绍DISPLAY: display:[参数] 属性定义:设置元素如何显示. 参数:默认为inline,具体参数如下表 ...
Bootstrap导航条鼠标悬停下拉菜单
Bootstrap导航条鼠标悬停下拉菜单 Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态,都是点击弹出下拉菜单,为了适应一般网站使用,我稍作了一些修改,鼠标hover时就弹 ...
CSS导航条以及简单下拉菜单实现
以京东导航条来练习,导航条的制作可以采用浮动或者弹性布局,这里采用浮动,要注意高度塌陷的问题.这里简单仿写一下下面实现鼠标移动到江苏实现下拉菜单的实现,首先要有一个下拉菜单,设置好宽高,把他隐藏起来 ...
dropdownlist三级联动怎么实现_Excel下拉菜单不会做？15秒教会你制作一二三级联动下拉菜单，从此做表不求人！...
Hi,各位叨友们好呀!我是叨叨君~ 我们都知道,在使用Excel表格统计数据的时候,为了方便录入,通常会在Excel中设置下拉菜单,以便我们输入相同的内容. 那么,Excel中一级.二级.三级联动下拉 ...
dw二级联动下拉菜单插件宋君墨_Excel下拉菜单不会做？15秒教会你制作一二三级联动下拉菜单，从此做表不求人！...
Hi,各位叨友们好呀!我是叨叨君~ 我们都知道,在使用Excel表格统计数据的时候,为了方便录入,通常会在Excel中设置下拉菜单,以便我们输入相同的内容. 那么,Excel中一级.二级.三级联动下拉 ...
excel下拉菜单自动匹配_自动将新项目添加到Excel数据验证下拉菜单
excel下拉菜单自动匹配 There's a sample Excel workbook on my Contextures website that uses a bit of Excel VBA ...
html鼠标滑过导航条展开导航条,jquery css实现鼠标滑过导航菜单栏动画效果
对于导航栏的实现对于前端人员来说再简单不过了,但是如何让我们的导航看起来生动,给用户一种很高大上的感觉,却需要我们好好设计一下.今天我给大家带来的是我自己在项目中用到的一个例子,当我们鼠标滑过导航栏时 ...
html鼠标滑过导航条展开导航条,JS+CSS实现鼠标滑过时动态翻滚的导航条效果
本文实例讲述了JS+CSS实现鼠标滑过时动态翻滚的导航条效果.分享给大家供大家参考.具体如下: 这是一款鼠标悬停时动态翻滚的导航条,注意这里用了两个背景图,请等待网页加载完成或多刷新几次,这个是使用J ...

纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）

纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）相关推荐

最新文章

热门文章