これをできる限り説明しようと思います。このチュートリアルhttp://tympanus.net/codrops/2010/06/28/awesome-cufonized-fly-out-menu/を使用して、Web サイトで水平ナビゲーション メニューを利用しました。私は現在、チュートリアルからjavascriptを調整しようとしています。マウスを各リンク上で移動するときにマウスのロールオーバーを維持したいのですが、選択したリンクを常に強調表示したい (現在は機能していません)。
私が抱えている問題: 現在ポートフォリオ リンクにいて、それが強調表示されていて、最後に (メニュー div からマウスを移動する前に) ホーム ボタンにカーソルを合わせると、現在オンになっているにもかかわらず、ホーム リンクが強調表示されます。私のポートフォリオページ。
これが私のコードです：
$(document).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 />', {
'class' : '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 + $(window).width() - ($this.outerWidth() + 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');
}
});
メニューの私のCssは次のとおりです。
body{
background:#292929;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
}
.slidingMenu {
position: absolute;
top:250px;
left: 0px;
padding-bottom: 10px;
width: 400px;
}
.slidingMenu li {
display:block;
float:left;
clear:both;
padding-left: 12px;
height: 52px;
line-height: 52px;
}
.slidingMenu li.selected{
display:block;
float:left;
clear:both;
padding-left: 12px;
height: 52px;
line-height: 52px;
}
.slidingMenu li.move {
width: 9px;
position: absolute;
z-index: 8;
background: #df0101;
background:
-webkit-gradient(
linear,
left top,
left bottom,
from(#a70404),
to(#df0101)
);
background:
-moz-linear-gradient(
top,
#a70404,
#df0101
);
-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;
-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:50px;
text-transform:uppercase;
text-decoration: none;
color: #FFF;
text-indent:5px;
z-index: 10;
display: block;
z-index: 10;
float: right;
line-height: 50px;
position: relative;
padding-right:10px;
}
/* Descriptions */
.slidingMenuDesc{
margin-top:40px;
position:relative;
}
.slidingMenuDesc div{
background: #df0101;
background:
-webkit-gradient(
linear,
left top,
left bottom,
from(#a70404),
to(#df0101)
);
background:
-moz-linear-gradient(
top,
#a70404,
#df0101
);
height: 52px;
right:-5px;
width:0px;
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: 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;
}
.slidingMenuDesc div span {
font-size:24px;
color: #f0f0f0;
display: block;
z-index: 10;
line-height: 52px;
position:absolute;
margin-left: 30px;
}
うまくいけば、私は十分に明確に説明しました。私の JavaScript スキルは非常に弱いです。これは Web サイトを作成する最初の試みの 1 つであるため、このコーディング形式を使い始めたばかりです。事前にご協力いただきありがとうございます。