» »

Красивая подборка меню ссайта CSS3 и jQuery


Предлагаю вам красивая подборку меню с сайта с помощью CSS3 и jQuery. В этой подборке вы можете подобрать себе меню сайта под свой дизайн сайта, да и просто которое вам понравилось. Меню всякого цвета, выбор есть.
Установка:
Скачиваем с нашего сайта архив на все подборки меню, то есть их файлы.
Потом идем в CSS и пропишем на меню стиль. Один стиль на все меню.
Код
.lavalamp {  
position: relative;  
border: 1px solid #d6d6d6;  
background: #fff;  
padding: 15px;  
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);  
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);  
border-radius : 10px;  
-moz-border-radius : 10px;  
-webkit-border-radius : 10px;  
background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));  
background : -moz-linear-gradient(top, rgb(240,240,240), rgb(204,204,204));  
height: 18px;  
}  

ul {  
margin: 0;  
padding: 0;  
z-index: 300;  
position: absolute;  
}  

ul li {  
list-style: none;  
float:left;  
text-align: center;  
}  

ul li a {  
padding: 0 20px;  
text-align: center;  
}  

.floatr {  
position: absolute;  
top: 10px;  
z-index: 50;  
width: 70px;  
height: 30px;  
border-radius : 8px;  
-moz-border-radius : 8px;  
-webkit-border-radius : 8px;  
background : rgba(0,0,0,.20);  
-webkit-transition: all .4s ease-in-out;  
-moz-transition: all .4s ease-in-out;  
}

Но и остался код на меню, ставим его, ну как все думаю под шапку сайта:
Код
<div class="lavalamp" >  
  <ul>  
  <li class="active"><a href="/">Главная</a></li>  
  <li><a href="http://zornet.ru/">Скрипты</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>  
  <li><a href="/">Контакты</a></li>  
  <li><a href="/">Поиск</a></li>  
  </ul>  
  <div class="floatr"></div>  
  </div>

Не забываем, надо в корень залить из архива 3 папки images, js, styles. И на этом все.
12.02.2013 Загрузок: 22 Просмотров: 3272 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar