收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 1304|回复: 0

咱们在网页上会遇到很多导航条下拉效果,那么他是怎么实现的我们就来看看?

[复制链接]
发表于 2012-7-29 14:26:49 | 显示全部楼层 |阅读模式
本帖最后由 UED 于 2012-8-5 15:36 编辑

css部分
div{width:100px; padding:10px; background:#f00; line-height:1em; text-align:center; float:left;margin-left:20px;}
ul{list-style:none; display:none;}
ul li{line-height:30px; width:100px; height:30x; margin-top:5px; background:#FF0;}

javascript部分(简化)
<script type="text/javascript">
      function show(id,moue){
                                     document.getElementById(id).style.display=moue;
  }
</script>

html部分(javascript优化后)
<div id="mouse">
  <a href="#">活动内容</a>
  <ul id="box1">
    <li> <a href="#">活动1</a></li>
    <li> <a href="#">活动1</a></li>
    <li>活动1</li>
    <li>活动1</li>
    <li>活动1</li>
  </ul>
</div>
<div id="mouse">
  <a href="#">活动内容</a>
  <ul id="box3">
    <li>活动1</li>
    <li>活动1</li>
    <li>活动1</li>
    <li>活动1</li>
    <li>活动1</li>
  </ul>
</div>
<div id="mouse">
  <a href="#">活动内容</a>
  <ul id="box2">
    <li>活动1</li>
    <li>活动1</li>
    <li>活动1</li>
    <li>活动1</li>
    <li>活动1</li>
  </ul>
</div>
您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-5-29 02:00 , Processed in 0.093516 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表