» »

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


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

Это скрипт иного где видел и оно само по себе рекордное по своей актуальности, так как Горизонтальное меню VEALET подходит под любую тематику сайта. Его можно поставить и вся важная информация, будет храница в нем, это категорий и сами модули сайта. Делаем одну рубрику и в ней прописываем, то что нужно пользователям. Как можно заметить, что у него верхние углы есть, а вот в низу они округленные. Это говорит о том, что по дизайну выполненному, может подойти к основным ресурсам и будет смотреться как продолжение каркаса.

Сам код:

Код
<div class="mbar" id="menubar">  
<div class="mbar">  
<div class="mbar dpad">  
<div class="menubar">  
<ul id="topmenu" class="lcol reset">  
<li><a href="#"><b>1 Пункт меню</b></a></li>  
<li class="sublnk"><a href="#"><b>Скрипты для сайта</b></a>  
<ul class="menu_drop">  
  <li><a href="#"><b>Скрипты для ucoz</b></a></li>  
  <li><a href="#"><b>Скрипты для ucoz</b></a></li>  
  <li><a href="#"><b>Скрипты для ucoz</b></a></li>  
  <li><a href="#"><b>Скрипты для ucoz</b></a></li>  
  <li><a href="#"><b>Скрипты для ucoz</b></a></li>  
  <li><a href="#"><b>Скрипты для ucoz</b></a></li>  
  <li><a href="#"><b>Скрипты для ucoz</b></a></li>  
  <li><a href="#"><b>Скрипты для ucoz</b></a></li>  
  <li><a href="#"><b>Скрипты для ucoz</b></a></li>  
  <li><a href="#"><b>Скрипты для ucoz</b></a></li>  
  </ul>  
  </li>  
<li class="sublnk"><a href="#"><b>Шаблоны для сайта</b></a>  
<ul class="menu_drop">  
  <li><a href="#"><b>Шаблоны для ucoz</b></a></li>  
  <li><a href="#"><b>Шаблоны для ucoz</b></a></li>  
  <li><a href="#"><b>Шаблоны для ucoz</b></a></li>  
  <li><a href="#"><b>Шаблоны для ucoz</b></a></li>  
  </ul>  
  </li>  
<li><a href="#"><b>4 Пункт меню</b></a></li>  
<li><a href="#"><b>5 Пункт меню</b></a></li>  
</ul>  
<a class="thide hrss" href="#" title="Информер RSS">Информер RSS</a>  
<a href="http://zornet.ru/" style="display: none;"></a>  
</div>  
</div>  
</div>  
</div>


Стили в CSS:

Код
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }  

