导航栏下拉特效，自己做网站用到的

最新推荐文章于 2024-10-06 20:16:20 发布
最新推荐文章于 2024-10-06 20:16:20 发布
阅读量464 收藏
点赞数
分类专栏： java javaScript 文章标签： java javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fuchaoping/article/details/10541417
版权
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航特效</title>
<style type="text/css">
*{margin:0;padding:0;font-style:normal;font-family:宋体;}
body{text-align:center;font-size:14px;}
#content{margin:0 auto;width:1030px;}
#content #nav{background:#006400;height:32px;margin-top:60px;}
#content #nav ul{list-style:none;}
#content #nav ul li{float:left;width:100px;line-height:32px;position:relative;}
#nav div{width:100px;position:absolute;left:0px;padding-bottom:0px;background:#006400;float:left;height:0;overflow:hidden;}
#content #nav li .a{text-decoration:none;color:#000000;line-height:32px;display:block;border-right:1px solid #009800;}
#nav div a{text-decoration:none;color:#00CD00;line-height:26px;display:block;}
#nav div a:hover{background:#005400;}
</style>
</head>
<body>
<div id="content">
<div id="nav">
<ul id="supnav">
<li><a href="#" class="a">首页</a>
<div>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
</div>
</li>
<li><a href="#" class="a">好好学习</a>
<div>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
</div>
</li>
<li><a href="#" class="a">好好学习</a>
<div>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
</div>
</li>
<li><a href="#" class="a">好好学习</a>
<div>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
</div>
</li>
<li><a href="#" class="a">好好学习</a>
<div>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
</div>
</li>
<li><a href="#" class="a">好好学习</a>
<div>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
<a href="#">好好学习</a>
</div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
var supnav=document.getElementById("supnav");
var nav=document.getElementById("nav");
var btns=document.getElementsByTagName("li");
var subnavs=nav.getElementsByTagName("div");
var paddingbottom=20;
var defaultHeight=0;
function drop(obj,ivalue){
var a=obj.offsetHeight;
var speed=(ivalue-obj.offsetHeight)/8;
a+=Math.floor(speed);
obj.style.height=a+"px";
}
window.οnlοad=function(){
for(var i=0;i<btns.length;i++){
btns[i].index=i;
//鼠标覆盖时触发事件
btns[i].οnmοuseοver=function(){
var osubnav=subnavs[this.index];//从第一个开始，如果要从第二个开始var osubnav=subnavs[this.index-1];
var sublinks=osubnav.getElementsByTagName("a");
if(osubnav.firstChild.tagName==undefined){
var itarheight=parseInt(osubnav.childNodes[1].offsetHeight)*sublinks.length+paddingbottom;
}
else{
var itarheight=parseInt(osubnav.firstChild.offsetHeight)*sublinks.length+paddingbottom;}
clearInterval(this.itimer);
this.itimer=setInterval(function(){drop(osubnav,itarheight);},30);
}
//鼠标离开时触发事件
btns[i].οnmοuseοut=function(){
var osubnav=subnavs[this.index];//同上
clearInterval(this.itimer);
this.itimer=setInterval(function(){drop(osubnav,defaultHeight);},30);
}
}
}
</script>


