用js写的极简的导航菜单，带下拉列表
太简单了，不多说，但是自己还是写了一会，因为总会出现这样那样小的错误，毕境最近在复习和学习一些前台，欢迎看到的各位能给点改进意见或者其它的，Thank you!
首先是发图，只用CSS写了结构，几乎没加任何修饰，因为现在不是做那个的时候；
说明：如图一横向的菜单，当鼠标悬浮在上边时，下拉菜单出现，当鼠标不在上边时下拉菜单隐藏，仅此而已
环境：FireFox 23.0.1
aaarticlea/png;base64,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" alt="" />
原代码，都在一个页面中吧，只是为了学习而已
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
#menu ul{
padding:0;margin:0;
}
#menu li{
position:relative;
width:100px;
display:inline-block;
}
#menu li ul{
position:absolute;
top:100%;
left:0;
height:auto;
background-color:white;
}
</style> </head>
<body>
<a href="javascript:void(0)" onClick="menu()">Bind The Click</a>
<ul id="menu">
<li>
Home
<ul>
<li>Home</li>
<li>Product</li>
<li>Address</li>
<li>Contract</li>
<li>Help</li>
</ul>
</li>
<li>Product</li>
<li>Address</li>
<li>Contract</li>
<li>
Help
<ul>
<li class="home">Home</li>
<li>Product</li>
<li>Address</li>
<li>Contract</li>
<li>Help</li>
</ul>
</li>
</ul>
<script type="text/javascript">
function menu(){
var elem=document.getElementById("menu"); var ul=elem.getElementsByTagName("ul")
for(var i=0;i<ul.length;i++){
ul[i].style.display="none";
} //bind the action
var li=elem.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].onmouseover=function(){
var inli=this.getElementsByTagName("ul");
for(var j=0;j<inli.length;j++){
inli[j].style.display="block";
}
};
li[i].onmouseout=function(){
var inli=this.getElementsByTagName("ul");
for(var j=0;j<inli.length;j++){
inli[j].style.display="none";
}
}
} }
window.onload=menu();
</script>
</body>
</html>
用js写的极简的导航菜单，带下拉列表的更多相关文章
- 实用js+css多级树形展开效果导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- tinyriscv---一个从零开始写的极简、易懂的开源RISC-V处理器核
本项目实现的是一个微riscv处理器核(tinyriscv),用verilog语言编写,只求以最简单.最通俗易懂的方式实现riscv指令的功能,因此没有特意去对代码做任何的优化,因此你会看到里面写的代 ...
- js写的一个简单的手风琴菜单
1 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&q ...
- 用js写的简单的下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 基于 Node.js 平台，快速、开放、极简的 web 开发框架。
资料地址:http://www.expressjs.com.cn/ Express 基于 Node.js 平台,快速.开放.极简的 web 开发框架. $ npm install express -- ...
- js消除小游戏(极简版)
js小游戏极简版 (1) 基础布局 <div class = "box"> <p></p> <div class="div&qu ...
- 自制 os 极简教程1：写一个操作系统有多难
为什么叫极简教程呢?听我慢慢说 不知道正在阅读本文的你,是否是因为想自己动手写一个操作系统.我觉得可能每个程序员都有个操作系统梦,或许是想亲自动手写出来一个,或许是想彻底吃透操作系统的知识.不论是为了 ...
- 极简Node教程-七天从小白变大神（一：你需要Express）
如果说用一句话来概括Node那就是:它开启了JavaScript服务器端语言. Node系列的文章并不会从一开始长篇概论的讲Node的历史,安装,以及其他很琐碎的事情.只会专门介绍关于Node或者准确 ...
- AI 绘画极简教程
昨天在朋友圈发了几张我用AI绘画工具Disco Diffusion画的画 既然有同学问,就写个极简教程吧,画个图是足够了,想要深入了解还是自行百度吧,可以找到更详细的教程. 第 0 步:学会上网,注册 ...
随机推荐
- Lua面向对象
lua中的table就是一种对象,但是如果直接使用仍然会存在大量的问题,如下: 1 Account = {balance = 0}2 function Account.withdraw(v)3 Acc ...
- 2016huasacm暑假集训训练三 F - Jungle Roads
题目链接:http://acm.hust.edu.cn/vjudge/contest/123674#problem/F 题意:在相通n个岛屿的所有桥都坏了,要重修,重修每一个桥所用的时间不同,求重修使 ...
- 数据字典生成工具之旅(5)：DocX组件读取与写入Word
由于上周工作比较繁忙,所以这篇文章等了这么久才写(预告一下,下一个章节正式进入NVelocity篇,到时会讲解怎么使用NVelocity做一款简易的代码生成器,敬请期待!),好了正式进入本篇内容. 这 ...
- SQL语句 - MERGE INTO 、Cross/Outer Apply用法理解
MERGE INTO 语法: MERGE INTO table_name alias1 USING (table|view|sub_query) alias2ON (join condition) W ...
- JAVA修饰符
修饰符用来定义类.方法或者变量,通常放在语句的最前端.我们通过下面的例子来说明: public class className { // ... } private boolean myFlag; s ...
- 理解AX InventTrans的几种状态
接触AX一段时间后,发现InventTrans表非常重要.它可以说是物流模块的核心,开发BI报表的话必须依赖此报表. 先来看官方释义: InventTrans表包含了库存交易的信息.当销售/采购订 ...
- avalon的表单验证
表单验证 avalon内置了强大的表单验证功能,它需要结合ms-duplex, ms-validate, ms-rules这个三个指令一起使用. ms-duplex负责监控每个表单元素的输入. ms- ...
- Servlet的历史与规范
http://blog.csdn.net/u010297957/article/details/51498018
- UWP&WP8.1 重新绘制图片 WriteableBitmap用法 图片转byte[]数组，byte[]数组转图片
---恢复内容开始--- WriteableBitmap 是UWP和WP8.1绘制图片的,重组图片的最重要方法.方法较为简单,方法多样性. 通过查看文档,WriteableBitmap的继承性是 ...
- centos7 使用systemd 自定义关机前脚本
systemd (centos7) 需求,关机前执行脚本 关机脚本vi /usr/bin/shutdown_cust.sh#!/bin/bashecho "zhengchangguanji& ...