QR Код
QR Код на скачивание по второй ссылке
Розовое меню ( с возможностью замены цвета)
Розовое меню (с возможностью замены цвета) с анимацией при наведении курсора.
Код вставляем в блок на место старого меню:
Настройки:
width:150px; height:550px; - это размер будущего меню. Учтите, что при изменении кол-ва пунктов меню нужно поменять размер.
ul.menu2 li a.red {background:#fc0089;} - это цвет статичного меню (розовый)
ul.menu2 li a.red:hover {background:#91015b;background-image: url(http://ucozzz.3dn.ru/Files/ucoz/script/ice.gif);} - это анимация меню при наведении курсора. Ссылку можете вставить в окно браузера и скопировать картинку себе на комп, потом залить к себе на сайт.
<a href="http://" class="red">МЕНЮ</a> - это непосредственно пункт меню, где http:// это ссылка на страницу из меню а МЕНЮ это название страницы.
Код вставляем в блок на место старого меню:
Код
<style>
.menuHolder2 {position: relative; margin-left:10px; float:left; overflow:hidden; width:150px; height:550px; font:normal bold 11px/35px verdana, sans-serif;}
.menuHolder2 .shadow {width:10px; height:90%; top:5%; left:-9px; position:absolute; z-index:100; background:#888;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
-o-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
}
ul.menu2 {margin:0 0 0 1px; list-style: none; display:block; width: 150px; position:relative; padding:60px 0;}
ul.menu2 li {margin:5px 0 0 0;}
ul.menu2 li a {background:#aaa; color:#ddd; padding:0 15px; width:90px; display:block; text-decoration:none;
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius:0 10px 10px 0;
-o-border-radius:0 10px 10px 0;
border-radius:0 10px 10px 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
ul.menu2 li a.red {background:#fc0089;}
ul.menu2 li a:hover {background:#aaa; color:#fff; padding:0 15px 0 40px;}
ul.menu2 li a.red:hover {background:#91015b;background-image: url(http://ucozzz.3dn.ru/Files/ucoz/script/ice.gif);}
</style>
<div class="menuHolder2">
<ul class="menu2">
<li><a href="http://"class="red">МЕНЮ</a></li>
<li><a href="http://" class="red">МЕНЮ</a></li>
<li><a href="http://" class="red">МЕНЮ</a></li>
<li><a href="http://" class="red">МЕНЮ</a></li>
<li><a href="http://" class="red">МЕНЮ</a></li>
<li><a href="http://" class="red">МЕНЮ</a></li>
<li><a href="http://" class="red">МЕНЮ</a></li>
<li><a href="http://" class="red">МЕНЮ</a></li>
<li><a href="http://" class="red">МЕНЮ</a></li>
<li><a href="http://" class="red">МЕНЮ</a></li>
</ul>
<div class="shadow"></div>
</div>
.menuHolder2 {position: relative; margin-left:10px; float:left; overflow:hidden; width:150px; height:550px; font:normal bold 11px/35px verdana, sans-serif;}
.menuHolder2 .shadow {width:10px; height:90%; top:5%; left:-9px; position:absolute; z-index:100; background:#888;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
-o-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
}
ul.menu2 {margin:0 0 0 1px; list-style: none; display:block; width: 150px; position:relative; padding:60px 0;}
ul.menu2 li {margin:5px 0 0 0;}
ul.menu2 li a {background:#aaa; color:#ddd; padding:0 15px; width:90px; display:block; text-decoration:none;
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius:0 10px 10px 0;
-o-border-radius:0 10px 10px 0;
border-radius:0 10px 10px 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
ul.menu2 li a.red {background:#fc0089;}
ul.menu2 li a:hover {background:#aaa; color:#fff; padding:0 15px 0 40px;}
ul.menu2 li a.red:hover {background:#91015b;background-image: url(http://ucozzz.3dn.ru/Files/ucoz/script/ice.gif);}
</style>
<div class="menuHolder2">
<ul class="menu2">
<li><a href="http://"class="red">МЕНЮ</a></li>
<li><a href="http://" class="red">МЕНЮ</a></li>
<li><a href="http://" class="red">МЕНЮ</a></li>
<li><a href="http://" class="red">МЕНЮ</a></li>
<li><a href="http://" class="red">МЕНЮ</a></li>
<li><a href="http://" class="red">МЕНЮ</a></li>
<li><a href="http://" class="red">МЕНЮ</a></li>
<li><a href="http://" class="red">МЕНЮ</a></li>
<li><a href="http://" class="red">МЕНЮ</a></li>
<li><a href="http://" class="red">МЕНЮ</a></li>
</ul>
<div class="shadow"></div>
</div>
Настройки:
width:150px; height:550px; - это размер будущего меню. Учтите, что при изменении кол-ва пунктов меню нужно поменять размер.
ul.menu2 li a.red {background:#fc0089;} - это цвет статичного меню (розовый)
ul.menu2 li a.red:hover {background:#91015b;background-image: url(http://ucozzz.3dn.ru/Files/ucoz/script/ice.gif);} - это анимация меню при наведении курсора. Ссылку можете вставить в окно браузера и скопировать картинку себе на комп, потом залить к себе на сайт.
<a href="http://" class="red">МЕНЮ</a> - это непосредственно пункт меню, где http:// это ссылка на страницу из меню а МЕНЮ это название страницы.
- Источник:Неизвестен
- Для скачивания необходима авторизация -
Всего комментариев: 0 | |
Последние посты с форума
- Новости сайта
- Написал: admin (02.08.2014)
- У кого какой компьютер
- Написал: admin (10.02.2014)
Лучшие посты на форуме
- Считаем до 1000
- Написал: admin (01.09.2013)
- Игра ассоциации
- Написал: Ooh_la_la (15.03.2011)