你会利用css写下拉列表框吗？

　　看到网上各个网站有各色各样的下拉列表框，你是否有想过自己去做一个出来呢？出于好奇与自强心，我研究了一个下午，发现网上很多的下拉列表框都是利用javascript或者是jquery（其实jquery和javascript本质是一样的）动态的画出来的，而页面本身其实不存在这个列表框的元素。但是经过大量的查询，最后还是基本可以做出一个利用纯的css编写出一个下拉列表框，在这里报着和博客园的朋友分享的态度，写了这篇文章。如果有什么不对，请指正。

　　首先我们在body中创建一个我们的菜单和子菜单。利用的元素为ul 和 li。

　　代码如下：

 1 <ul id="menu"> 2         <li><a href="#">菜单一</a> 3             <ul> 4                 <li><a href="#">子菜单一</a></li> 5                 <li><a href="#">子菜单二</a></li> 6                 <li><a href="#">子菜单三</a></li> 7                 <li><a href="#">子菜单四</a></li> 8                 <li><a href="#">子菜单五</a></li> 9             </ul>10         </li>11         <li><a href="#">菜单二</a>12             <ul>13                 <li><a href="#">子菜单一</a></li>14                 <li><a href="#">子菜单二</a></li>15                 <li><a href="#">子菜单三</a></li>16                 <li><a href="#">子菜单四</a></li>17                 <li><a href="#">子菜单五</a></li>18             </ul>19         </li>20         <li><a href="#">菜单三</a>21             <ul>22                 <li><a href="#">子菜单一</a></li>23                 <li><a href="#">子菜单二</a></li>24                 <li><a href="#">子菜单三</a></li>25                 <li><a href="#">子菜单四</a></li>26                 <li><a href="#">子菜单五</a></li>27             </ul>28         </li>29         <li><a href="#">菜单四</a>30             <ul>31                 <li><a href="#">子菜单一</a></li>32                 <li><a href="#">子菜单二</a></li>33                 <li><a href="#">子菜单三</a></li>34                 <li><a href="#">子菜单四</a></li>35                 <li><a href="#">子菜单五</a></li>36             </ul>37         </li>38         <li><a href="#">菜单五</a>39             <ul>40                 <li><a href="#">子菜单一</a></li>41                 <li><a href="#">子菜单二</a></li>42                 <li><a href="#">子菜单三</a></li>43                 <li><a href="#">子菜单四</a></li>44                 <li><a href="#">子菜单五</a></li>45             </ul>46         </li>47     </ul>

　　　部分效果图如下：

　　这个是我们的粗粗的下拉列表框，你可能会说，这个和我们的平时见到的下拉列表框不太一样呀，而且li元素前面那些点。请看我慢慢把它装饰成完美的“作品”……

接着我们按照习惯，创建一个两个css样式表，一个叫main.css 另一个叫menu.css，然后都放在同一个styles的文件夹下：如图：

　　这样做的目的是为了方便我们吧css代码模块化，为以后的维护做好良好的基础。接着我们要吧这两个css文件盒.html文件连起来了。首先在head目录下创建一个<link>标签把需要的main.css文件找到。

　　代码如下：　　

<link rel="stylesheet" href="styles/main.css" type="text/css" />

　　接着在main.css文件中加入一个引向menu.css的文件就可以了。需要添加的代码如下：

@import url('menu.css');

　　大概的拓扑图如上。

　　好了现在index.html文件和main.css文件都写好了，只需要写menu文件下的内容就可以了。

　　首先我们创建一块宽度为800px的矩形，然后让这个矩形居中。

　　代码如下：　

 1 *{ 2         margin:0px; 3         padding:0px; 4         word-wrap:break-word; 5         word-break:break-all;     6     } 7      8     html { overflow:-moz-scrollbars-vertical; } /* 在Firefox下始终显示滚动条*/ 9     10     #menu{11         margin:0px auto;12         width:800px;    13     }/*是整个menu页面处于中间的水平*/

　　接着我们写核心的css脚本代码了，首先让menu菜单紧靠边框，然后设置菜单栏的长度和宽度，并向左飘并设置字体的大小，并设置显示方式为线性的。

其中display：inline在w3shool解释为：默认。此元素会被显示为内联元素，元素前后没有换行符。代码如下：

 1 ul{ 2         margin:0px; 3         padding:0px; 4     } 5      6     /*使菜单紧密的排成一条线并去除li前面的点*/ 7     ul li{ 8         float:left; 9         display:inline;10         font:1em Arial, Helvetica, sans-serif;11         height:30px;12         width:100px;13         list-style:none;14     }