#menubar { margin-bottom: 12px; }  
.mbar { height: 52px; background: url("http://zornet.ru/CSS-ZORNET/gerav/Yor/mbar.png") no-repeat; }  
.mbar .mbar { background-position: 100% -52px; }  
.mbar .mbar .mbar { background-position: 0 -104px; background-repeat: repeat-x; }  
.menubar { height: 47px; background: #3f4b51 url("http://zornet.ru/CSS-ZORNET/gerav/Yor/mbar.jpg") no-repeat 100% 0; }  
.menubar ul { line-height: 26px; margin-top: 10px; text-transform: uppercase; }  
.menubar ul li, .menubar ul a, .menubar ul a b { height: 26px; float: left; }  
.menubar ul a { margin-right: 1px; color: #fff; background: url("http://zornet.ru/CSS-ZORNET/gerav/Yor/topmenu.png") no-repeat 0 -999px; }  
.menubar ul a b { cursor: pointer; padding: 0 10px; background: url("http://zornet.ru/CSS-ZORNET/gerav/Yor/topmenu.png") no-repeat 0 -999px; }  
.menubar ul a:hover { background-position: 0 0; }  
.menubar ul a:hover b { background-position: 100% -26px; }  
.menubar ul .sublnk a { background-position: 0 -104px; }  
.menubar ul .sublnk a b { padding-right: 25px; background-position: 100% -130px; }  
.menubar ul .sublnk a:hover, .menubar ul .sublnk.selected a { background-position: 0 -52px; }  
.menubar ul .sublnk a:hover b, .menubar ul .sublnk.selected a b { padding-right: 25px; background-position: 100% -78px;}  
.menubar ul .sublnk {position: relative;}  
.sublnk:hover .menu_drop {display: block;}  
.menubar ul li ul {width: 200px; margin: 0; top: 26px; left: 0; position: absolute; z-index: 9999; display: none;}  
.menubar ul li ul li a, .menubar ul li ul li, .menubar ul li ul li a b { background: none; float: none; height: auto; display: block; line-height: normal; text-transform: none; }  
.menubar ul li ul li { padding: 0; }  
.menubar ul li ul li a { color: #fff; padding: 6px 0; width: 100%; border-bottom: 1px solid #3f4b51; background: #4d5c64; opacity:0.9; -moz-opacity:0.9; filter:alpha(opacity=90);  
}  
.menubar ul li ul li a:hover { background-color: #63767f; }  
.dpad { margin: 0 15px; }  
.headlinks ul li a, .menubar ul a, .lmenu li a, #topmenu a, #popular ul li a, .navigation a, .argmore a, .addcombtn, .reply a { text-decoration: none !important; }  
p { margin-bottom: 0.4em; }  
.hrss { float: right; margin-top: 15px; padding-top: 18px; width: 18px; background: url("http://zornet.ru/CSS-ZORNET/gerav/Yor/rsshead.png") no-repeat; }  
.lcol { float: left; } .rcol { float: right; }  
.reset, .reset li { list-style: none; padding: 0; margin: 0; }  
a img { border: 0 none; }  
input, textarea, select, button, body { font: 12px/16px Arial, Helvetica, sans-serif; }  
ul { margin: 0 0 18px 2em; list-style: disc outside; }  
.thide, .htmenu span { overflow: hidden; display: block; height: 0; line-height: normal; }


К материалу есть DEMO

На этом все, установка у него не сложная, ставим скрипт с начало и потом стили.
02.04.2015 Просмотров: 463 Комментарий: (10)

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

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

Комментарий: 9
kredit-oformi
kredit-oformi 02.04.2015 07:341
0
аккуратное горизонтальное меню вполне неплохо впишется в какой-нибудь портал
Dimstrik
Dimstrik 02.04.2015 08:232
0
Мне вообще нравятся любые скрипты где нет картинок + в том что можно кардинально переделывать под себя!
Kosten
Kosten 02.04.2015 11:493
0
Это меню появилась, думаю в тот момент, когда только хотели создать систему ucoz.
Dimstrik
Dimstrik 02.04.2015 11:554
0
Цитата
Старое меню и как понимаю не имеет к ucoz не кого го отношение, чистая адаптация.


Я не знаю как к вам обратится, так как не видно не ника не имени но скажу так!
Вы знаете что такое адаптация или нет?

К адаптацию можно отнести только шаблоны и то только изо различия между переменных кодов в дизайне допустим ucoz между dle/
А как правило скрипты такие как меню, вид материалов, слайдеры и так далее не относятся к отдельно стоящим система и конструкторов сайтов так как различие в CSS стилях только адреса к картинкам .

Вот пример стиля на ucoz
Код
#overlay {
background: url(/img/header/head40.png) center 0 no-repeat;
}


А вот пример стиля если он в HTML вёрстки
Код
#overlay {
background: url(img/header/head40.png) center 0 no-repeat;
}


Можно заметить что разницы не какой разве только в стоящей палочки перед img и тем самым если убрать с ucoz стиля её то стиль получается уже можно ставить в HTML вёрстку и так же наоборот.
Так покажите мне где это адаптация ?
Kosten
Kosten 02.04.2015 12:215
0
Dimstrik, я лично, когда начал работать на ucoz, а это было давно, первый скрипт, это меню увидел.
First
First 02.04.2015 12:366
0
Dimstrik, ты прав только в том что это не адаптация. А так в dle помимо переменных есть что адаптировать. Это сейчас всё делают на один лад. Но даже если взять к примеру хинт с юкоз и дели, так там уже нужна адаптация и не только в css.
Пусть человек по радуется написанным, а мы здесь для того, чтоб обменятся опытом, каждую мелочь не упомнишь и всё знать не можешь, вот мы и помогаем друг другу, и на этом и растем. Я к примеру не считаю себя сильно понимающим, но с вашей помощью и с моим интересом каждый раз узнаю что то новое. Пусть маленький код, на какого я раньше даже и внимания не обращал, но всё же, это навык, и мне приятно то что есть такие сайты где можно что то взять для себя и своими знаниями поделится с кем то.
Kosten
Kosten 02.04.2015 12:417
0
First, без комментарий, дополнить нечего сказанному.
Kosten
Kosten 02.04.2015 12:448
0
Надо еще сказать, что это меню, должно стоять впритык к дизайну, так как имеются углы вверху.
Dimstrik
Dimstrik 02.04.2015 15:259
0
First, Согласен я тоже не считаю себя асом просто понравилось ковырять по немногу разные скрипты !
И интересно поделится тем что получилось
avatar