WEB教程基地:www.91ctc.com为你搭建学习WEB技术的优秀平台
网站地图 加入收藏 设为首页
您的位置:本站首页>>DIV CSS HTML>>不使用Javascript实现下拉菜单(纯HTML+CSS写法)

不使用Javascript实现下拉菜单(纯HTML+CSS写法)

[ 录入者:91ctc | 时间:2013-11-20 12:33:33 | 作者: 91ctc| 来源:本站 | 浏览: 次 ]

先给效果看看

点击效果演示

分析代码

其实就是使用onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'"

鼠标放上去和鼠标拿开后触发的事件。

看代码吧:

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>不使用JS的下拉菜单写法</title>  
  6. <link href="css/css.css" rel="stylesheet" type="text/css" />  
  7. </head>  
  8.   
  9. <body>  
  10. <div id="nav">  
  11.     <ul>  
  12.     <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的首页       
  13.         <div class="list">  
  14.             <a href="#">我爱CSS</a><br />  
  15.             <a href="#">我的首页</a><br />  
  16.             <a href="#">我的日志</a><br />  
  17.             <a href="#">我的日志</a><br />  
  18.             <a href="#">我的相册</a><br />  
  19.             <a href="#">我的收藏</a><br />  
  20.         </div>  
  21.     </li>  
  22.     <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社区圈子   
  23.     <div class="list">  
  24.         <a href="#">我爱CSS</a><br />  
  25.         <a href="#">我的首页</a><br />  
  26.         <a href="#">我的日志</a><br />  
  27.         <a href="#">我的相册</a><br />  
  28.         <a href="#">我的收藏</a><br />  
  29.     </div>  
  30.     </li>  
  31.     <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的短信       
  32.     <div class="list">  
  33.         <a href="#">我爱CSS</a><br />  
  34.         <a href="#">我的相册</a><br />  
  35.         <a href="#">我的收藏</a><br />  
  36.     </div>  
  37.     </li>  
  38.     <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">账户管理       
  39.     <div class="list">  
  40.         <a href="#">我爱CSS</a><br />  
  41.         <a href="#">我的首页</a><br />  
  42.         <a href="#">我的日志</a><br />  
  43.         <a href="#">我的相册</a><br />  
  44.         <a href="#">我的收藏</a><br />  
  45.         <a href="#">我的日志</a><br />  
  46.         <a href="#">我的相册</a><br />  
  47.         <a href="#">我的收藏</a><br />  
  48.     </div>  
  49.     </li>  
  50.     </ul>  
  51. </div>  
  52. <div style="width:600px; height:200px; padding-left:5px; padding-top:5px; position:absolute; margin-top:33px; background-color:#99CC66">  
  53.     <p>最近一年多的时间,在网上经常看到有人询问“网页设计如何入门”、“如何设计网页”……之类的问题。笔者从接触网页到从事这行业虽然已有六年多,但是要回答这些问题,似乎不能一下子回答上来,因为我越来越感觉到设计网页是一个很困难的工作(也许是下水越久,陷得越深的道理吧),即使这样,笔者还是分享一些心得和经验给大家,愿大家都能在网页设计领域里步步高升。</p>  
  54.     <p>首先,要明确“网页设计”包含哪些工作,需要用到什么知识。说白了,网页设计无非包含两大部分:设计网页,制作网页。所以,只要初学者从这两方面着手即可。</p>  
  55. </div>  
  56. </body>  
  57. </html>  

CSS核心部分:

CSS Code复制内容到剪贴板
  1. .menu1{   
  2.     width:120px;   
  3.     height:auto;   
  4.     margin:6px 4px 0px 0px;   
  5.     border:1px solid #9CDD75;   
  6.     background-color:#F1FBEC;   
  7.     color:#336601;   
  8.     padding:6px 0px 0px 0px;   
  9.     cursor:hand;   
  10.     overflow-y:hidden;   
  11.     filter:Alpha(opacity=70);   
  12.     -moz-opacity:0.7;   
  13. }   
  14. .menu2{   
  15.     width:120px;   
  16.     height:18px;   
  17.     margin:6px 4px 0px 0px;   
  18.     background-color:#F5F5F5;   
  19.     color:#999999;   
  20.     border:1px solid #EEE8DD;   
  21.     padding:6px 0px 0px 0px;   
  22.     overflow-y:hidden;   
  23.     cursor:hand;   
  24. }  

DEMO下载:点击下载

PS:如果您对本文有纠错、质疑、转载、举报等问题时,请加入到网站Q&Q&群:86783981(验证信息:91ctc.com)提交您的问题,让大伙一块讨论。谢谢您的支持,计算机教程中心网将会一如既往的提供优秀资源助您一臂之力!
关闭】【返回顶部

您可能感兴趣的文章
91ctc.com 网络先锋,引领科技,本站原创作品[转载请注明出处]。网站Q&Q&群:86783981(验证信息:91ctc.com)
Copyright© 2010-2017 计算机教程中心网 . All rights reserved. 苏ICP备11081842号