教程集 www.jiaochengji.com
教程集 >  脚本编程  >  javascript  >  正文 js右边弹出导航菜单

js右边弹出导航菜单

发布时间:2016-11-07   编辑:jiaochengji.com
教程集为您提供js右边弹出导航菜单等资源,欢迎您收藏本站,我们将为您提供最新的js右边弹出导航菜单资源
仿alibaba国际站的一个地区左右式菜单
提示:您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> ul,li,dl,dd { padding:0; margin:0; list-style-type:none; } .menu1{ width:182px; border:1px solid #feb951; background:#fef4ea; padding-top:3px; font-size:12px; } .lbox_bot { height:4px; overflow:hidden; background:url(../images/lbox_bot.gif) 0 0 no-repeat; } .area li{ height:22px; line-height:22px; text-align:left; position:relative; } .area li a { display:block; padding-left:20px; } .area li dl { width:180px; overflow:hidden; display:none; position:absolute; top:-1px; right:-182px; z-index:35533; border:1px solid #feb951; background:#fef4ea; padding:5px 0; } .area li dl a:hover { border:1px solid #feb951; background:#fff; margin:0 5px; padding-left:14px; } .area li.lion { height:20px; line-height:20px; text-align:left; border-top:1px solid #ffb850; border-bottom:1px solid #ffb850; background:#ffe7cc; } .area li.lion dl {display:block;} </style> </head> <body> <script type=text/javascript> function onload() { try{ var lies = document.getElementById("area").getElementsByTagName("li"); for (var i=0; i< lies.length; i ) { lies[i].onmouseover= function() { this.className="lion"; } lies[i].onmouseout= function() { this.className=""; } } } catch(e){} } onload(); </script> </body> </html></textarea>
提示:您可以先修改部分代码再运行

您可能感兴趣的文章:
php如何实现点击左边导航右边跳转到对应页面
js 屏蔽右键菜单效果代码
7款风格新颖的jQuery/CSS3菜单导航分享
对css滑动门技术的一些总结和归纳
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
jQuery右键菜单插件 jQuery ContextMenu
jQuery菜单插件 Smooth Navigational Menu
jquery弹性滑动导航菜单
电脑浏览器主页恶意篡改为2345导航怎么修改
js 树状菜单

[关闭]
~ ~