js实现横向伸展开的二级导航菜单代码
本文实例讲述了js实现横向伸展开的二级导航菜单代码。分享给大家供大家参考。具体如下：
这是一款js实现的横向伸展开二级导航菜单，鼠标放在一级菜单的第四个菜单项上，就能展开二级的菜单，菜单没有过多美化，只是一般的修饰，使用的朋友可根据您自己的网站风格重新美化菜单风格。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-r-show-menu-style-codes/
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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">
.suckerdiv { }
.suckerdiv ul { width: 120px; position: relative; }
.suckerdiv ul li ul { left: 120px; /* Parent menu width - 1*/ position: absolute; width: 140px; /*sub menu width*/ top: 0; display: none; }
/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul { left: 159px; /* Parent menu width - 1*/ }
/* menu links style */
.suckerdiv ul li a { display: block; color: #353302; text-decoration: none; font:12px 宋体; background: #eee; line-height:24px; padding: 0px 10px; border: 1px solid #fff; border-bottom: 0; }
.suckerdiv ul li a:visited { color: black; }
.suckerdiv ul li a:hover{ color: white; background-color: #97c839; }
.suckerdiv .subfolderstyle { }
.suckerdiv a.subfolderstyle:hover { background: #97c839 url() no-repeat center right; }
</style>
</head>
<body>
<script type="text/javascript">
var menuids = ["suckertree1"]
function buildsubmenus() {
for (var i = 0; i < menuids.length; i++) {
var ultags = document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t = 0; t < ultags.length; t++) {
ultags[t].parentNode.getElementsByTagName("a")[0].className = "subfolderstyle"
ultags[t].parentNode.onmouseover = function () {
this.getElementsByTagName("ul")[0].style.display = "block";
this.firstChild.style.backgroundColor = 'green';
}
ultags[t].parentNode.onmouseout = function () {
this.getElementsByTagName("ul")[0].style.display = "none"
this.firstChild.style.backgroundColor = '';
}
}
}
}
if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)
</script>
<div class="suckerdiv">
<ul id="suckertree1">
<li><a href="#">腾讯新闻</a></li>
<li><a href="#">腾讯汽车</a></li>
<li><a href="#">腾讯科技</a></li>
<li><a href="#">腾讯手机</a>
<ul>
<li><a href="#">HTC</a></li>
<li><a href="#">联想</a></li>
<li><a href="#">华为</a></li>
<li><a href="#">中兴</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关推荐
-
原生JS实现圣旨卷轴展开效果
在其他网站看见类似效果,但代码有400多行且看不懂,我用60多行的代码给予实现. 实现原理:(1)利用绝对定位固定好起始位置:(2)利用遮罩将右轴右侧的部分遮住:(3)让右轴和遮罩同时同速度向右运动! 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>诏书</title> <st
-
js实现超简单的展开、折叠目录代码
本文实例讲述了js实现超简单的展开.折叠目录代码.分享给大家供大家参考.具体如下: 这里介绍一款超简单的目录,展开菜单代码,鼠标点击即可展开,再次点击即可合拢,类似树形菜单的功能,网上见过很多,不多做介绍了,欢迎参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-show-hidden-list-menu-codes/ 具体代码如下: <title>可折叠展开的简单目录</title> <style> div{
-
js实现简单折叠、展开菜单的方法
本文实例讲述了js实现简单折叠.展开菜单的方法.分享给大家供大家参考.具体如下: 这里介绍的是意乱会折叠.展开的菜单导航栏,很老时候写的,CSS没有做美化,如果想用的朋友就自己美化吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-hidden-show-menu-codes/ 具体代码如下: <html> <script> function show(c_Str) {if(document.all(c_Str
-
JS+CSS实现的简单折叠展开多级菜单效果
本文实例讲述了JS+CSS实现的可折叠展开多级菜单效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS实现的多级折叠菜单,可折叠展开/合拢,没有引用任何的外部文件,也没有用到图片,虽然简单,而且还有些粗糙,但核心的东西已经展示给大家了,正在研究折叠菜单的朋友们,这一个小例子可能正是你需要的,好好研究一下吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-zdzk-menu-style-codes/ 具体代码如
-
JS实现鼠标滑过折叠与展开菜单效果代码
本文实例讲述了JS实现鼠标滑过折叠与展开菜单效果代码.分享给大家供大家参考.具体如下: 这是一款展开菜单特效,鼠标移上的时候自动展开,移走后自动折叠隐藏起来,运用了JS技术,并结合了CSS共同实现的效果.本折叠菜单类似QQ可折叠的好友列表一样,不少人喜欢这种菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hover-show-hidden-menu-style-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC
-
原生js实现新闻列表展开/收起全文功能
知识要点 1.实现原理很简单,通过点击a标签设置div的display属性隐藏或者显示, 主要是对dom操作的掌握. 2.需要用到的dom操作: parentNode 获取父级元素 nextSibling获取下一个紧跟的节点 previousSibling获取上一个紧跟的节点 3.注意事项: 要考虑到当点击展开全文的时候,其他已经展开的全文要收起来. 当用nextSibling获取下一个节点时候,不同浏览器的判断是不一样的 有的是获取元素,有的获取换行符或者空格,所以这里就要用到nodeType
-
JS+CSS实现DIV层的展开、收缩效果
本文为大家分享的第一个实例:JS控制DIV层的展开.收缩效果. <html> <head> <title>CSS+JS实现一个DIV层的展开/折叠效果</title> <style> * { margin:0; padding:0;} body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;} h1 { font:125% Arial, Helvetica,
-
JS右下角广告窗口代码(可收缩、展开及关闭)
本文实例讲述了JS右下角广告窗口代码.分享给大家供大家参考.具体如下: 这是一款右下角窗口JS代码,完美的右下角,仿新浪博客的右个角弹出窗口,这款Javascript代码在兼容性和操作舒适度方面做的相当不错.调用了几张外部的图片,使用时自行下载吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-right-buttom-show-close-able-adv-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "
-
js实现可折叠展开的手风琴菜单效果
本文实例讲述了js实现可折叠展开的手风琴菜单效果.分享给大家供大家参考.具体如下: 这是一款可折叠展开的菜单,手风琴菜单,运用CSS与JavaScript技术实现的合拢与伸展的网页菜单,代码简洁,来自老外的代码作品,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hidden-show-sfq-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XH
-
js实现点击向下展开的下拉菜单效果代码
本文实例讲述了js实现点击向下展开的下拉菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍js实现点击向下展开的下拉菜单特效代码,无调用jQuery,真正的JS下拉菜单,兼容性方面未做测试,觉得有用处的自己测试修正吧,本文仅提供基础的代码供参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-click-show-down-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//