Оригинал раздвижного меню Orel-CS

Скрипты для uCoz

09:36, 09 января 2016

1 124

Оригинальное раздвижное меню старого зеленого шаблона Orel-CS. Обычное раздвижное меню не занимающее много места в шаблоне и простое в установке. Итак приступим к установке.

1. В любое для вас удобное место добавим код:

Код

<div class="block_full">
<div class="block_title">Раздвижное меню</div>
<div class="block_cont">
<div class="block_c_in">

<div><a title="Показать все категории файлов" href="javascript://" class="sliEsq"><input value="Nk-CS.Ru" type="button" class="InStyle"></a>
<div class="sliesQ slicont">
<ul class="bnav">
<li><a href="#" title="Nk-CS.Ru"><strong>Nk-CS.Ru</strong></a></li>
<li><a href="#" title="Nk-CS.Ru"><strong>Nk-CS.Ru</strong></a></li>
<li><a href="#" title="Nk-CS.Ru"><strong>Nk-CS.Ru</strong></a></li>
<li><a href="#" title="Nk-CS.Ru"><strong>Nk-CS.Ru</strong></a></li>
<li><a href="#" title="Nk-CS.Ru"><strong>Nk-CS.Ru</strong></a></li>
</ul>
</div></div>

</div></div>
</div>

2. Добавим скрипт для работы меню (ВАЖНО: Если у вас стоит шаблон Orel-CS то добавлять скрипт не нужно, он уже есть в шаблоне) в нижнюю часть сайта:

Код

3. Добавим CSS стили (ВАЖНО: Если у вас стоит шаблон Orel-CS то добавлять CSS стили не нужно, они уже есть в шаблоне) в самый конец:

Код

.input_style input[type="button"],
.input_style button {
  height:22px; line-height:1;
  outline:none;
  border:1px solid #00650e;
  font-family:Tahoma;
  font-size:11px;
  font-weight:bold;
  color:#fff;
  text-transform:uppercase;
  text-decoration:none;
  margin-bottom: 2px !important;
  margin-top:2px;
  padding-bottom:2px;
  padding-left:4px; padding-right:4px;
  cursor: pointer;
  position:relative;
-moz-border-radius:3px;-webkit-border-radius:3px;-khtml-border-radius:3px;border-radius:3px;
background:#00680e url(/design_156/submit_bg.png) repeat-x center 0;
box-shadow:inset #007811 0 0 1px 1px; -webkit-box-shadow: inset #007811 0 0 1px 1px; -moz-box-shadow: inset #007811 0 0 1px 1px;
}

.input_style input[type="button"]:hover,
.input_style button:hover {background-position:center -25px;}

.bnav {width:197px;}
.bnav li {margin:4px 0 0 0;}
.bnav li:first-child {margin:0;}
.bnav li a {height:23px; line-height:23px; display:block; padding:0 8px; overflow:hidden; color:#4c4c4c; text-shadow:0px 1px 1px #bfbfbf; text-decoration:none; background:#b2b2b2 url(/design_156/block_bg.png) no-repeat -627px 0;}
.bnav li a:hover {color:#efefef; text-shadow:0px 1px 1px #003c08; background:#006d0f url(http://nk-amxserver.ucoz.ru/design_156/block_bg.png) no-repeat -627px -24px;}

Установка завершена.