Горизонтальное меню Baskino для uCoz

2684 просмотров Alan_Writer 09.04.2014

Горизонтальное меню Baskino для uCoz. Недавно по просьбе одного человека нужно было в один шаблон встроить меню из шаблона Baskino. Меню отлично подошло, так как дизайн сайта, на который его нужно поставить был светлый - как и меню. Хотя его пришлось немного изменить, т.к в оригинале оно имеет фиксированную ширину и растянуто не на всю ширину основного контейнера. В общем поскольку это меню как я понимаю вызывает интерес, то я решил его выложить отдельно и бесплатно.

Меню Baskino для uCoz имеет довольно крупные элементы, поэтому оно очень удобное в использовании. Оно имеет выпадающие подменю, которые при этом разбиты на несколько колонок, поэтому если список "подменющек" длинный - он не будет опускаться ниже видимой зоны.

Установка меню:

Скачайте архив и залейте папку menu в корень сайта.

Вставьте содержимое файла Код меню или код ниже - в то место где хотите видеть меню:

Код

<ul class="sf-menu">
 <li><a href="/">Главная</a></li>
<li>
<a href="/">Пункт-1</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/">Пункт-2</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/">Пункт-3</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/">Пункт-4</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/">Контакты</a></li>
</ul>

*Естественно пункты меню и подменю замените на свои!

И последнее, вставьте стили из файла Стили CSS или из кода ниже - в свой основной 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(/menu/menu-bg.jpg) repeat-x left top; display:block;}
.sf-menu li a span {background:url(/menu/menu-left.jpg) left top no-repeat;display:block;}
.sf-menu li a span em {background:url(/menu/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(/menu/menu-bg-act.jpg) repeat-x left top;}
.sf-menu li a span:hover, .sf-menu li a.active span {background:url(/menu/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(/menu/menu-down.jpg) no-repeat 0px -34px;}
.sf-menu li li a:hover, .sf-menu li li a.active {background:url(/menu/menu-down.jpg) no-repeat; background-position:0 0px; font-weight:bold; text-shadow: 0px 1px 0px #FFF;}

Все готово. Не забываем лайкать, делиться ссылками и подписываться!

Теги: рип меню Baskino, меню Baskino ucoz, горизонтальное меню, адаптация меню Baskino, меню Baskino, Скачать меню Baskino