带动画效果、平滑展开的jQuery大幅下拉菜单代码

最新推荐文章于 2022-01-22 12:17:39 发布
最新推荐文章于 2022-01-22 12:17:39 发布
阅读量111 收藏
点赞数
文章标签： javascript xhtml ViewUI

 

 

 

点击查看：网页特效

　　

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>多级的动画菜单代码</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>
*{
padding:0;
margin:0;
}
body{
background:#f0f0f0;
font-family:"Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
overflow-x:hidden;
}
h1{
font-size:180px;
line-height:180px;
text-transform: uppercase;
color:#f9f9f9;
position:absolute;
text-shadow:0 1px 1px #ddd;
top:-25px;
left:-20px;
white-space: nowrap;
}
span.reference{
position:fixed;
left:10px;
bottom:10px;
font-size:11px;
}
span.reference a{
color:#DF7B61;
text-decoration:none;
text-transform: uppercase;
text-shadow:0 1px 0 #fff;
}
span.reference a:hover{
color:#000;
}
.box{
margin-top:129px;
height:460px;
width:100%;
position:relative;
background:#fff url(/uploads/allimg/1202/veryhuo_click.png) no-repeat 380px 180px;
-moz-box-shadow:0px 0px 10px #aaa;
-webkit-box-shadow:0px 0px 10px #aaa;
-box-shadow:0px 0px 10px #aaa;
}
.box h2{
color:#f0f0f0;
padding:40px 10px;
text-shadow:1px 1px 1px #ccc;
}
ul.veryhuo_menu{
margin:0px;
padding:0;
display:block;
height:50px;
background-color:#D04528;
list-style:none;
font-family:"Trebuchet MS", sans-serif;
border-top:1px solid #EF593B;
border-bottom:1px solid #EF593B;
border-left:10px solid #D04528;
-moz-box-shadow:0px 3px 4px #591E12;
-webkit-box-shadow:0px 3px 4px #591E12;
-box-shadow:0px 3px 4px #591E12;
}
ul.veryhuo_menu a{
text-decoration:none;
}
ul.veryhuo_menu > li{
float:left;
position:relative;
}
ul.veryhuo_menu > li > span{
float:left;
color:#fff;
background-color:#D04528;
height:50px;
line-height:50px;
cursor:default;
padding:0px 20px;
text-shadow:0px 0px 1px #fff;
border-right:1px solid #DF7B61;
border-left:1px solid #C44D37;
}
ul.veryhuo_menu .ldd_submenu{
position:absolute;
top:50px;
width:550px;
display:none;
opacity:0.95;
left:0px;
font-size:10px;
background: #C34328;
border-top:1px solid #EF593B;
-moz-box-shadow:0px 3px 4px #591E12 inset;
-webkit-box-shadow:0px 3px 4px #591E12 inset;
-box-shadow:0px 3px 4px #591E12 inset;
}
a.ldd_subfoot{
background-color:#f0f0f0;
color:#444;
display:block;
clear:both;
padding:15px 20px;
text-transform:uppercase;
font-family: Arial, serif;
font-size:12px;
text-shadow:0px 0px 1px #fff;
-moz-box-shadow:0px 0px 2px #777 inset;
-webkit-box-shadow:0px 0px 2px #777 inset;
-box-shadow:0px 0px 2px #777 inset;
}
ul.veryhuo_menu ul{
list-style:none;
float:left;
border-left:1px solid #DF7B61;
margin:20px 0px 10px 30px;
padding:10px;
}
li.ldd_heading{
font-family: Georgia, serif;
font-size: 13px;
font-style: italic;
color:#FFB39F;
text-shadow:0px 0px 1px #B03E23;
padding:0px 0px 10px 0px;
}
ul.veryhuo_menu ul li a{
font-family: Arial, serif;
font-size:10px;
line-height:20px;
color:#fff;
padding:1px 3px;
}
ul.veryhuo_menu ul li a:hover{
-moz-box-shadow:0px 0px 2px #333;
-webkit-box-shadow:0px 0px 2px #333;
box-shadow:0px 0px 2px #333;
background:#AF412B;
}
</style>
</head>
<body>
<h1>UI Elements</h1>
<div class="box">
<h2>Large Drop Down Menu Demo(veryhuo.com)</h2>
<ul id="veryhuo_menu" class="veryhuo_menu">
<li>
<span>Vacations</span><!-- Increases to 510px in width-->
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">By Location</li>
<li><a href="#">South America</a></li>
<li><a href="#">Antartica</a></li>
<li><a href="#">Africa</a></li>
<li><a href="#">Asia and Australia</a></li>
<li><a href="#">Europe</a></li>
</ul>
<ul>
<li class="ldd_heading">By Category</li>
<li><a href="#">Sun & Beach</a></li>
<li><a href="#">Adventure</a></li>
<li><a href="#">Science & Education</a></li>
<li><a href="#">Extreme Sports</a></li>
<li><a href="#">Relaxing</a></li>
<li><a href="#">Spa and Wellness</a></li>
</ul>
<ul>
<li class="ldd_heading">By Theme</li>
<li><a href="#">Paradise Islands</a></li>
<li><a href="#">Cruises & Boat Trips</a></li>
<li><a href="#">Wild Animals & Safaris</a></li>
<li><a href="#">Nature Pure</a></li>
<li><a href="#">Helping others & For Hope</a></li>
<li><a href="http://www.liehuo.net">Diving</a></li>
</ul>
<a class="ldd_subfoot" href="#"> + New Deals</a>
</div>
</li>
<li>
<span>Equipment</span>
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">By Location</li>
<li><a href="#">South America</a></li>
<li><a href="#">Antartica</a></li>
<li><a href="#">Africa</a></li>
<li><a href="#">Asia and Australia</a></li>
<li><a href="#">Europe</a></li>
</ul>
<ul>
<li class="ldd_heading">By Category</li>
<li><a href="#">Sun & Beach</a></li>
<li><a href="#">Adventure</a></li>
<li><a href="#">Science & Education</a></li>
<li><a href="#">Extreme Sports</a></li>
<li><a href="#">Relaxing</a></li>
<li><a href="#">Spa and Wellness</a></li>
</ul>
<ul>
<li class="ldd_heading">By Theme</li>
<li><a href="#">Paradise Islands</a></li>
<li><a href="#">Cruises & Boat Trips</a></li>
<li><a href="#">Wild Animals & Safaris</a></li>
<li><a href="#">Nature Pure</a></li>
<li><a href="#">Helping others & For Hope</a></li>
<li><a href="#">Diving</a></li>
</ul>
<a class="ldd_subfoot" href="#"> + New Deals</a>
</div>
</li>
<li>
<span>Locations</span>
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">By Location</li>
<li><a href="#">South America</a></li>
<li><a href="#">Antartica</a></li>
<li><a href="#">Africa</a></li>
<li><a href="#">Asia and Australia</a></li>
<li><a href="#">Europe</a></li>
</ul>
<ul>
<li class="ldd_heading">By Category</li>
<li><a href="#">Sun & Beach</a></li>
<li><a href="#">Adventure</a></li>
<li><a href="#">Science & Education</a></li>
<li><a href="#">Extreme Sports</a></li>
<li><a href="#">Relaxing</a></li>
<li><a href="#">Spa and Wellness</a></li>
</ul>
<ul>
<li class="ldd_heading">By Theme</li>
<li><a href="#">Paradise Islands</a></li>
<li><a href="#">Cruises & Boat Trips</a></li>
<li><a href="#">Wild Animals & Safaris</a></li>
<li><a href="#">Nature Pure</a></li>
<li><a href="#">Helping others & For Hope</a></li>
<li><a href="#">Diving</a></li>
</ul>
<a class="ldd_subfoot" href="#"> + New Deals</a>
</div>
</li>
</ul>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="/uploads/common/js/jquery-1.7.min.js"></script>
<script type="text/javascript">
$(function() {
/**
* the menu
*/
var $menu = $('#veryhuo_menu');
/**
* for each list element,
* we show the submenu when hovering and
* expand the span element (title) to 510px
*/
$menu.children('li').each(function(){
var $this = $(this);
var $span = $this.children('span');
$span.data('width',$span.width());
$this.bind('mouseenter',function(){
$menu.find('.ldd_submenu').stop(true,true).hide();
$span.stop().animate({'width':'510px'},300,function(){
$this.find('.ldd_submenu').slideDown(300);
});
}).bind('mouseleave',function(){
$this.find('.ldd_submenu').stop(true,true).hide();
$span.stop().animate({'width':$span.data('width')+'px'},300);
});
});
});
</script>
</body>
</html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>

