JS-制作可伸缩的水平菜单栏

简介: 可伸缩的导航菜单 * { margin: 0; padding: 0; font-size: 14px; } a { color: #333; text-decoration: none } ul { list-st...
 

<!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">

<head>

<meta name="author" content="郭菊锋,702004176@qq.com" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可伸缩的导航菜单</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 14px;
}

a {
color: #333;
text-decoration: none
}

ul {
list-style: none;
height: 30px;
border-bottom: 5px solid #F60;
margin-top: 20px;
padding-left: 50px;
}

ul li {
float: left
}

ul li a {
display: block;
height: 30px;
text-align: center;
line-height: 30px;
width: 120px;
background: #efefef;
margin-left: 1px;
}

a.on,
a:hover {
background: #F60;
color: #fff;
}
</style>
<script>
window.onload = function() {
var aA = document.getElementsByTagName('a');
for(var i = 0; i < aA.length; i++) {
aA[i].onmouseover = function() {
var This = this;
clearInterval(This.time);//一开始要清楚定时器!!删了一下试试还是可以的呀。
This.time = setInterval(function() {
This.style.width = This.offsetWidth + 8 + "px";
if(This.offsetWidth >= 160)//这里,只有一行代码,所以不加花括号也是可以的。
clearInterval(This.time);
}, 30)
}
aA[i].onmouseout = function() {//和over时的效果一样,就是缩回来罢了
clearInterval(this.time);
var This = this;
this.time = setInterval(function() {
This.style.width = This.offsetWidth - 8 + "px";
if(This.offsetWidth <= 120) {//offsetWidth还有这个妙用,这的是元素的实际宽度吗?
This.style.width = '120px';
clearInterval(This.time);
}
}, 30)
}
}
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<!--调用jq-->
<!--<script>
// jq的制作方法
$(function() { //$()==js里面的:window.onload = function(){};让页面加载完成之后再进行调用函数。
$('a').hover(
//$('x')选择器,选择标签是x的,括号里的引号里添加的是标签名
//hover方法,表示鼠标经过的时候的效果
//下设两个函数,一个鼠标移入动作,一个鼠标移出动作。
function() {
$(this).stop().animate({
"width": "160px"
}, 200); //jq自带的animate动画效果
},
function() {
$(this).stop().animate({
"width": "120px"
}, 200);
}

)

})
</script>-->
</head>

<body>
<ul>
<li>
<a class="on" href="#">首  页</a>
</li>
<li>
<a href="#">新闻快讯</a>
</li>
<li>
<a href="#">产品展示</a>
</li>
<li>
<a href="#">售后服务</a>
</li>
<li>
<a href="#">联系我们</a>
</li>
</ul>
<p>来自慕课网教程
<a>http://www.imooc.com/video/93</a>
</p>
</body>

原生js代码
 1 <script>
 2             window.onload = function() {
 3                 var aA = document.getElementsByTagName('a');
 4                 for(var i = 0; i < aA.length; i++) {
 5                     aA[i].onmouseover = function() {
 6                         var This = this;
 7                         clearInterval(This.time);
 8                         This.time = setInterval(function() {
 9                             This.style.width = This.offsetWidth + 8 + "px";
10                             if(This.offsetWidth >= 160)
11                                 clearInterval(This.time);
12                         }, 30)
13                     }
14                     aA[i].onmouseout = function() {
15                         clearInterval(this.time);
16                         var This = this;
17                         this.time = setInterval(function() {
18                             This.style.width = This.offsetWidth - 8 + "px";
19                             if(This.offsetWidth <= 120) {
20                                 This.style.width = '120px';
21                                 clearInterval(This.time);
22                             }
23                         }, 30)
24                     }
25                 }
26             }
27         </script>
View Code

 

</html>

目录
相关文章
|
4月前
|
前端开发 JavaScript
JavaScript递归菜单栏
JavaScript递归菜单栏
JavaScript递归菜单栏
|
9月前
|
存储 JavaScript 前端开发
JS中让二级菜单栏一直保持展开状态,页面跳转也不会改变
JS中让二级菜单栏一直保持展开状态,页面跳转也不会改变
|
前端开发 JavaScript
【JavaScript】用类的操作对CSDN社区管理菜单栏优化
【JavaScript】用类的操作对CSDN社区管理菜单栏优化
107 0
|
JavaScript 前端开发
原生js制作选项卡详解,适合无基础的人学习
原生js制作选项卡详解,适合无基础的人学习
153 0
|
JavaScript 前端开发 CDN
哇哦,弹幕居然是这么弄出来的,一文学会如何用js制作一个弹幕效果
哇哦,弹幕居然是这么弄出来的,一文学会如何用js制作一个弹幕效果
286 0
哇哦,弹幕居然是这么弄出来的,一文学会如何用js制作一个弹幕效果
|
存储 移动开发 前端开发
零基础学网页开发入门(制作博客案例)适应手机端div+css+js的综合介绍
零基础学网页开发入门(制作博客案例)适应手机端div+css+js的综合介绍
143 0
零基础学网页开发入门(制作博客案例)适应手机端div+css+js的综合介绍
|
人工智能 JavaScript 前端开发
使用 HTML、CSS 和 JS 制作一个中国象棋
这是一个简单的 JavaScript 项目,中国象棋人机对战,文末有完整源码免费下载地址,祝大家玩得开心,学得轻松。
419 2
使用 HTML、CSS 和 JS 制作一个中国象棋
|
JavaScript 数据安全/隐私保护
利用JS制作简易登录验证方法二
利用JS制作简易登录验证方法二
利用JS制作简易登录验证方法二
|
JavaScript 数据安全/隐私保护
利用JS制作简易登录验证
利用JS制作简易登录验证
利用JS制作简易登录验证

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    45
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    28
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55