I’m going to try and explain this the best I can. I used this tutorial, http://tympanus.net/codrops/2010/06/28/awesome-cufonized-fly-out-menu/ to utilize a horizontal navigation menu for my website. I am currently trying to adjust the javascript from the tutorial. I want to keep the mouse rollover on each link as I move the mouse across each, but I want to have the selected link always highlighted (which it currently does not have the capability).
The issue I’m having: if I’m currently on the portfolio link and it’s highlighted and I hover over the home button last (before moving my mouse away from my menu div) it will highlight my home link even though I am currently on my portfolio page.
Here is my code:
$(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');
}
});
Here is my Css for the menu:
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;
}
Hopefully, I have explained clearly enough. My javascript skills are very weak–I have only started using this coding format as this is one of my first attempts at creating a website. Thanks for your help in advance.
Can you make a jsfiddle for it? I’d aprreciate the html part, just for the ids, classes, etc. Then I’ll edit my question to answer properly.
And I really didnt understand your question. You want the link to be styled when you hover it and you want it to stay that way even if you move your mouse away from it, but you want the link to be style in a third way (before hover, hovered but ou, hover and still on) if the mouse is currently on top of the link , did I get it?
–UPDATE:
Here it is , with the repective comments:
jsfiddle.net/VYuS6/2
I think youre only problem was the lack of reference to the needed APIs and such.
PS. : It worked perfectly on my PC in all browsers.
PS.2: Jsfiddle did not accept my css references , but its working outside jsfiddle.