我是新来的，我没有真正的网页设计经验，但我试图建立自己的网站。我从这个页面找到了这个很棒的滑块菜单： http://tympanus.net/codrops/2010/06/28/awesome-cufonized-fly-out-menu/
唯一的问题是我对jQuery的了解我不知道如何让菜单从右侧滑到左侧而不是 - 就像现在一样 - 从左到右。
我尝试了很多我在这个论坛上看过的东西，但没有一个能够奏效。
这是我的index.html的代码：
<script type="text/javascript">
$(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 innitially);
* 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, 'easeOutQuint');
}
}) ;
});
</script>
那就是我的style.css中的代码：
.slidingMenu {
position: absolute;
height:410px;
width: 410px;
top:200px;
overflow:hidden;
font-family: Arial, Helvetica, sans-serif;
}
.slidingMenu li {
display:block;
float:right;
clear:both;
position:relative;
overflow:hidden;}
.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; }
.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;}
.slidingMenuDesc{
margin-top:200px;
position:relative;}
.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;
right:0px;
-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; }
.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;}
采取正确的：0px;在SliderMenu中，我在页面中央显示了菜单，但幻灯片仍然来自左侧。
如果你能给我一些建议，那就太棒了。
答案 0 :(得分：0)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Awesome Cufonized Fly Out Menu with jQuery and CSS3</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Awesome Cufonized Fly Out Menu with jQuery and CSS3" />
<meta name="keywords" content="cufon, jquery, css3, menu, navigation, slide out, fly out, hover"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<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>
<script type="text/javascript">
$(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 innitially);
* 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');
}
}) ;
});
</script>
<style>
span.reference{
position:fixed;
left:10px;
bottom:10px;
font-size:14px;
}
span.reference a{
color:#aaa;
text-decoration:none;
}
</style>
</head>
<body>
<div>
<span class="reference">
<a href="http://tympanus.net/codrops/2010/06/28/awesome-cufonized-fly-out-menu/">back to hello</a>
</span>
</div>
<div id="slidingMenuDesc" class="slidingMenuDesc">
<div><span>hello1</span></div>
<div><span>hello2</span></div>
<div><span>hello</span></div>
</div>
<ul id="slidingMenu" class="slidingMenu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li> </ul>
</ul>
</body>
</html>
注意：您忘记了源代码