</body>
</html>
fuchaoping
关注
专栏目录
html5导航栏向应折叠,超实用！网站导航栏设计形式总结
weixin_29903713的博客
06-02 2131
导航对于一个网站来说，起到重要的引导作用。一个优秀的导航设计可以让用户快速的找到所需 ，让用户清晰明了的了解到网站的结构框架，起到重要的指引作用。下面跟大家分享下常用的几种网页导航形式：1、顶部导航顶部导航被广泛应用在各个领域的网站当中，这类导航可以一目了然的让用户迅速寻找到所需。顶部导航这样的设计形式保守但目的性强，可以确保组织结构的可靠和降低用户寻找的时间成本。但这类导航有个缺点，首页内容过多...
用html做一个漂亮的网站【茶文化12页】期末网页制作 HTML+CSS网页设计实例 企业文化网站制作
qq3200628753的博客
08-08 1800
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
DAY004-CSS基础
qq_45579661的博客
08-03 389
1.思维导图 2.作业+练习 可参考 a.导航栏+hover b.侧边栏+hover 例： <!DOCTYPEhtml> <htmllang="zh-CN"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"conten...
网页中下拉出现动画效果的实现
北京欢迎您
07-29 2480
效果的实现只需要两个库：1.animate.css 2.wow.js animate.css 参考：https://daneden.github.io/animate.css/ wow.js 参考：https://github.com/matthieua/WOW 1.新建index.html,在head中引入animate.css <head> <link rel="s...
网页中导航栏实现子菜单下拉效果
u011387028的专栏
03-09 1万+
一、实现方式 通常菜单会用的形式实现：如 二、点击时子菜单下拉效果
web前端期末大作业基于html+css+javascript+jquery制作家乡主题风景网页设计与实现——张家口
专注于dreamweaver网页设计制作
12-14 698
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
web前端网页制作课作业：用DIV+CSS技术设计的静态网站【四大名著】中国传统文化主题题材设计
网页设计与制作
11-13 646
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒
制作一个简单HTML中华传统文化网页（HTML+CSS）
热门推荐
HTML网页设计
08-02 1万+
📔网站布局方面计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面网站系统文件种类包含html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
Dreamweaver网页设计与制作100例：用DIV+CSS技术设计的书法主题网站（web前端网页制作课作业）
QQ_____365392777的博客
08-10 463
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
黑色css3导航栏下拉菜单动画特效
11-19
本主题主要关注的是“黑色css3导航栏下拉菜单动画特效”，下面我们将深入探讨这一话题。 首先，CSS3的下拉菜单是一种常见的网页交互元素，常用于网站顶部导航，用于展示多层次的链接结构。下拉菜单通常在鼠标悬停在...
左侧下拉导航栏.html
02-17
左侧竖直下拉菜单，点击能够收缩和展开
ios导航栏 下拉列表
09-18
标题“ios导航栏 下拉列表”指的是在iOS应用的导航栏右侧的barbuttonitem上实现点击后弹出下拉列表的功能。这个功能通常通过自定义视图或者第三方库来实现。 描述中提到的“ios在导航栏的barbuttonitem 点击 出现...
CSS3悬停导航交替下拉特效.zip
10-09
【CSS3悬停导航交替下拉特效】是一个在网页设计中常见的交互元素，它通过CSS3的特性实现了一种动态的、吸引用户的导航菜单。在网页的导航栏中，当鼠标悬停在某个菜单项上时，会弹出一个下拉菜单，而这个下拉菜单在...
JDK1.0主要特性
最新发布
FoolRabbit的专栏
10-06 247
JDK1.0主要特性。
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 476
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
【开源免费】基于SpringBoot+Vue.JS校园资料分享平台（JAVA毕业设计）
customer08的博客
09-30 1335
校园资料分享平台是一个B/S模式系统，采用Spring Boot框架作为开发技术，MYSQL数据库设计开发，充分保证系统的稳定性。系统具有界面清晰、操作简单，功能齐全的特点，使得校园资料分享平台管理工作系统化、规范化。
Java内存布局
阿呆的专栏
10-01 819
64位 JVM 不启用指针压缩时：Object Header 大小是16字节。64位 JVM 启用指针压缩时（默认）：Object Header 大小是12字节。32位 JVM：Object Header 大小是8字节。JVM在默认情况下启用指针压缩，但如果堆内存超过32GB，就会禁用指针压缩。32GB是压缩指针的最大寻址范围。超过32GB的堆内存中，压缩指针带来的性能提升并不显著，而且需要解压指针反而可能增加开销。
【RocketMQ】RocketMQ应用难点
记录一名在读研究生的学习笔记、感悟、开发产物
09-30 899
本文探讨了RocketMQ中消息重复消费的问题及其解决方案，尤其是在CLUSTERING模式下的扩容影响。文章分析了重复消费的原因，如广播模式、负载均衡模式下的多consumerGroup消费、消费者组内的动态变化及网络延迟等，并提出了利用唯一标识进行去重的方法。此外，还讨论了如何选择合适的存储机制以高效处理大量消息标识，如HashMap、MySQL、Redis以及推荐的布隆过滤器等方案。对于防止消息堆积与确保消息不丢失，也给出了相应的策略和技术措施。
CSS导航栏与下拉菜单实现教程
在本文中，我们将深入探讨CSS中导航栏和下拉菜单的实现，以便为网页设计提供实用且美观的用户体验。首先，让我们理解导航栏在网站布局中的重要性，它不仅帮助用户快速导航，还能提升整体设计风格。CSS使得我们能够...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值