菜單動畫和懸停狀態 - 簡單的jQuery解決方案（LavaLamp菜單的想法）

我在主站點導航菜單中遇到以下問題。我已經回顧了編輯在詢問排隊時提出的一些問題，但沒有一件是我正在尋找的東西......我非常抱歉提出這樣一個具體問題。菜單動畫和懸停狀態 - 簡單的jQuery解決方案（LavaLamp菜單的想法）

說明：菜單必須選擇的電流。但當你懸停另一個#menu li a目前的狀態必須消失並出現在懸停的元素。當懸停出來了，如果一直沒有點擊，當前狀態必須返回到真正當前#menu li a

注：

它應該是一個解決方案基礎上儘可能多的CSS作爲儘可能少jQuery的可能性。但我明白，jQuery是必要的小提琴
過渡必須得到尊重
如果這並不意味着額外的代碼butload，我想它與重點國家也

工作

你是個好人，非常感謝你的幫助！

這裏是我做我自己，當然，不工作的代碼...

$(function(){ 
    $('#menu li a').hover(
    function() { 
     $(this).addClass('current'); 
    }, 
    function() { 
     $(this).removeClass('current'); 
    } 
); 
});

的CSS：

#menu { 
    display: inline-block; 
    position: relative; 
} 

#menu li { 
    display: inline-block; 
    float: left; 
} 

#menu li a { 
    display: block; 
    padding: 46px 11px 0; 
    border-top: 9px solid #7d7c7c; 
    font: normal 15px/1em Arial, sans-serif; 
    color: #6a6868; 
    text-transform: uppercase; 
    text-decoration: none; 

    transition: all .3s ease; 
} 

#menu li a.current, #menu li a:hover { 
    padding: 38px 11px 0; 
    border-top: 17px solid #e30613; 
}

HTML（tipicall，有效的HTML5菜單）：

<header> 
    <nav> 
     <ul id="menu" class="clearfix"> 
     <li><a class="current" href="#">La Agencia</a></li> 
     <li><a href="#">Que Hacemos</a></li> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">Contacto</a></li> 
     </ul> 
     <div class="clear"></div> 
    </nav> 
</header>

來源

2013-07-30 Santiago Baigorria

你可以添加一個額外的類 '真實' 這樣

$(function(){ 
    $('#menu li a').hover(function(){ 
     $('.current').removeClass('current').addClass("real"); 
    },function(){ 
     $('.real').removeClass('real').addClass("current"); 
    } 
    ); 
});

，並刪除 '真正的' 類返回到當前的http://jsfiddle.net/fYq6k/2/
UPDATE
重點

$(function(){ 
    $('.current').addClass("real"); 
    $('#menu li a').hover(function(){ 
      $('.current').removeClass('current'); 
     },function(){ 
      $('.current').removeClass('current'); 
      $('.real').addClass("current"); 
     } 
    ).focus(function(){ 
      $('.current').removeClass('current'); 
      $(this).addClass("current"); 
    }).blur(function(){ 
     $('.current').removeClass("current"); 
     $('.real').addClass("current"); 
    }); 
});

工作你需要在事件焦點和模糊上做同樣的事情http://jsfiddle.net/fYq6k/5/
使用焦點修復bug
修復閃爍我一個空div添加到每個「李一」和動畫該分區，而不是邊框和填充
HTML

<ul id="menu" class="clearfix"> 
    <li><a class="current" href="#"><div></div>La Agencia</a></li> 
    <li><a href="#"><div></div>Que Hacemos</a></li> 
    <li><a href="#"><div></div>Portfolio</a></li> 
    <li><a href="#"><div></div>Contacto</a></li> 
</ul>

CSS

#menu li a div{ 
    height:9px; 
    background:#7d7c7c; 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:100%; 
    transition: all .3s ease; 
} 
#menu li a.current div{ 
    height: 17px; 
    background:#e30613; 
}

http://jsfiddle.net/fYq6k/6/

來源

2013-07-30 16:56:58

太棒了！不敢相信！像魅力一樣寫作！現在你已經在上面了......你會注意到，如果你快速懸停，文本會閃爍。這是因爲當應用較少的頂部填充和應用市長頂部邊框時，可以實現這種效果，所以我認爲當懸停效果完全實現時，效果計算是完美的，但是當您使用懸停效果時，文本會下降並且變大閃爍）......我不相信任何客戶會真的做這樣的事情，但如果我能避免它，那就更好！如果你有什麼建議，可以重新做到完美......歡迎！非常感謝！ –

順便說一句，使用重點錯誤導航...檢查出來 –

更新小提琴[http://jsfiddle.net/fYq6k/6/](http://jsfiddle.net/fYq6k/6/） –

我發現此示例頁面：http://www.script-tutorials.com/demos/249/index.html 其中，選擇返回當鼠標懸停在菜單上時，返回到「家」。還有一個教程。它不包含任何JavaScript，我認爲。

來源

2013-07-30 16:27:12 Dragongeek

謝謝很多，但我已經看到了這一點，這不是我所需要的。 –

菜單動畫和懸停狀態 - 簡單的jQuery解決方案（LavaLamp菜單的想法）

回答

相關問題