Меню для сайта горизонтальное радужное с разными оттенками в исполнение плагинов на jQuery предназначены для цветных развлекательных сайтов где стоит обращать внимание на цвет по памяти а не считывать что написано на кнопке , потому что когда яркие цвета то шрифт практический не видно даже с обводом текста стилем или графикой.
Меню идеально подходит для шапки сайта или может его заменить так как по себе является горизонтальным и удобным в размещения вместе с плагинами jQuery.
Перед выбором и размещением подобных меню обращайте внимание что бы не было конфликта исполнительных библиотек скриптов, потому что бывает что пр установке скрипта может потерять функциональность другой скрипт, по это стоит более разборчиво подходить к такому вопросу в веб строительстве самой шапки или сайта.
Примечание:
Для правильной работы скрипта нужна версия jQuery не ниже 1.7.2
Установка меню на сайт:
После /head на нужных страницах вставляйте:
Код
<script src="http://ucozon.ru/_dr/65/6588_easing.js"></script>
Далее идём в ПУ > Управление дизайном > таблицы стилей CSS, и вставляем в самый низ этот код:
Код
#menu {
float: left;
position: relative;
top: 0;
left: 0;
margin:0px;
overflow: hidden;
}
#menu .colourful {
display: block;
position: absolute;
background: #f0ad22;
height: 38px;
width: 85px;
top: 4px;
left: -100px;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
top: 0;
left: 0;
z-index: 1;
}
#menu li {
float: left;
margin: 0 1px 0 0;
}
#menu a:link, #menu a:visited, #menu a:hover, #menu a:active {
color: #000;
text-align: center;
display: block;
border: solid;
border-width: 4px 0 0;
line-height: 40px;
width: 85px;
}
#menu li a:hover {
text-decoration: none;
color: #fff;
text-shadow: 0 0 1px #999;
}
Этот код вставляйте в то место, где хотите видеть ваше меню:
Код
<div id="menu">
<ul>
<li> <a href="">Веб-дизайн</a>
</li>
<li> <a href="">jQuery</a>
</li>
<li> <a href="">Html5 и Css3</a>
</li>
<li> <a href="">PHP</a>
</li>
<li> <a href="">Photoshop</a>
</li>
<li> <a href="">Illustrator</a>
</li>
<li> <a href="">Wordpress</a>
</li>
<li> <a href="">Статьи</a>
</li>
<li> <a href="">vBulletin</a>
</li>
</ul>
</div>
<!-- end menu -->
Меню сайта
Меню сайта
