Горизонтальное меню BLOSK для ucoz
 | |
| Не заметил это красивое Горизонтальное меню BLOSK для ucoz, чтоб где то стояло на сайте, но как видите оно отлично смотрится будет как на темном и на светлом фоне. Наводя курсор и делая клик на раздел, то кнопка прогибается, что показывает вы кликнули. Это безусловно работа CSSчто с ним идет, не стал делать папку а сразу прописал. Вам остается только скопировать и установить. У него есть под категорий и они сделаны на 2 вектора, что думаю много и нужно будет один убрать. Не стал редактировать его, так как возможно кому так и нужно. Сами они будут в темной гаме а при наведение в белой. Такие разные цветовые гаммы и так сочетаются, что очень редко увидишь. Ставим туда где по вашему мнению должен стоять скрипт основной, но это вверх сайта и в самый его низ прописываем. Код <ul class="sf-menu"> <li><a href="/"><span><em>Главная</em></span></a></li> <li> <a href="/"><span><em>Пункт-1</em></span></a> <ul> <li><a href="/">Подпункт-1</a></li> <li><a href="/">Подпункт-2</a></li> <li><a href="/">Подпункт-3</a></li> <li><a href="/">Подпункт-4</a></li> <li><a href="/">Подпункт-5</a></li> <li><a href="/">Подпункт-6</a></li> <li><a href="/">Подпункт-7</a></li> <li><a href="/">Подпункт-8</a></li> <li><a href="/">Подпункт-9</a></li> <li><a href="/">Подпункт-10</a></li> <li><a href="/">Подпункт-11</a></li> <li><a href="/">Подпункт-12</a></li> </ul> </li> <li> <a href="/new/"><span><em>Пункт-2</em></span></a> <ul> <li><a href="/">Подпункт-1</a></li> <li><a href="/">Подпункт-2</a></li> <li><a href="/">Подпункт-3</a></li> <li><a href="/">Подпункт-4</a></li> <li><a href="/">Подпункт-5</a></li> <li><a href="/">Подпункт-6</a></li> <li><a href="/">Подпункт-7</a></li> <li><a href="/">Подпункт-8</a></li> <li><a href="/">Подпункт-9</a></li> <li><a href="/">Подпункт-10</a></li> <li><a href="/">Подпункт-11</a></li> <li><a href="/">Подпункт-12</a></li> </ul> </li> <li> <a href="/new/"><span><em>Пункт-3</em></span></a> <ul> <li><a href="/">Подпункт-1</a></li> <li><a href="/">Подпункт-2</a></li> <li><a href="/">Подпункт-3</a></li> <li><a href="/">Подпункт-4</a></li> <li><a href="/">Подпункт-5</a></li> <li><a href="/">Подпункт-6</a></li> <li><a href="/">Подпункт-7</a></li> <li><a href="/">Подпункт-8</a></li> <li><a href="/">Подпункт-9</a></li> <li><a href="/">Подпункт-10</a></li> <li><a href="/">Подпункт-11</a></li> <li><a href="/">Подпункт-12</a></li> </ul> </li> <li> <a href="/new/"><span><em>Пункт-4</em></span></a> <ul> <li><a href="/">Подпункт-1</a></li> <li><a href="/">Подпункт-2</a></li> <li><a href="/">Подпункт-3</a></li> <li><a href="/">Подпункт-4</a></li> <li><a href="/">Подпункт-5</a></li> <li><a href="/">Подпункт-6</a></li> <li><a href="/">Подпункт-7</a></li> <li><a href="/">Подпункт-8</a></li> <li><a href="/">Подпункт-9</a></li> <li><a href="/">Подпункт-10</a></li> <li><a href="/">Подпункт-11</a></li> <li><a href="/">Подпункт-12</a></li> </ul> </li> <li><a href="/top/"><span><em>Контакты</em></span></a></li> </ul> CSS Код .sf-menu, .sf-menu * {margin:0; padding:0; list-style:none;} .sf-menu li {float:left; position:relative;} .sf-menu ul {position:absolute; top:-999em; width:582px; margin-top: 2px;} .sf-menu ul li {-webkit-border-radius:0 !important; -moz-border-radius:0 !important; border-radius:0 !important; border-top:0 !important; float:left; width:194px;} .sf-menu ul li a, .sf-menu ul li a span, .sf-menu ul li a span em {-webkit-border-radius:0 !important; -moz-border-radius:0 !important; border-radius:0 !important;} .sf-menu li:hover {visibility:inherit;} .sf-menu li a:hover {color:#313131;} .sf-menu a {display:block;} .sf-menu li:hover ul {left:0;top:67px;z-index:9999;} ul.sf-menu li:hover li ul {top:-999em;} ul.sf-menu li li:hover ul {left:10em;top:0;} ul.sf-menu li li:hover li ul {top:-999em;} ul.sf-menu li li li:hover ul {left:10em;top:0;} .sf-menu {line-height:1.0; margin: 0px auto; width: 960px; height: 69px; background:url(/menu/menu-bg.jpg) repeat-x left top;} .sf-menu a {text-decoration:none;} .sf-menu li a {color:#414141; text-decoration: none; line-height: 1.2em; text-transform:uppercase; font-size:20px; background:url(http://zornet.ru/CSS-ZORNET/gerav/Yor/menu-bg.jpg) repeat-x left top; display:block;} .sf-menu li a span {background:url(http://zornet.ru/CSS-ZORNET/gerav/Yor/menu-left.jpg) left top no-repeat;display:block;} .sf-menu li a span em {background:url(http://zornet.ru/CSS-ZORNET/gerav/Yor/menu-right.jpg) no-repeat right top; display:block; font-style:normal; font-weight:400; letter-spacing:-1px; padding:16px 26px 29px; text-shadow: 0px 1px 0px #FFF;} .sf-menu li a:hover, .sf-menu li a.active {background:url(http://zornet.ru/CSS-ZORNET/gerav/Yor/menu-bg-act.jpg) repeat-x left top;} .sf-menu li a span:hover, .sf-menu li a.active span {background:url(http://zornet.ru/CSS-ZORNET/gerav/Yor/menu-left-act.jpg) left top no-repeat;} .sf-menu li a span em:hover, .sf-menu li a.active span em {background:url(/menu/menu-right-act.jpg) no-repeat right top;} .sf-menu li li a {color:#7a7979; font-family:Arial, Helvetica, sans-serif;text-transform:capitalize; font-size:12px; line-height:34px; padding-left:21px; background:url(http://zornet.ru/CSS-ZORNET/gerav/Yor/menu-down.jpg) no-repeat 0px -34px;} .sf-menu li li a:hover, .sf-menu li li a.active {background:url(http://zornet.ru/CSS-ZORNET/gerav/Yor/menu-down.jpg) no-repeat; background-position:0 0px; font-weight:bold; text-shadow: 0px 1px 0px #FFF;} Также вы можете скачать и там будет папка под названием menu, что нужно ее закинуть в корень сайта. И остальные коды со стилями там найдете. И перед тем, чтоб установить, вы можете посмотреть DEMO На этом все, для вас 2 способа, и все рабочие. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 4 | |
|
| |
