jquery下拉菜单_带有jQuery和CSS3的下拉菜单菜单

最新推荐文章于 2024-09-11 21:44:44 发布

culiao9310

最新推荐文章于 2024-09-11 21:44:44 发布

阅读量174

点赞数

文章标签：列表定位 css js html ViewUI

原文链接：https://tympanus.net/codrops/2010/07/16/slide-down-box-menu/

版权

jquery下拉菜单

View demo 查看演示 Download Source 下载源

In this tutorial we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item we are hovering.

在本教程中，我们将创建一个独特的滑动框导航。这个想法是使一个带有菜单项的框滑出，同时弹出一个缩略图。我们还将包括一个子菜单框，其中包含一些菜单项的更多链接。子菜单将根据要悬停的菜单项向左或向右滑动。

We will be using the jQuery Easing Plugin and some beautiful photos by tibchris.

我们将使用jQuery Easing Plugin和tibchris的一些漂亮照片。

标记 (The Markup)

For the HTML structure we will be using an unordered list where each menu item will contain the main link item and a div element for the submenu:

对于HTML结构，我们将使用无序列表，其中每个菜单项将包含主链接项和子菜单的div元素：

<ul id="sdt_menu" class="sdt_menu">
	<li>
		<a href="#">
			<img src="images/1.jpg" alt=""/>
			<span class="sdt_active"></span>
			<span class="sdt_wrap">
				<span class="sdt_link">Portfolio</span>
				<span class="sdt_descr">My work</span>
			</span>
		</a>
		<div class="sdt_box">
			<a href="#">Websites</a>
			<a href="#">Illustrations</a>
			<a href="#">Photography</a>
		</div>
	</li>
	...
</ul>

If there is no submenu, the div can simply be left out. The image will not be shown in the beginning since we will set its width and height to 0 in the CSS. Let’s take a look at the style.

如果没有子菜单，则可以简单地将div排除在外。由于我们将在CSS中将图片的宽度和高度设置为0，因此图片不会在一开始显示。让我们看一下样式。

CSS (The CSS)

We will start by styling the unordered list:

我们将从样式无序列表开始：

ul.sdt_menu{
	margin:0;
	padding:0;
	list-style: none;
	font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
	font-size:14px;
	width:1020px;
}

Genrally, we want to remove any default text-decoration and outline for all the link elements in our menu:

通常，我们要删除菜单中所有链接元素的任何默认文本装饰和轮廓：

ul.sdt_menu a{
	text-decoration:none;
	outline:none;
}

Our list items will be floating left and have the position relative since we will want to use absolute positioning for the elements inside. If we wouldn’t set that, absolute positioned elements would be relative to the whole page:

我们的列表项将向左浮动，并且具有相对位置，因为我们要对内部元素使用绝对定位。如果我们不进行设置，则绝对定位的元素将相对于整个页面：

ul.sdt_menu li{
	float:left;
	width:170px;
	height:85px;
	position:relative;
	cursor:pointer;
}

The styling for the main link element where we have our two spans for title and description will be styled as follows:

具有两个标题和描述范围的main link元素的样式将设置为以下样式：

ul.sdt_menu li > a{
	position:absolute;
	top:0px;
	left:0px;
	width:170px;
	height:85px;
	z-index:12;
	background:transparent url(../images/overlay.png) no-repeat bottom right;
	-moz-box-shadow:0px 0px 2px #000;
	-webkit-box-shadow:0px 0px 2px #000;
	box-shadow:0px 0px 2px #000;
}

Notice the z-index: we will be defining a stacking order for all the important elements, so that the right ones stay on top.

注意z-index：我们将为所有重要元素定义一个堆叠顺序，以便正确的元素保持在最上面。

We are using a background image that creates a glass like effect with a semi-transparent gradient. When you use some background pattern (like the wood in the demo) it creates a beautiful effect. Make sure to try out different textures – it just looks amazing!

我们使用的背景图像会产生具有半透明渐变效果的类似玻璃的效果。当您使用某些背景图案(例如演示中的木头)时，它会产生漂亮的效果。确保尝试不同的纹理-看起来太棒了！

You can also play with the shadows – changing the values to 2px 2px 6px #000 inset will give you a very nice effect.

您也可以使用阴影-将值更改为2px 2px 6px＃000 inset将给您非常不错的效果。

The image will be styled as follows:

该图像的样式如下：

ul.sdt_menu li a img{
	border:none;
	position:absolute;
	width:0px;
	height:0px;
	bottom:0px;
	left:85px;
	z-index:100;
	-moz-box-shadow:0px 0px 4px #000;
	-webkit-box-shadow:0px 0px 4px #000;
	box-shadow:0px 0px 4px #000;
}

We want to animate the image to come up from the bottom, that’s why we position it absolutely using “bottom” as reference point. We also add some neat box shadow. The first two values are zero, making the shadow spread evenly around the image. We used this as well in the link element. This even shadow can be used as a trick, whenever you want to create a light border effect. The advantage is that shadows are not really there – you don’t need to consider it in your width or height calculations in elements. The current disadvantage is that CSS3 is not supported in IE.

我们想使图像从底部向上运动，这就是为什么我们绝对使用“底部”作为参考点来定位它。我们还添加了一些整洁的框阴影。前两个值为零，使阴影均匀分布在图像周围。我们也在link元素中使用了它。每当您要创建浅色边框效果时，此均匀阴影都可以用作技巧。优点是阴影并不是真正存在的-您无需在元素的宽度或高度计算中考虑阴影。当前的缺点是IE中不支持CSS3。

