Question

我会尽力解释这个问题。我使用本教程http://tympanus.net/codrops/2010/06/28/awesome-cufonized-fly-out-menu/为我的网站使用水平导航菜单。我目前正在尝试从教程中调整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技能非常弱 - 我只是开始使用这种编码格式，因为这是我创建网站的第一次尝试。感谢您的帮助。

Answer 1

你可以为它做一个jsfiddle吗？我会非常感谢html部分，只是为了ID，类等。然后我会编辑我的问题以便正确回答。

我真的不明白你的问题。您希望在悬停它时对链接进行样式设置，即使您将鼠标移离它也希望它保持这种状态，但您希望链接以第三种方式保持风格（在悬停之前，悬停但是ou，悬停并且仍然在）如果鼠标当前位于链接之上，我是否得到了它？

的 - 更新： 的

以下是评论：

<强> jsfiddle.net/VYuS6/2

我认为你唯一的问题是缺乏对所需API等的引用。

PS。：它在我的电脑上在所有浏览器中都运行得很好。 PS.2：Jsfiddle不接受我的css引用，但它在jsfiddle之外工作。

使用选定的元素实现滚动效果

1 个答案: