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>

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>

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;

}

Javascript下拉导航的更多相关文章

  1. HTML DOM部分---做竖向横向的下拉导航 下拉菜单 图片轮播（圆点、箭头） 选项卡 进度条；

    1,竖向下拉导航 鼠标单击打开 再打击关闭 <style> *{ margin:0px auto; padding:0px;} div{ width:100px; height:50px; ...

  2. jQuery实现淡入淡出二级下拉导航菜单的方法

    本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...

  3. 一、简单的移动端tab头部二级下拉导航栏，向下弹出，向上隐藏

    一.简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏 <html lang="en"> <head> <meta charset=" ...

  4. 在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

  5. 通过html和css做出下拉导航栏的效果

    通过观察了百度的首页,对于更多产品一栏,觉得可以不涉及JS便可写出下拉导航栏的效果 1.先设计出大体的框架 <div class="nav"> <ul> & ...

  6. 纯CSS实现二级下拉导航菜单

    这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...

  7. CSS制作一个简单网页的下拉导航栏

    网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...

  8. MDNavBarView下拉导航菜单（仿美团导航下拉菜单）

    说到下拉导航菜单这个东西用得还真不少,细心算一下做开发以来这样的菜单已经写了第三次了,但基本都是不能复用.感觉特累人.不经意看到同事写一个类似的下拉菜单,但他引用了开源库仿大众菜单的库,大致看了一下, ...

  9. 一款jQuery立体感动态下拉导航菜单特效

    一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...

随机推荐

  1. NSUserDefaults的使用

    创建一个user defaults方法有多个,最简单得快速创建方法: NSUserDefaults *accountDefaults = [NSUserDefaultsstandardUserDefa ...

  2. JavaScript 中的对象

    JavaScript 中的对象 在 JavaScript 中,对象是数据(变量),拥有属性和方法. JavaScript 中的所有事物都是对象:字符串.数字.数组.日期,等等.   访问对象的属性 访 ...

  3. hihoCoder 1425 : What a Beautiful Lake（美丽滴湖）

    hihoCoder #1425 : What a Beautiful Lake(美丽滴湖) 时间限制:1000ms 单点时限:1000ms 内存限制:256MB Description - 题目描述 ...

  4. Linux解读

    Linux中权限(r.w.x)对于目录与文件的意义 一.权限对于目录的意义 1.首先要明白的是目录主要的内容是记录文件名列表和子目录列表,而不是实际存放数据的地方. 2.r权限:拥有此权限表示可以读取 ...

  5. Meta标签用法大全

    meta是html文档在head标签里定义的一个对文档进行描述的功能性标签 meta标签有下面的作用: 1.搜索引擎优化(SEO) 2.定义页面使用语言 3.自动刷新并指向新的页面 4.实现网页转换时 ...

  6. Nginx基础知识之————RTMP模块中的中HLS专题（翻译文档）

    一.在Nginx配置文件的RTMP模块中配置hls hls_key_path /tmp/hlskeys; 提示错误信息: nginx: [emerg] the same path name " ...

  7. 锁相关知识 & mutex怎么实现的 & spinlock怎么用的 & 怎样避免死锁 & 内核同步机制 & 读写锁

    spinlock在上一篇文章有提到:http://www.cnblogs.com/charlesblc/p/6254437.html  通过锁数据总线来实现. 而看了这篇文章说明:mutex内部也用到 ...

  8. 真核转录组(denovo/resequencing)及案例分析

    参考: 转录组文章的常规套路 文章解读:<Science>小麦转录组研究文章 转录组数据饱和度评估方法 Paper这个东西是多么的诱人,可以毕业,可以评职称,可以拿绩效. 现在的文章都是有 ...

  9. 本机不能访问虚拟机中flask的web服务器的解决办法

    在虚拟机的linux里写flask程序,在本机中用"ip:端口号"的方法不能访问,查资料试了各种方法都不行.最后发现问题出在flask程序本身: flask的app.run()方法 ...

  10. MySQL学习记录--操作时间数据

    1.返回日期的时间函数 date_add() : 可以为指定日期增加/减少任意一段时间间隔.下面举例将当前日期增加一个月和减少一个月 mysql month) as add_one_month; +- ...