Mouse overs are fun and help indicate available actions but, is there any way to spruce them up? Transitions really help add polish to an application or site. One idea is a fading mouse over, so that the button gradually reaches a pressed state. I set this menu up accordingly to create this.
The menu uses a standard <li> setup and builds the rest from JS and CSS. Here is the markup:
<ul class=”topnav”>
<li class=”navLeft” hoveritem=”#sngLiHover0″></li>
<li hoveritem=”#sngLiHover1″> <a href=”#”>Home</a></li>
<li hoveritem=”#sngLiHover2″> <a href=”#”>Account</a></li>
<li hoveritem=”#sngLiHover3″> <a href=”#”>Cart</a></li>
<li hoveritem=”#sngLiHover4″> <a href=”#”>Help & Info</a></li>
<li hoveritem=”#sngLiHover5″> <a href=”#”>Contact Us</a></li>
<li class=”navRight”></li>
</ul>
The script then attaches the needed information:
//SNG popup and nav
//navigation fader
/* Written by Scott Gale (c) */
/* Requires jquery1.2.1 */
(function($) {
window.SNG = window.SNG || {};
$(function(){
$("#cwdusacontainer .topnav li").not(".search").not(".navRight").each(function(count){
var width = (parseInt($(this).width(),10)+24)+"px";
var height = $(this).height();
$(this).attr("hoverItem","#sngLiHover"+count);
var div = document.createElement("div");
div.className = "liHover";
div.id = "sngLiHover"+count;
$(div).width(width);
$(div).css("opacity","0");
$(this).prepend(div);
});
$("#cwdusacontainer .topnav li").not(".navRight").not(".search").not(".navLeft").hover(
function() {
$(this.getAttribute("hoverItem")).animate({opacity:\'1\'});
},
function() {
$(this.getAttribute("hoverItem")).animate({opacity:\'0\'});
}
).click(function(){
document.location = $(this).find("a").attr("href");
});
$(".search input").click(function() {
if(this.value == "Quick Search") {
this.value = "";
}
}).blur(function() {
if(this.value == "") {
this.value = "Quick Search";
}
});
});
})(jQuery);