这篇文章主要介绍了JS+CSS实现简单滑动门(滑动菜单)效果,通过JavaScript响应鼠标事件动态设置页面元素样式实现滑动菜单功能,需要的朋友可以参考下
本文实例讲述了JS+CSS实现简单滑动门的方法。分享给大家供大家参考。具体如下：
这是一款超简约设计的滑动门菜单，鼠标放到主菜单上，里面的内容会跟着变化，实际上本演示是一个范例，从代码中的注释你就能感觉到，每一步都有注释，对学习JavaScript和CSS都有帮助，也为你以后写出比这更漂亮、更实用的滑动门做铺垫。
运行效果截图如下：
在线演示地址如下：
http://demo.html.cn/js/2015/js-css-jdhd-menu-style-codes/
具体代码如下：
滑动门测试 #tab_container1{width:310px;text-align:left;border:1px solid #cccccc;background:url() repeat-x top;} .cls_tab_nav{height:24px;overflow:hidden;font-size:12px;background:url() repeat-x bottom; padding-left:10px;} .cls_tab_nav ul{font-size:9pt;margin:0;padding:0;} .cls_tab_nav_li{background:url() no-repeat -70px 0;width:70px;height:24px;line-height:24px;float:left;display:inline;overflow:hidden;text-align:center;cursor:pointer;} .cls_tab_nav_li_first{font-weight:bolder;background-position:0px 0px;} .cls_tab_nav_li a{text-decoration:none;color:#000000;font-size:12px;} .cls_tab_body{border-top:none;min-height:175px;padding:10px;height:175px;} .cls_div{display:none;font-size:14px;} .cls_tab_nav_li_first a{color:#c80000;}
- 百货大楼
- 八方购物
- 商场三
希望本文所述对大家的JavaScript程序设计有所帮助。
以上就是JS+CSS实现简单滑动门(滑动菜单)效果的详细内容，更多请关注本站其它相关文章！
