Название:
Красивое новое вертикальное меню с изменением картинки при наведении
Категория:
Меню для сайта
Раздел:
uCoz - Скрипты
Просмотров:
 3234
Автор:
Неизвестен
Добавил:
Дмитрий
Комментов:
0
Добавленно:
  19.10.2014 в 16:44
Теги:
ВЕРТИКАЛЬНОЕ, красивое, изменением, при, новое, наведении, картинки, меню
Рейтинг:
Игровая индустрия

Красивое новое вертикальное меню с изменением картинки при наведении

Красивое и много функциональное меню которое расположено вертикально, а так же при наведении на ссылку рядом появляются разные картинки.

Очередное прекрасное красивое и новое меню на uCoz сайт, сделанное современно и профессионально. Код для данного меню адаптировал для именно укоз веб-мастер Apocalypse. Чем интересно меню - самое необычное это то, что при нажатие на ссылку из меню открывается новая картинка, а так же всё это сопутствует красивыми плавными переходами, прямо как процесс настила линолеума. Установите сами это на своём сайте и опробуйте все возможности этого нового меню для uCoz. Не забудьте то, чтобы устанавливать такие коды на свой сайт, нужно хоть немного разбираться в html разметке сайта.

Переходим к установке.

Установка:

В самый низ вашего 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="http://gigabytes.clan.su/"><span>Мы несём добро в сеть</span> <span>GiG-PRO.RU</span></a>  
<img src="Ссылка на картинку" style="height:388px;width:450px;" alt="GiG-PRO.RU" />  
</li>  
<li>  
<a href="http://gigabytes.clan.su/"><span>Зима, холод, брррр</span> <span>GiGabYtes.Clan.Su</span></a>  
<img src="Ссылка на картинку 2" style="height:388px;width:450px;" alt="GiGabYtes.Clan.Su" />  
</li>  
<li>  
<a href="http://gigabytes.clan.su/"><span>Осень, осень ...</span> <span>Осень</span></a>  
<img src="Ссылка на картинку 3" style="height:388px;width:450px;" alt="image03" />  
</li>  
<li>  
<a href="http://gigabytes.clan.su/"><span>Красиво и прекрасно ...</span> <span>Но холодно</span></a>  
<img src="Ссылка на картинку 4" style="height:388px;width:450px;" alt="image04" />  
</li>  
</ul>
Посмотреть демо "Красивое новое вертикальное меню с изменением картинки при наведении"

Подождите немного, сейчас файл будет подготовлен, через
секунд Вы получите ссылку на скачивание.


Зарегистрированные пользователи уже качают в то время как вы ожидаете 16 секунд.
Всего комментариев: Комментариев нет , Но вы можете написать первым
avatar