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. spring mvc文件上传

    package com.haier.controller.newuser; import com.haier.commons.entity.Response; import com.haier.com ...

  2. Intent四个重要属性

    Intent四个重要属性   Intent作为联系各Activity之间的纽带,其作用并不仅仅只限于简单的数据传递.通过其自带的属性,其实可以方便的完成很多较为复杂的操作.例如直接调用拨号功能.直接自 ...

  3. Sprint(第十天11.23)

  4. UTF-8 ->GBK

    /** * GBK->UTF8 */ //方法一 旧方法 //NSString *encode1 = [@"%E6%88%91" stringByReplacingPerce ...

  5. 剑指offer四:链表中倒数第k个结点

    输入一个链表,输出该链表中倒数第K个结点 public class ListNode { int val; ListNode next = null; ListNode(int val) { this ...

  6. display inline-block 垂直居中

    table td:after {display:inline-block;width:0;height:100%;vertical-align:middle;content:'';}

  7. js和jquery获取当前对象的子元素

    开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法. HTML片断: <ul class="box"> <li>子元素1</l ...

  8. 第一次写Web API接口

    API是什么?只知道是网络接口,具体怎么写?不会!如何调用?不会!那怎么办? 第一次的经历~~ 需求:为其他项目提供一个接口 功能:为项目提供询盘信息和商家信息,格式为Json字符串 拿过来,就开始做 ...

  9. 【Java】Annotation_学习笔记

    Annotation 1.APT: 访问和处理Annotation的工具统称,即Annotation Process Tool. 2.java.lang下提供的五种基本Annotation: @Ove ...

  10. [经验] Win7减肥攻略(删文件不删功能、简化优化系统不简优化性能)

    [经验] Win7减肥攻略(删文件不删功能.简化优化系统不简优化性能) ☆心梦无痕☆ 发表于 2014-1-24 11:15:04 https://www.itsk.com/thread-316471 ...