» »

Горизонтальное меню BLOSK для ucoz


Горизонтальное меню 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 способа, и все рабочие.
01.04.2015 Загрузок: 3 Просмотров: 754 Комментарий: (3)

Поделиться в социальных сетях

Материал разместил

Комментарий: 3
Kosten
Kosten 02.04.2015 11:361
0
Это меню сайта baskino и как понимаю, это чистая адаптация скрипта, но отлично сделана.
Kosten
Kosten 02.04.2015 12:452
0
Что про это меню скажете, оно только под кино онлайн или можно на другой теме применить?
Kvint
Kvint 19.10.2015 14:553
0
Какое прекрасное меню, вот бы еще шаблон под него и был бы весь необходимый набор.
avatar