jquery弹出菜单
In today’s tutorial we will create a full page cufonized menu that has two nice features: when hovering over the menu items we will move a hover-state item that adapts to the width of the current item, and we will slide out a description bar from the left side of the page, reaching towards the current menu item.
在今天的教程中，我们将创建一个具有两个漂亮功能的全页面定制菜单：将鼠标悬停在菜单项上时，我们将移动一个适应于当前项宽度的悬停状态项，并从页面左侧，到达当前菜单项。
We will use jQuery for the effect and some CSS3 properties for the style. We are not going to use any images.
我们将使用jQuery来实现效果，并使用一些CSS3属性来实现样式。 我们将不使用任何图像。
So, let’s start!
所以，让我们开始吧！
标记 (The Markup)
The HTML structure will consist of an unordered list that represents our menu and a div for the description elements:
HTML结构将由代表我们的菜单的无序列表和description元素的div组成：
<div id="slidingMenuDesc" class="slidingMenuDesc">
<div><span>Description for "About"</span></div>
...
</div>
<ul id="slidingMenu" class="slidingMenu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Get a quote</a></li>
</ul>
We leave out the description for “Home” since there is nothing to describe. The sliding divs should just appear when we hover over the other items.
由于没有内容可描述，因此我们省略了对“家”的描述。 当我们将鼠标悬停在其他项目上时，滑动div应该会出现。
CSS (The CSS)
First, we will style the menu and its navigation items and then we will style the description elements. Let’s reset some styles:
首先，我们将对菜单及其导航项进行样式设置，然后对描述元素进行样式设置。 让我们重置一些样式：
body, ul, li, h1, h2, span{
margin:0;
padding:0;
}
ul{
list-style:none;
}
The background is going to be dark gray:
背景将是深灰色的：
body{
background:#292929;
}
The list for the menu items is going to be positioned absolutely at the right side of the screen:
菜单项的列表将完全位于屏幕的右侧：
.slidingMenu {
position: absolute;
height:410px;
width: 410px;
top:40px;
overflow:hidden;
right:1px;
font-family: Arial, Helvetica, sans-serif;
}
The menu items are hoing to float right:
菜单项希望向右浮动：
.slidingMenu li {
display:block;
float:right;
clear:both;
position:relative;
overflow:hidden;
}
The “mover” element will be positioned absolutely and we will give it a top and a width dynamically:
“ mover”元素将绝对定位，我们将动态为其赋予顶部和宽度：
.slidingMenu li.move {
width: 9px;
height: 68px;
right:0px;
padding-right:10px;
margin-top:2px;
z-index: 8;
position: absolute;
background: #2183c4;
background:
-webkit-gradient(
linear,
left top,
left bottom,
from(#0771b8),
to(#2183c4)
);
background:
-moz-linear-gradient(
top,
#0771b8,
#2183c4
);
-moz-border-radius: 8px 0px 0px 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
-moz-box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
}
We will give this moving hover element a very subtle background gradient and some box shadow. The style for the link element will be as follows:
我们将为该移动的悬停元素提供非常细微的背景渐变和一些框阴影。 link元素的样式如下：
.slidingMenu li a {
font-size:66px;
text-transform:uppercase;
text-decoration: none;
color: #ddd;
outline: none;
text-indent:5px;
z-index: 10;
display: block;
float: right;
height: 66px;
line-height: 66px;
position: relative;
overflow: hidden;
padding-right:10px;
}
The descriptions will be in a relatively positioned container. We set the margin-top to the same value like the top of the menu list:
这些描述将在相对定位的容器中。 我们将margin-top设置为与菜单列表顶部相同的值：
/* Descriptions */
.slidingMenuDesc{
margin-top:40px;
position:relative;
}
The div with the description span inside is going to have the same background-gradient like the mover and the same box shadow. The rounded borders are going to be on the opposite corners:
包含描述范围的div将具有与移动器相同的背景渐变和相同的框阴影。 圆角的边界将在相反的角上：
.slidingMenuDesc div{
background: #2183c4;
background:
-webkit-gradient(
linear,
left top,
left bottom,
from(#0771b8),
to(#2183c4)
);
background:
-moz-linear-gradient(
top,
#0771b8,
#2183c4
);
height: 68px;
padding-right:5px;
left:-5px;
width:0px;
margin-top:2px;
overflow:hidden;
position:absolute;
-moz-box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
-moz-border-radius: 0px 8px 8px 0px;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
We need to set these element absolute, since we will adjust the top to the according current list element that we are hovering.
我们需要将这些元素设置为绝对值，因为我们会将顶部调整为要悬停的当前列表元素。
The description span is going to be positioned absolutely as well. This is not required but it gives you more options if you would like to apply other animation effects:
描述范围也将绝对定位。 这不是必需的，但是如果您想应用其他动画效果，它可以为您提供更多选择：
.slidingMenuDesc div span {
font-size:36px;
color: #f0f0f0;
text-indent:5px;
z-index: 10;
display: block;
height: 66px;
line-height: 66px;
position:absolute;
right:10px;
margin-left:5px;
top:-3px;
}
And now, let’s take a look at the JavaScript!
现在，让我们看一下JavaScript！
JavaScript (The JavaScript)
First, we will add the following scripts to our HTML head:
首先，我们将以下脚本添加到HTML头中：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="BabelSans_500.font.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
And we will add the following script:
我们将添加以下脚本：
$(function() {
Cufon.replace('a, span').CSS.ready(function() {
var $menu = $("#slidingMenu");
/**
* the first item in the menu,
* which is selected by default
*/
var $selected = $menu.find('li:first');
/**
* this is the absolute element,
* that is going to move across the menu items
* It has the width of the selected item
* and the top is the distance from the item to the top
*/
var $moving = $('<li />',{
className : 'move',
top : $selected[0].offsetTop + 'px',
width : $selected[0].offsetWidth + 'px'
});
/**
* each sliding div (descriptions) will have the same top
* as the corresponding item in the menu
*/
$('#slidingMenuDesc > div').each(function(i){
var $this = $(this);
$this.css('top',$menu.find('li:nth-child('+parseInt(i+2)+')')[0].offsetTop + 'px');
});
/**
* append the absolute div to the menu;
* when we mouse out from the menu
* the absolute div moves to the top (like initially);
* when hovering the items of the menu, we move it to its position
*/
$menu.bind('mouseleave',function(){
moveTo($selected,400);
})
.append($moving)
.find('li')
.not('.move')
.bind('mouseenter',function(){
var $this = $(this);
var offsetLeft = $this.offset().left - 20;
//slide in the description
$('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':offsetLeft+'px'},400, 'easeOutExpo');
//move the absolute div to this item
moveTo($this,400);
})
.bind('mouseleave',function(){
var $this = $(this);
var offsetLeft = $this.offset().left - 20;
//slide out the description
$('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':'0px'},400, 'easeOutExpo');
});;
/**
* moves the absolute div,
* with a certain speed,
* to the position of $elem
*/
function moveTo($elem,speed){
$moving.stop(true).animate({
top : $elem[0].offsetTop + 'px',
width : $elem[0].offsetWidth + 'px'
}, speed, 'easeOutExpo');
}
}) ;
});
After we cufonize the font (all “a” elements and all “span” elements), the main function gets executed. We select the first item by default which is our “Home”. When we hover over a menu item we will move the li.move to the right position and slide out the according description item.
对字体(所有“ a”元素和所有“ span”元素)进行字体化后，将执行main函数。 默认情况下，我们选择第一个项目是“ Home”。 当我们将鼠标悬停在菜单项上时，我们将移动到正确的位置并滑出相应的描述项。
And that’s it! We hope you enjoyed it and find it useful!
就是这样！ 我们希望您喜欢它并发现它有用！
翻译自: https://tympanus.net/codrops/2010/06/28/awesome-cufonized-fly-out-menu/
jquery弹出菜单
扫一扫
1556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
