jQuery/CSS3飘带式下拉菜单

PetitQ 导航菜单 2022-1-05 842 0 0

今天我们再来介绍一款 jQuery 下拉菜单，这款 jQuery 下拉菜单应用了一些 CSS3 相关的属性，但并不复杂，也没有绚丽的动画，但是非常实用。这款 jQuery 菜单的另一个特点是菜单整体呈飘带状，样式非常新颖。鼠标滑过菜单项时即可展开下拉菜单。下面一起来看看这款菜单的实现过程和源代码，代码主要由 HTML、CSS 和 jQuery 组成。

HTML 代码：

```
<div id="menu-holder">
```
```
       <div>
```
```
<ul class="menu">
```

<li><a href="http://www.flashuser.net">Home</a></li>

```
<li><a href="#">Dropdown</a>
```
```
<ul>
```

<li><a href="http://www.flashuser.net/category/css">CSS</a></li>

<li><a href="http://www.flashuser.net/category/tutorials">Tutorials</a></li>

<li><a href="http://www.flashuser.net/category/photoshop">Photoshop</a></li>

```
</ul>
```
```
</li>
```
```
<li><a href="#">Categories</a>
```
```
<ul>
```

<li><a href="http://www.flashuser.net/category/freebies">Freebies</a></li>

<li><a href="http://www.flashuser.net/category/photography">Photography</a></li>

<li><a href="http://www.flashuser.net/category/web-design">Web Design</a></li>

<li><a href="http://www.flashuser.net/category/wordpress">Wordpress</a></li>

<li><a href="http://www.flashuser.net/category/inspiration">Inspiration</a></li>

```
</ul>
```
```
</li>
```
```
<li><a href="#">Contact</a></li>
```
```
</ul>
```
```
</div>
```

  <div id="corner-left">Corner left</div>

  <div id="corner-right">Corner right</div>

```
 
```
```
<div class="content">
```
```
 
```
```
</div>
```
```
 
```
```
</div>
```

也想出现在这里？联系我们吧

HTML 结构比较简单，也是经典的 ul li 结构。注意末尾的两个 div，corner left 和 corner right，是两侧的飘带结构。

CSS 代码：

#menu-holder{margin:20px auto;width: 700px;height:61px;}

```
 
```
```
.menu {margin:0 auto;
```
```
padding:0;
```
```
width:700px;
```
```
height: 61px;	
```
```
background: #656d80;
```

background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #656d80),color-stop(0.6, #8690a9));

background: -moz-linear-gradient(center bottom,#656d80 0%, #8690a9 60%);

filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#8690a9', endColorstr='#656d80');

```
}
```

.menu li {background: url("../images/menu-separator.gif") no-repeat scroll right center transparent;padding: 0px 2px 0px 0px; float: left; position: relative; text-transform:uppercase;font-family: 'Oswald', sans-serif;font-size:18px;}

.menu li a {padding:21px 25px 22px 25px;color: #ffffff;display:block;text-shadow: 0px 1px 0px #000000;}

```
.menu li:hover > a {color:#ffffff;
```
```
background:#56596a;
```

background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #56596a),color-stop(0.6, #686c80));

background: -moz-linear-gradient(center bottom,#56596a 0%, #686c80 60%);

filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#686c80', endColorstr='#56596a');

```
}
```
```
/* drop down sub-menu */
```
```
.menu ul { background: #56596a;
```
```
display: none;
```
```
margin: 0;
```
```
padding: 0;
```
```
width: 190px;
```
```
position: absolute;
```
```
top: 61px;
```
```
left: -1px;
```
```
}
```
```
.menu li:hover > ul {display: block;}
```
```
.menu ul li {display:block;
```
```
float: none;
```
```
margin: 0px 0px 0px 15px;
```
```
padding:2px 0px;
```

background:url("../images/submenu-sep.gif") no-repeat scroll left bottom transparent;

```
}
```
```
/* sub menu hover link */
```

.menu ul li:hover a, .menu li:hover li a {

```
	background: none;
```
```
	color: #ffffff;
```
```
}
```
```
.menu ul a {
```
```
display:block;height:auto;
```
```
	font-size: 14px;
```
```
	padding:15px 0px 15px 10px;
```
```
}
```

.menu ul a:hover, .menu ul li:hover > a{

```
	background: #56596a !important;
```
```
	/* fix IE */
```

	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#56596a', endColorstr='#56596a');

	background: -webkit-gradient(linear, left top, left bottom, from(#56596a), to(#56596a)) !important;

	background: -moz-linear-gradient(top,  #56596a,  #56596a) !important;

```
	color: #e0e0e0 !important;
```
```
}
```
```
 
```

#corner-left{position:absolute;background:url("../images/corner-left.png") no-repeat 0 0;top:19px;left:-83px;width:94px;height:60px;text-indent:-9999px;z-index:-2;}

#corner-right{position:absolute;background:url("../images/corner-right.png") no-repeat 0 0;top:19px;right:-83px;width:94px;height:60px;text-indent:-9999px;z-index:-2;}

jQuery 代码：

```
if (jQuery().superfish) {
```
```
		jQuery('ul.menu').superfish({
```
```
			delay: 230,
```

			animation: {opacity:'show', height:'show'},

```
			speed: 'fast',
```
```
			autoArrows: false,
```
```
			dropShadows: false
```
```
		}); 
```
```
 
```
```
	}	
```
```
 
```
```
	});
```

这里用到了 superfish 脚本库，所以页面上不仅要引用 jQuery 库，也要引用 superfish 库：

<script type="text/javascript" src="js/jquery.js"></script>

<script src="js/superfish.js" type="text/javascript"></script>

所有的脚本代码可以在源代码中看到，大家可以自行下载。

jQuery/CSS3 飘带式下拉菜单

已有 211 人购买

永久更新：
演示数据：
提取码：lwfr

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

导航菜单

jQuery/CSS3飘带式下拉菜单

HTML 代码：

CSS 代码：

jQuery 代码：

jQuery/CSS3 飘带式下拉菜单

相关文章

Material Design 风格手机App菜单特效

ssMenu - 固定侧边栏jQuery插件

深色模式响应式悬停导航菜单

发表回复取消回复

热销模板

导航菜单

HTML 代码：

CSS 代码：

jQuery 代码：

jQuery/CSS3 飘带式下拉菜单

相关文章

发表回复 取消回复

热销模板

发表回复取消回复