The wrapper for the title and description spans will have this style:

标题和说明范围的包装将具有以下样式：

ul.sdt_menu li span.sdt_wrap{
	position:absolute;
	top:25px;
	left:0px;
	width:170px;
	height:60px;
	z-index:15;
}

If you have some larger texts, you will need to adapt these values. Make sure that the adapted values fit well with the animation values in the JavaScript, too.

如果您有一些较大的文本，则需要调整这些值。确保调整后的值也与JavaScript中的动画值完全匹配。

Next, we define the style for the gray box that slides down. We give it a height of 0 and position it already in a way that we just need to increase its height in the animation:

接下来，我们定义向下滑动的灰色框的样式。我们将其高度设置为0，并已经以一种只需要增加其在动画中的高度的方式对其进行了定位：

ul.sdt_menu li span.sdt_active{
	position:absolute;
	background:#111;
	top:85px;
	width:170px;
	height:0px;
	left:0px;
	z-index:14;
	-moz-box-shadow:0px 0px 4px #000 inset;
	-webkit-box-shadow:0px 0px 4px #000 inset;
	box-shadow:0px 0px 4px #000 inset;
}

The common styles for the spans and links in the boxes will be the following:

框中的跨度和链接的常用样式如下：

ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
	margin-left:15px;
	text-transform:uppercase;
	text-shadow:1px 1px 1px #000;
}

The title and description will be styled as follows:

标题和描述的样式如下：

ul.sdt_menu li span span.sdt_link{
	color:#fff;
	font-size:24px;
	float:left;
	clear:both;
}
ul.sdt_menu li span span.sdt_descr{
	color:#0B75AF;
	float:left;
	clear:both;
	width:155px;
	font-size:10px;
	letter-spacing:1px;
}

The submenu box will initially be hidden under the gray box. We will then animate it to the right or to the left depending on where we are. If we, for example, hover the last element, we want to animate that submenu box to the left, in all the other cases we want to animate it to the right.

子菜单框最初将隐藏在灰色框下方。然后，根据我们的位置，将其向右或向左设置动画。例如，如果将鼠标悬停在最后一个元素上，则希望将该子菜单框设置为左侧的动画，在所有其他情况下，则希望将其设置为右侧的动画。

ul.sdt_menu li div.sdt_box{
	display:block;
	position:absolute;
	width:170px;
	overflow:hidden;
	height:170px;
	top:85px;
	left:0px;
	display:none;
	background:#000;
}
ul.sdt_menu li div.sdt_box a{
	float:left;
	clear:both;
	line-height:30px;
	color:#0B75AF;
}

The first link in the submenu should have a top margin:

子菜单中的第一个链接应有一个上边距：

ul.sdt_menu li div.sdt_box a:first-child{
	margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
	color:#fff;
}

And that’s all the style! Let’s add the magic!

这就是所有样式！让我们添加魔法！

JavaScript (The JavaScript)

When we enter with the mouse on a list element we enlarge the image, and show both, the sdt_active span and the sdt_wrap span. If the element has a submenu (sdt_box), then we slide it to the side. If the element is the last one in the menu we slide the submenu box to the left, otherwise to the right:

当我们在列表元素上用鼠标输入时，我们将放大图像，并同时显示sdt_active跨度和sdt_wrap跨度。如果元素具有子菜单(sdt_box)，则将其滑动到侧面。如果元素是菜单中的最后一个元素，则将子菜单框向左滑动，否则向右滑动：


$(function() {
	$('#sdt_menu > li').bind('mouseenter',function(){
		var $elem = $(this);
		$elem.find('img')
			 .stop(true)
			 .animate({
				'width':'170px',
				'height':'170px',
				'left':'0px'
			 },400,'easeOutBack')
			 .andSelf()
			 .find('.sdt_wrap')
			 .stop(true)
			 .animate({'top':'140px'},500,'easeOutBack')
			 .andSelf()
			 .find('.sdt_active')
			 .stop(true)
			 .animate({'height':'170px'},300,function(){
			var $sub_menu = $elem.find('.sdt_box');
			if($sub_menu.length){
				var left = '170px';
				if($elem.parent().children().length == $elem.index()+1)
					left = '-170px';
				$sub_menu.show().animate({'left':left},200);
			}	
		});
	}).bind('mouseleave',function(){
		var $elem = $(this);
		var $sub_menu = $elem.find('.sdt_box');
		if($sub_menu.length)
			$sub_menu.hide().css('left','0px');
		
		$elem.find('.sdt_active')
			 .stop(true)
			 .animate({'height':'0px'},300)
			 .andSelf().find('img')
			 .stop(true)
			 .animate({
				'width':'0px',
				'height':'0px',
				'left':'85px'},400)
			 .andSelf()
			 .find('.sdt_wrap')
			 .stop(true)
			 .animate({'top':'25px'},500);
	});
});

And that’s it! We hope you liked this little menu and find it useful!

就是这样！我们希望您喜欢这个小菜单，并发现它有用！

P.S. It looks very juicy in Google Chrome!

PS在Google Chrome中看起来非常多汁！

scdjws online training program to learn about jQuery plugins and become expert using scdjws在线培训计划，以了解jQuery插件并使用 scmad tutorials and scmad教程和 scjp demos. scjp演示成为专家。

翻译自: https://tympanus.net/codrops/2010/07/16/slide-down-box-menu/

jquery下拉菜单

culiao9310

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery下拉菜单_带有jQuery和CSS3的下拉菜单菜单

jquery下拉菜单View demo 查看演示Download Source 下载源In this tutorial we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnai...
复制链接

扫一扫