Вертикальное меню для сайта CSS
Вертикальное меню для сайта на чистом CSS3 с эффектом размытия.
Код HTML
Код HTML
<div class="bmenu"> <ul> <li><a href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#" _cke_saved_href="#">О нас</a></li> <li><a href="#">Иллюстрации</a></li> <li><a href="#">Фотографии</a></li> <li><a href="#">Веб дизайн</a></li> <li><a href="#">Персоналии</a></li> <li><a href="#">Контакты</a></li> </ul> </div>Код CSS
.bmenu{ list-style:none; text-decoration:none; padding: 0px; margin: 0 0 10px 0; position: relative; } .bmenu li{ font-size: 30px; display: block; list-style:none; text-decoration:none; } .bmenu li a{ list-style:none; text-decoration:none; color: transparent; display: block; text-transform: uppercase; color:#000; letter-spacing: 1px; } .bmenu:hover li a{ color: transparent; text-shadow: 0px 0px 3px #000; } .bmenu li a:hover{ color: transparent; text-shadow: 0px 0px 0px #b34040; padding-left: 10px; }