Главная » Файлы » Прочие скрипты » CSS

Оригинальное вертикальноем меню с выезжающими изображениями для каждого пункта на CSS3 для uCoz
24.06.14, 18:50:09



Оригинальное вертикальное меню, которое я просто не мог не оформить на этом сайте

Для начала посмотрите ДЕМО

Моё тестирование в фидле: КЛИК

Установка:

В самый низ вашего css вставляйте:
Код
.mh-menu {  
height: 385px;  
width: 600px;  
margin-left: 0px;  
position: relative;  
  }  
  .mh-menu li {  
width: 300px;  
list-style:none;  
  }  
  .mh-menu li a {  
display: block;  
width: 280px;  
padding: 0px 10px;  
text-align: right;  
position: relative;  
z-index: 10;  
background: #fff;  
height: 97px;  
border-right: 1px solid #ddd;  
background-color: rgba(255, 255, 255, 0.8);  
text-decoration:none;  
  }  
  .mh-menu li:nth-child(1):hover a {  
background-color: rgba(174, 54, 55, 0.9);  
  }  
  .mh-menu li:nth-child(2):hover a {  
background-color: rgba(195, 210, 67, 0.9)  
  }  
  .mh-menu li:nth-child(3):hover a {  
background-color: rgba(211, 132, 57, 0.9);  
  }  
  .mh-menu li:nth-child(4):hover a {  
background-color: rgba(142, 116, 99, 0.9);  
  }  
  .mh-menu li a span {  
display:block;  
  }  
  .mh-menu li a span:first-child {  
font-weight: 700;  
font-size: 16px;  
color: #ddd;  
padding-top: 10px;  
font-family:'Alegreya SC', Georgia, serif;  
  }  
  .mh-menu li a span:nth-child(2) {  
font-weight: 400;  
font-style: italic;  
font-size: 28px;  
font-family:'Alegreya SC', Georgia, serif;  
-webkit-transition: color 0.2s linear;  
-moz-transition: color 0.2s linear;  
-o-transition: color 0.2s linear;  
-ms-transition: color 0.2s linear;  
transition: color 0.2s linear;  
  }  
  .mh-menu li:hover span:nth-child(2) {  
color: #fff;  
  }  
  .mh-menu li img {  
position: absolute;  
z-index: 1;  
left: 0px;  
top: 0px;  
opacity: 0;  
-webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;  
-moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;  
-o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;  
-ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;  
transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;  
  }  
  .mh-menu li:hover img {  
left: 300px;  
opacity: 1;  
  }


Следующий код в то место, где будет меню:
Код
<ul class="mh-menu">  
<li>  
<a href="#"><span>Мы несём добро в сеть</span> <span>APO-UCOZ.COM</span></a>  
<img src="Ссылка на картинку" alt="image01" />  
</li>  
<li>  
<a href="#"><span>Описание 2</span> <span>Заголовок 2</span></a>  
<img src="Ссылка на картинку 1" alt="image02" />  
</li>  
<li>  
<a href="#"><span>Описание 3</span> <span>Заголовок 3</span></a>  
<img src="Ссылка на картинку 3" alt="image03" />  
</li>  
<li>  
<a href="#"><span>Описание 4</span> <span>Заголовок 4</span></a>  
<img src="Ссылка на картинку" alt="image04" />  
</li>  
  </ul>


Материал подготовлен Apocalypse
Категория: CSS | Добавил: Apocalypse | Теги: выезжающими, Оригинальное, каждого, на, CSS3, изображениями, пункта, для, Меню, вертикальноем
Просмотров: 492 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: