JavaScript(js)网页–下拉菜单制作
JavaScript(js)网页–下拉菜单制作
在网页的设计中,经常会出现二级下拉菜单,当鼠标经过时,显示二级菜单,鼠标离开时隐藏。例如新浪网
鼠标放到微博、博客或邮箱上面时,会出现一个二级菜单,鼠标离开则隐藏。
设计简单的下拉菜单栏
复制以下代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉菜单</title>
<style>
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
div {
width: 1200px;
height: 30px;
margin: 0px auto;
background-color: blanchedalmond;
}
li {
list-style: none;
}
div li {
position: relative;
float: right;
text-align: center;
border: 1px solid black;
line-height: 30px;
width: 80px;
height: 30px;
}
div ul {
position: absolute;
top:30px;
display: none;
}
div ul li{
float: left;
width: 120px;
height: 30px;
background-color: pink;
}
</style>
</head>
<body>
<div>
<li><a href="#">邮箱</a>
<ul>
<li><a href="#">免费邮箱</a></li>
<li><a href="#">VIP邮箱</a></li>
<li><a href="#">企业邮箱</a></li>
<li><a href="#">新浪邮箱客户端</a></li>
</ul>
</li>
<li><a href="#">博客</a>
<ul>
<li><a href="#">博客评论</a></li>
<li><a href="#">来读提醒</a></li>
</ul>
</li>
<li><a href="#">微博</a>
<ul>
<li><a href="#">私信</a></li>
<li><a href="#">评论</a></li>
<li><a href="#">@我</a></li>
</ul>
</li>
<li ><a href="#">登录</a></li>
</div>
<script>
var div = document.querySelector('div');
var lis = div.children;
for (var i=0;i<lis.length;i++){
//鼠标经过,出现下拉菜单
lis[i].οnmοuseοver=function(){
this.children[1].style.display='block';
}
//鼠标离开,隐藏下拉菜单
lis[i].οnmοuseοut=function(){
this.children[1].style.display='none';
}
}
</script>
</body>
</html>
JavaScript(js)网页–下拉菜单制作相关推荐
- JavaScript(js)网页--下拉菜单制作
JavaScript(js)网页–下拉菜单制作 在网页的设计中,经常会出现二级下拉菜单,当鼠标经过时,显示二级菜单,鼠标离开时隐藏.例如新浪网 鼠标放到微博.博客或邮箱上面时,会出现一个二级菜单,鼠标 ...
- 15个精心挑选的 jQuery 下拉菜单制作教程
下拉菜单是网站导航常用的表现形式之一,能够呈现更多的导航内容.如果网站能够设计出有吸引力的网站导航,将会吸引更多的用户去浏览网站的内容.今天本文就为大家挑选了25个非常好的 jQuery 下拉菜单制作 ...
- js实现下拉菜单动画效果
js实现下拉菜单动画效果 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
- vue.js bootstrap 下拉列表_Excel下拉菜单制作的小技巧
在工作中,常常需要对多行多列的数据设置下拉菜单,但在使用数据验证,设置下拉菜单时,序列来源是不能执行引用多行多列区域的,否则即会出现下图提示框,应该如何进行设置呢? 第一步:定义名称框 鼠标依次点击公 ...
- 用JS控制下拉菜单效果
今天,突然想复习下之前学习做导航菜单的一些知识.之后觉得下拉菜单非常好玩儿,于是自己试着用JS调出了效果.网上有众多方法,但是感觉不是很对我的胃口,我喜欢HTML/CSS/JavaScript分离着写 ...
- html下拉菜单制作方法,CSS3制作Dropdown下拉菜单的方法
:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id="comment"的位置,俗 ...
- html JS实现下拉菜单,vue.js怎么实现下拉框
本文环境:windows7.vue2.9.6,该方法适用于所有品牌的电脑. vue.js实现下拉框的方法: www.php.cn vue下拉框 {{x.name}}{{x.famname}} {{on ...
- 使用Jquery、HTML、CSS、JS实现下拉菜单列表
下拉菜单列表 当鼠标进入时,效果如下: 鼠标离开时,下拉列表进行隐藏.效果如下: 下面展示代码 // <!DOCTYPE html> <html lang="en" ...
- html+css简单下拉菜单制作
额,今天心血来潮做了个简单的下拉菜单,不过用的css操作的,啧! 最终效果: 代码: <!DOCTYPE html> <html> <head><title& ...
最新文章
- LeetCode 217 Contains Duplicate--python,java解法--set--简单
- postgresSQL 实现数据修改后,自动更新updated_date/ts等字段
- 思科模拟器:[1]安装及汉化详解
- java相遇问题_行程问题
- oracle没报错 开不了库,oracle 数据库无法启动,报错 terminating the instance due to error 16014...
- 746. 使用zui小花费爬楼梯(JavaScript)
- 机器学习精讲中7.1固定特征核中关于N维向量多项式特征映射的理解(二)
- Oozie 安装及 examples app 的使用
- 有限差分法下-一维中的显示有限差分(python)
- SRIO学习笔记之SRIO简介与Xilinx SRIO ip核例程详解
- 【编程语言】PHP完全自学手册
- xsmax进入dfu模式_苹果xsmax怎么进入dfu
- IMO 2017 T4解答
- uniapp的苹果全屏播放再退出会导致页面字体变大解决方法
- 移动设备上“精灵图”的制作
- 用OSM数据画地图(含代码)
- springboot-java常用注解
- FreeModbus library 程序详解
- 计算机专业需要考英语口语吗,既不考数学也不考英语,这些考研专业你知道吗?...
- 〖Python 数据库开发实战 - MongoDB篇⑤〗- 安装和使用MongoDB客户端软件
热门文章
- hic染色体构想_30个使您的网站看起来更好的快速构想
- 24个终极数据科学项目(免费获取资源)
- ORACLE 11G RAC--CLUSTERWARE工具集1
- linux下安装rpm
- vc克罗斯方块c语言代码,球员推荐 | 欧冠赛季闪亮登场​,这些球员值得一看!​...
- RangeValidator控件
- 一套网页黑色主题的配色
- 虹科案例高速相机打破了实时混合现实的障碍
- 四色问题C语言解决,使用邻接矩阵存储地图
- 灵活用工代发薪平台有什么风险 找第三方代发工资合法吗