CSS3 and jQuery Blur Menu

In this experiment will show you how to achieve a simple blur effect applied on menu elements.

HTML

The first step is to lay down the HTML markup. Our structure is very simple.

 

CSS

In next step we’ll add some CSS style.

.menu {
position:absolute;
top:50%;
left:300px;
margin-top:-140px;
}

.menu a {
display:block;
text-decoration:none;
font-family:'PT Sans Narrow', sans-serif;
font-size:30px;
position:relative;
height:44px;
color:#eee;
}

.menu a span {
position:absolute;
top:0;
left:0;
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
-ms-transition:all .5s ease;
transition:all .5s ease;
/* add the transition to all properties. */
}

.menu .shadow {
text-shadow: 0 0 4px #fff;
}

.menu .blur {
color:#2b2b2b;
text-shadow:0 0 4px #2b2b2b;
opacity:.6;

JavaScript

$(function(){
var menu = $('.menu'),
a = menu.find('a');
a.wrapInner($(''));
// include the text in element.
a.each(function(){
var t = $(this), span = t.find('span');
for (i=0;i<5;i++){
span.clone().appendTo(t);
}
// add new elements to get a strong blur effect.
});
a.hover(function(){
var t = $(this), s = t.siblings('a');
t.toggleClass('shadow');
s.toggleClass('blur');
});
});

Download: http://www.htmldrive.net/items/download/1152

Be Sociable, Share!

Leave a comment