weixin_33778778
关注
jQuery全屏大幅下拉菜单导航代码.zip
07-11
代码简介：jQuery全屏大幅下拉菜单导航代码是一款仿微软的蓝色大气全屏网站导航菜单特效。
jQuery：animate，制作平滑的下拉菜单
chouchilei5210的博客
03-18 310
CSS： .div,ul,p{ cursor:pointer;//小手样式 } div,ul{ width:150px;margin:auto; text-align:center; } div{ margin-top:50px; bor...
jQuery实现下拉菜单
lq24244的博客
04-21 2054
jQuery实现下拉菜单 需要加载jQuery类库 <script src="WEB-INF/js/jquery-1.12.4.js"></script> 鼠标移入一级菜单则显示二级菜单 完整代码 <!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>Title</title> <styl
js实现类似动画效果的下拉菜单
11-19
js实现类似动画效果的下拉菜单 js实现类似动画效果的下拉菜单 js实现类似动画效果的下拉菜单 js实现类似动画效果的下拉菜单
蓝色风格简单的下拉导航菜单js特效jquery效果
09-06
蓝色风格简单的下拉导航菜单js特效jquery效果 展示页面 http://www.whkge.com/jsview/0906b/
jQuery全屏大幅下拉菜单导航代码
04-07
1. **动态效果**：jQuery提供了一系列的动画方法，如fadeIn()、slideDown()等，可以用于创建平滑的下拉菜单展开和收起效果，增强用户体验。 2. **响应式设计**：全屏菜单意味着菜单会占据整个屏幕宽度，这需要考虑...
jQuery变形动画导航下拉菜单代码
06-05
在网页设计中，导航菜单是用户与网站交互的重要部分，而使用jQuery实现的变形动画导航下拉菜单可以提升用户体验，让交互过程更加生动有趣。本文将深入探讨如何利用jQuery技术制作这种具有动态变形效果的下拉菜单。 ...
jQuery折叠下拉菜单收缩展开
06-24
jQuery作为一个轻量级的JavaScript库，因其易用性和丰富的插件库，被广泛用于实现各种动态效果，如折叠下拉菜单的收缩与展开功能。本篇文章将深入探讨如何利用jQuery实现这种效果，并结合描述中的"橙色样式风格"来...
jQuery动画下拉导航菜单代码
04-07
jQuery提供了多种动画方法，如`fadeIn()`, `fadeOut()`, `slideToggle()`, `animate()`等，使得下拉菜单在展开和收起时有平滑的过渡。在本项目中，下拉菜单会根据内容的大小动态变形，这可能涉及到计算元素的宽度、...
jQuery实现简单的下拉菜单导航功能示例
10-18
主要介绍了jQuery实现简单的下拉菜单导航功能,涉及jQuery针对页面元素的遍历与节点修改相关操作技巧,需要的朋友可以参考下
动态效果平滑的jquery向下滑出式菜单.rar
07-10
动态效果平滑的jquery向下滑出式菜单，select列表改成的下滑式菜单，应用了jquery实现的效果，在鼠标点击的时候会滑出下滑列表。
用jQuery实现下拉菜单效果
yuhaowen的博客
01-22 2551
用jQuery实现下拉菜单效果
jquery内容的展开与折叠
zhangxiaomin1992的专栏
12-09 1940
$(function(){ var slideHeight = 10; // 默认显示的高度 var defHeight = $('#wrap').height();//本来应有的高度 if(defHeight >= slideHeight){//页面加载进入 $('#wrap').css('height' , slideHeight + 'px'); $('#read-more').a
css之实现下拉框自上而下展开动画效果&&自下而上收起动画效果
weixin_42776027的博客
09-25 7178
转载地址：https://my.oschina.net/u/4369742/blog/3484647 HTML代码： <div className={CX('font-size-selector-sub-list', { show: shouldSubListShow === true, hidden: shouldSubListShow === false, })} > {
用javascript 来实现动态下拉以及收起的动态效果
u010509143的专栏
11-12 2253
String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; Employee employee=(Employee)session.getAttribute("em
js实现下拉菜单动画效果
Gyoung杨广
01-08 7275
js实现下拉菜单动画效果
实用jQuery下拉菜单动画效果源码包
资源摘要信息:"jQuery变形动画导航下拉菜单代码.zip" 知识点一：jQuery基础 jQuery是一个快速、小巧、功能丰富的JavaScript库。它通过一种更简单的方式来操作文档对象、处理事件、执行动画效果以及进行Ajax交互。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值