Javascript下拉导航
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下拉导航的更多相关文章
- HTML DOM部分---做竖向横向的下拉导航 下拉菜单 图片轮播(圆点、箭头) 选项卡 进度条;
1,竖向下拉导航 鼠标单击打开 再打击关闭 <style> *{ margin:0px auto; padding:0px;} div{ width:100px; height:50px; ...
- jQuery实现淡入淡出二级下拉导航菜单的方法
本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...
- 一、简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏
一.简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏 <html lang="en"> <head> <meta charset=" ...
- 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...
- 通过html和css做出下拉导航栏的效果
通过观察了百度的首页,对于更多产品一栏,觉得可以不涉及JS便可写出下拉导航栏的效果 1.先设计出大体的框架 <div class="nav"> <ul> & ...
- 纯CSS实现二级下拉导航菜单
这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...
- CSS制作一个简单网页的下拉导航栏
网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...
- MDNavBarView下拉导航菜单(仿美团导航下拉菜单)
说到下拉导航菜单这个东西用得还真不少,细心算一下做开发以来这样的菜单已经写了第三次了,但基本都是不能复用.感觉特累人.不经意看到同事写一个类似的下拉菜单,但他引用了开源库仿大众菜单的库,大致看了一下, ...
- 一款jQuery立体感动态下拉导航菜单特效
一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...
随机推荐
- org.eclipse.swt.custom.StyledText.getScrollbarsMode()I
错误: org.eclipse.swt.custom.StyledText.getScrollbarsMode()I 解决方法: 1 卸载,并手工清除myeclipse全部文件 2 重新安装myecl ...
- VS工具--GhostDoc
一.介绍: GhostDoc是Visual Studio的一个免费插件,可以帮助开发人员编写XML格式的注释文档. C#中XML格式的文档注释好处多多:Visual Studio会在很多地 ...
- windows平台解决quick3.5final + sublimeText3 模拟器找不到的问题
下载了quick3.5 准备在sublime上进行开发,结果发现quick3.5中的player模拟器不见了,原来模拟器移到了quick引擎主目录下的 /tools/simulator/runtime ...
- js小知识归纳(待续)
1.javascript 中 if (window != top) top.location.href = location.href;的意思 如果当前窗口不是最上层窗口(比如是在Iframe中),那 ...
- for循环j = j++ 和 j = ++j
package com.test.forname; public class TestForName { public static void main(String[] args) throws E ...
- IO流-字节输出流OutputStream异常处理
package it.cast_01; import java.io.FileNotFoundException; import java.io.FileOutputStream; import ja ...
- avalon复杂绑定
样式操作:ms-css-样式名=“样式值”,ms-class ms-css-width="prop"(自动补px) ms-css-height="{{prop}}%&qu ...
- Stl源码剖析 第三章 iterator摘要
1. Stl的设计思想是: 将数据容器和算法分开,彼此独立设计,最后再以一贴胶合剂将它们撮合在一起,这个胶合剂就是迭代器. 2. 从3.2节迭代器的实现可知,如果要设计一个与容器分离实现的迭代器,会暴 ...
- spring 配置 redis
1.maven相关pom.xml <dependencies> <!--spring redis--> <dependency> <groupId>or ...
- 有关uploadifive的使用经验
这段时间做了一个项目用到uploadifive上传控件,和uploadify不同,这个控件是基于HTML5的版本而不用支持falsh,因而移动端也可以使用. 整理用过的相关属性与方法: 属性 作用 a ...