Главная » Файлы » Прочие скрипты » 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 | |
Просмотров: 492 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |