[英]Float line color for selected menu item
我使用的浮法玻璃生產線菜單我的WordPress網站,我得到了這么遠一些幫助。
現在我的問題是如何將選定的導航浮動線與將鼠標懸停在菜單項上時的顏色相同? 此時,只要鼠標關閉,它就會變為默認的紅色。
這就是我想要實現的目標:
當菜單1被#0f0
(單擊后),浮點線顏色應為#0f0
選擇菜單2 - #ee0
菜單3已選中 - #05f
任何幫助表示贊賞。
添加var currentSelected;
以上var sse1 = function () {
並添加currentSelected=k;
到下面的塊
for (var i = 0; i < a.length; i++) {
if (url.indexOf(a[i].href.toLowerCase()) != -1 && a[i].href.length > nLength) {
k = i;
nLength = a[i].href.length;
}
}
將當前所選列表的索引推送到currentSelected
。
所以在customHandleMenu
函數中使用它
var navigations=[
/* Nav 1 style */
{floatColor: '#0f0',
borderColor: '#0f0'},
/* Nav 2 style */
{floatColor: '#ee0',
borderColor: '#ee0'},
/* Nav 3 style */
{floatColor: '#05f',
borderColor: '#05f'},
];
function customHandleMenu() {
// get nav selector
var nav = $('#sses1 > ul');
// get float line selector
var floatLine = $('.highlight'); // .hightlight must exist at this point
// get colors for the current page
var defaultBGcolor = navigations[currentSelected]["borderColor"];
var defaultBorderColor = navigations[currentSelected]["borderColor"];
var defaultNavBorderColor = navigations[currentSelected]["borderColor"];
// change background-color and border-color on mouseenter event
$('.nav-item-1').on({
mouseenter: function () {
setColors({
floatColor: navigations[0]["floatColor"],
borderColor: navigations[0]["borderColor"]
});
}
});
$('.nav-item-2').on({
mouseenter: function () {
setColors({
floatColor: navigations[1]["floatColor"],
borderColor: navigations[1]["borderColor"]
});
}
});
$('.nav-item-3').on({
mouseenter: function () {
setColors({
floatColor: navigations[2]["floatColor"],
borderColor: navigations[2]["borderColor"]
});
}
});
/*
...
*/
// put back default colors on the mouseleave event
$('#sses1 > ul > li').on({
mouseleave: function() {
setColors({floatColor:defaultBGcolor, borderColor:defaultNavBorderColor});
}
});
setColors({floatColor:defaultBGcolor, borderColor:defaultNavBorderColor});
function setColors(args) {
if (typeof args.floatColor != "undefined") {
floatLine.css('background-color', args.floatColor);
}
if (typeof args.borderColor != "undefined") {
floatLine.css('border-color', args.borderColor);
nav.css('border-bottom-color', args.borderColor);
}
}
}
要防止Float Line動畫化onload,只需按照代碼中注釋的說明操作即可
//slip.style.left = items[k].offsetLeft + "px";
sse1.move(items[k]); //comment out this line and uncomment the line above to disable initial animation
創造:
slip.style.left = items[k].offsetLeft + "px";
// sse1.move(items[k]); comment out this line and uncomment the line above to disable initial animation.
此外,您可以選擇添加
$('#sses1 li, #sses1 a').on('click',function(){
$('#sses1, #sses1 ul, #sses1 li, #sses1 a').unbind("mouseout");
$('#sses1, #sses1 ul, #sses1 li, #sses1 a').unbind("mouseleave");
$('#sses1, #sses1 ul, #sses1 li, #sses1 a').unbind("mouseenter");
$('#sses1, #sses1 ul, #sses1 li, #sses1 a').unbind("mousein");
$('#sses1, #sses1 ul, #sses1 li, #sses1 a').unbind("mouseover");
sse1={};
});
對於您的customhandlemenu
功能,在頁面准備加載時完全禁用任何不需要的動畫。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.