Javascript下拉导航

时间：2015-09-15 09:21:14 阅读：278 评论：0 收藏：0 [点我收藏+]

标签：

1、右侧导航

技术分享

tree.js

function Toggle(e){
        if(!document.getElementById) return;
        if(!e) var e = window.event;
        whichlink=(e.target)? e.target.id: e.srcElement.id;
        obj=document.getElementById(whichlink+"menu");
        visible=(obj.style.display=="block")
        key=document.getElementById(whichlink);
        keyname=key.firstChild.nodeValue.substring(3);
        if(visible){
            obj.style.display="none";
            key.firstChild.nodeValue="[+]"+keyname;
        }else{
            obj.style.display="block";
            key.firstChild.nodeValue="[-]"+keyname;
        }
    }
    document.getElementById("products").onclick=Toggle;
    document.getElementById("support").onclick=Toggle;
    document.getElementById("contact").onclick=Toggle;

tree.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Navigation Tree</title>
    <style>
        A{text-decoration: none;}
        #productsmenu,#supportmenu,#contactmenu{
            display: none;
            margin-left: 2em;
        }
    </style>
</head>
<body>
<h1>Navigation Tree Example</h1>
<p>The Navigation tree below allows you to expand and collapse items.</p>
<ul>
    <li>
        <a href="#" id="products">[+]Products</a>
        <ul ID="productsmenu">
            <li><a href="">Product List</a></li>
            <li><a href="">Order Form</a></li>
            <li><a href="">Price List</a></li>
        </ul>
    </li>
    <li>
        <a href="#" id="support">[+]Support</a>
        <ul ID="supportmenu">
            <li><a href="">Product List</a></li>
            <li><a href="">Order Form</a></li>
        </ul>
    </li>
    <li>
        <a href="#" id="contact">[+]Contact</a>
        <ul ID="contactmenu">
            <li><a href="">Product List</a></li>
            <li><a href="">Order Form</a></li>
        </ul>
    </li>
</ul>
<script language="JavaScript" type="text/javascript" src="tree.js">
</script>
</body>
</html>

View Code

2、下拉导航

技术分享

dropdown.js

var t=false,cuurent;

function SetupMenu(){
    if(!document.getElementsByTagName()) return;
    items=document.getElementsByTagName("li");
    for(i=0;i<items.length;i++){
        if(items[i].className != "menu")    continue;
        thelink = findChild(items[i],"A");
        thelink.onmouseover=ShowMenu;
        thelink.onmouseout=StartTimer;
        if(ul=findChild(items[i],"UL")){
            ul.style.display = "none";
            for(j=0;j<ul.childNodes.length;j++){
                ul.childNodes[j].onmouseover=ResetTimer;
                ul.childNodes[j].onmouseout=StartTimer;
            }
        }
    }
}

function findChild(obj,tag){
    cn = obj.childNodes;
    for(k=0;k<cn.length;k++){
        if(cn[k].nodeName==tag) return cn[k];
    }
    return false;
}

function ShowMenu(){
    if(!e) var e = window.event;
    thislink = (e.target)? e.target: e.srcElement;
    ResetTimer();
    if(cuurent) HideMenu(cuurent);
    thislink = thislink.parentNode;
    cuurent=thislink;
    ul=findChild(thislink,"UL");
    if(!ul) return;
    ul.style.display="block";
}

function HideMenu(thelink){
    ul=findChild(thelink,"UL");
    if(!ul) return;
    ul.style.display="none";
}

function ResetTimer(){
    if(t) window.clearTimeout(t);
}

function StartTimer(){
    t= window.setTimeout("HideMenu(cuurent)",200);
}

window.onload=SetupMenu;

dropdown.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>A DOM dorp_down menu</title>
    <link rel="stylesheet" href="dropdown.css " type="text/css"/>
    <script language="JavaScript" type="text/javascript" src="dropdown.js"></script>
</head>
<body>
<h1>Menu Test</h1>
<ul id="menu">
    <li class="menu"><a href="#">Home</a></li>
    <li class="menu"><a href="#">Products</a>
        <ul>
            <li><a href="#">SubItem1</a></li>
            <li><a href="#">SubItem2</a></li>
            <li><a href="#">SubItem3</a></li>
        </ul>
    </li>
    <li class="menu"><a href="#">Supprot</a>
        <ul>
            <li><a href="#">SubItem1</a></li>
            <li><a href="#">SubItem2</a></li>
            <li><a href="#">SubItem3</a></li>
        </ul>
    </li>
    <li class="menu"><a href="#">Employee</a>
        <ul>
            <li><a href="#">SubItem1</a></li>
            <li><a href="#">SubItem2</a></li>
        </ul>
    </li>
    <li class="menu"><a href="#">Contact Us</a>
        <ul>
            <li><a href="#">SubItem1</a></li>
            <li><a href="#">SubItem2</a></li>
            <li><a href="#">SubItem3</a></li>
        </ul>
    </li>
</ul>
</body>
</html>

View Code

dropdown.css

#menu{
    position: absolute;
}
#menu li{
    float: left;
    list-style-type: none;
    padding-right: 20px;
    width: 100px;
    background-color: silver;
}

#menu li ul{
    background-color: silver;
    margin: 0px;
    padding: 0px;
}

#menu li ul li{
    padding: 0px;
    margin: 0px;
    float: none;
    list-style-type: none;
    width: 80px;
}

View Code

Javascript下拉导航

标签：

原文地址：http://www.cnblogs.com/xuhuaiqu/p/4809223.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行