Горизонтальное меню NYG зеленый цвет для uCoz
 | |
| Очень много скриптов на тему навигация по сайту, а мы разберем Горизонтальное меню в зеленой цвете для uCoz, так как по своему характеру стилей оно не сложное и вы можете его отлично подогнать на свой ресурс. Вообщем по умолчанию оно идет в светлых тонах и где нет не одной ссылки. И цвет вы можете править сами в самом CSS и менять описание также по его гамме, что приведу ниже. У него очень много было под категорий, что пришлось убрать и оставить одну, чтоб вам было понятно, если начнете добавлять их к разделу. Вот только поправил немного.  И уже совершенно по другому смотрится, но здесь вы можете добавить стилей, чтоб углы закруглить, вообщем, что вам нужно то и создавайте. Скрипт на первую официальную картину. Код <div width="100%"> <ul id="hmenu"> <li><a href="http://zornet.ru/">Главная</a></li> <li><a href="http://zornet.ru/load">Скрипты сайта</a></li> <li><a href="http://zornet.ru/video"><b>Видео уроки</b></a></li> <li><a href="http://zornet.ru/publ">Статьи</a></li> <li><a href="http://zornet.runews">Новости</a></li> <li><a href="http://zornet.ru"><strong>ZORNET.RU</strong></a> <ul> <li><a href="/">Скрипты сайта</a></li> <li><a href="/">Скрипты сайта</a></li> <li><a href="/">Скрипты сайта</a></li> </ul> </li> <li><a href="http://zornet.ru">Помощь</a> </li> </ul> </div> CSS: Код #hmenu {width: 100%; background-color: #9F9; box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);} #hmenu, #hmenu ul {margin: 0; padding: 0; list-style: none; margin-bottom: 20px;} #hmenu:before, #hmenu:after {content: ""; display: table; } #hmenu:after {clear: both;} #hmenu {zoom:1;} #hmenu li {float: left; border-right: 1px solid #217C21; position: relative;} #hmenu a {float: left; padding: 16px 22px 16px 22px; color: #000; text-decoration: none;} #hmenu li:hover > a {color: #000; background: #fbb905;} *html #hmenu li a:hover { /* IE6 only */ color: #000000; background: #fbb905;} #hmenu ul {margin: 20px 0 0; _margin: 0px; /*IE6 only*/ opacity: 0; visibility: hidden; position: absolute; top: 55px; left: 0px; z-index: 9999; background: #9F9; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;} #hmenu li:hover > ul {opacity: 1; visibility: visible; margin: 0;} #hmenu ul ul {top: 0px; left: 208px; _margin: 0;} #hmenu ul li {float: none; display: block; border: 0; _line-height: 0px;} #hmenu ul a {padding: 11px 10px; width: 180px; _height: 10px; /*IE6 only*/ display: block; white-space: nowrap; float: none; text-transform: none; text-decoration: none;} #hmenu ul a:hover {background: #fbb905;} #hmenu ul li:first-child > a:after {content: ''; position: absolute; left: 40px; top: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #9F9;} #hmenu ul ul li:first-child a:after {left: -6px; top: 50%; margin-top: -6px; border-left: 0px; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-right: 6px solid #9F9;} #hmenu ul li:first-child a:hover:after {border-bottom-color: #fbb905;} #hmenu ul ul li:first-child a:hover:after {border-right-color: #fbb905; border-bottom-color: transparent;} @media screen and (max-width: 1024px) {.hmenu_none {display: none;}}  | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |