Пример создания просто CSS3 меню с эффектом размытия (blur).

Разметка HTML

    <div class="menu">
        <a href="#">Главная</a>
        <a href="#">Форум</a>
        <a href="#">Программы</a>
        <a href="#">Игры</a>
        <a href="#">Контакты</a>
        <a href="#">Статьи</a>
    </div>

CSS

html, body {
padding:0;
margin:0;
}

body {
font-family:Arial, Helvetica, sans-serif;
background:#0c0316;
}

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

.menu a {
display:block;
text-decoration:none;
font-family: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;
}

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

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

a {
color:#eee;
}

javascript

Подключаем jQuery:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

и скрипт:

$(function(){
   
    var menu = $('.menu'),
        a = menu.find('a');
       
        a.wrapInner($('<span />'));
       
        a.each(function(){
            var t = $(this), span = t.find('span');
            for (i=0;i<5;i++){
                span.clone().appendTo(t);
            }
        });
       
        a.hover(function(){
            var t = $(this), s = t.siblings('a');
            t.toggleClass('shadow');
            s.toggleClass('blur');
        });
   
});

СКАЧАТЬСкачек: 498
1,3 Kb
Кто скачал?

ДЕМОПосмотреть
пример