　　接着我们设置菜单的内容，设置字体的内容为白色，然后去掉超链接的下划线，设置行高，并设置长度和宽度等等代码如下：

 1 ul li a{ 2         color:#fff; 3         text-decoration:none; 4         line-height:29px; 5         width:91px; 6         height:29px; 7         margin:0px; 8         padding:0px 0px 0px 8px; 9         display:block;10         border-right:1px solid #ccc;11         border-bottom:1px solid #ccc;12         background:#83cf33;13     }

　　菜单外框写好了，接着我们写子菜单的外框了。设置子菜单的外框的高度和宽度：

　　代码如下：　　

1 ul li ul li{2         height:25px;3         width:100px;    4 }

　　设置子菜单中超链接的文字的背景和行高。

　　代码如下：

1 ul li ul li a{2         background:#b2da7e;3         line-height:24px;    /*设置行间的距离*/4 }5

　　写到这里基本框架做出来额，看效果图：

　　接着我们的任务就是吧这些菜单写动起来。利用的hover这个伪元素。当我们鼠标在菜单框中时，我们希望设置一下这个菜单项高亮显示，那就把颜色改得鲜明点，代码如下：　

1 ul li a:hover{2         background:#94ea10;3 }

　　同理我们写一下子菜单的高亮显示的代码：

1 ul li ul li a:hover{2         background:#a5d561;            3 }

　　接着我们要开始让他动起来的真正代码了，思路是这样的，我们把子菜单隐藏起来，然后设置当我们的鼠标在菜单上面的时候，我们吧隐藏起来的内容显示出来。这里还是利用了hover这个伪元素的特点。代码如下：

1 ul li ul{2     visibility:hidden;3 }4     5     /*当鼠标在菜单上得时候显示子菜单*/6 ul li:hover ul{7     visibility:visible;    8 }

　　好了我们的纯的css下拉列表框，写好了。你可能说为什么不用javascript来写呢，其实利用javascript写也没有问题，但是稍微懂点seo的技术人员知道，在javascript中创建的任何元素，这些搜索引擎都是爬不到的；当然我们从另一个角度可以说，既然知道了一种方法，为什么不去在找一种方法呢？本人亲测IE8、IE9、火狐6.0.2、谷歌浏览器17.0.963.56 m完全兼容。

　　读到这里你是否可以自己做出一个用纯的css脚本写出一个下拉列表框呢？

　　最好附上menu.css文件的完整的代码和效果图：

View Code

 1 *{ 2         margin:0px; 3         padding:0px; 4         word-wrap:break-word; 5         word-break:break-all;     6     } 7      8     html { overflow:-moz-scrollbars-vertical; } /* 在Firefox下始终显示滚动条*/ 9     10     #menu{11         margin:0px auto;12         width:800px;    13     }/*是整个menu页面处于中间的水平*/14     15     /*============================================================*/16     /*下面是核心的代码*/17     /*使菜单栏靠进左边*/18     ul{19         margin:0px;20         padding:0px;21     }22     23     /*使菜单紧密的排成一条线并去除li前面的点*/24     ul li{25         float:left;26         display:inline;27         font:1em Arial, Helvetica, sans-serif;28         height:30px;29         width:100px;30         list-style:none;31     }32     33     /*去除超链接的下划线 块状的形式存在*/34     ul li a{35         color:#fff;36         text-decoration:none;37         line-height:29px;38         width:91px;39         height:29px;40         margin:0px;41         padding:0px 0px 0px 8px;42         display:block;43         border-right:1px solid #ccc;44         border-bottom:1px solid #ccc;45         background:#83cf33;46     }47     48     /*设置子菜单的长宽*/49     ul li ul li{50         height:25px;51         width:100px;    52     }53     54     /*设置子菜单下超链接的背景色*/55     ul li ul li a{56         background:#b2da7e;57         line-height:24px;    /*设置行间的距离*/58     }59     60     /*设置超链接的背景色*/61     ul li a:hover{62         background:#94ea10;63     }64     65     /*吧子菜单隐藏起来*/66     ul li ul{67         visibility:hidden;68     }69     70     /*当鼠标在菜单上得时候显示子菜单*/71     ul li:hover ul{72         visibility:visible;    73     }74     75     /*显示子菜单的超链接*/76     ul li ul li a:hover{77         background:#a5d561;            78     }

转载于:https://www.cnblogs.com/Jimmy009/archive/2012/02/24/2367148.html

你会利用css写下拉列表框吗？相关推荐

利用CSS写简单爱心
学习CSS三天了,可以利用目前所学的制作一个简单的爱心仅仅需要三个盒子一个正方形,两个圆如下图: 或许还不是能很清楚的看出来,我把多余的部分消除了,如下: 好了,有了结构,就可以来写代码了主体 ...
利用CSS写一个底部弧度效果
效果图: 代码: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset=&qu ...
css写出三角形（兼容IE）
利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; border-right: ...
利用CSS伪元素写三角形
在做一些网页布局的时候,经常会遇到各种方向的三角形,常常令人头疼,今天给大家介绍一些利用CSS伪元素写各个方向三角形的方法目录一.CSS伪元素写三角形 1.向右的三角形 2.向上的三角形 3.向下 ...
网页通过CSS写出生日倒计时（利用：日期倒计时、元素自动旋转、边框视觉按钮效果）[直接复制代码即可实现、含注释]
图片效果 ↓(代码为粉图,生日歌自动播放) 视频效果 ↓(音乐为自动播放) 网页通过CSS写出生日倒计时(利用:日期倒计时.元素自动旋转.边框视觉按钮效果) 代码 ↓(可直接复制使用,音乐引用网易云音 ...
js锚点定位_overflow属性详解，利用CSS实现锚点定位
1.overflow的裁剪界线--border-box overflow属性用于指定块容器元素的内容溢出时的表现方式--滚动,裁剪,自适应."BFC的最佳结界"只是其衍生出来的特性 ...
利用css transition属性实现一个带动画显隐的微信小程序部件
我们先来看效果图像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的,但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性它不好使(下面说明)所以我们这个时候会 ...
html四边形的的框怎么编写,html知识点之利用css四边形切角并且加上边框
html知识点之利用css四边形切角并且加上边框 html知识点之利用css四边形切角并且加上边框前言这几个月做了很多前端工作,其中一个需求还是蛮头疼,UI给的图上面的四边形是一个带斜边的,直接用 ...
css 查看更多_在Scrapy中如何利用CSS选择器从网页中采集目标数据——详细教程（上篇）...
/前言/ 今天小编给大家介绍Scrapy中另外一种选择器,即大家经常听说的CSS选择器. /CSS基础/ CSS选择器和Xpath选择器的功能是一致的,都是帮助我们去定位网页结构中的某一个具体的元素, ...

你会利用css写下拉列表框吗？

你会利用css写下拉列表框吗？相关推荐

最新文章

热门文章