» »

Функциональное меню для сайта ucoz


По функциям очень понятное и по дизайну приятное темное горизонтальное меню для сайта который стоит на системе ucoz. На нем есть вход пользователя на сайт и очень красиво выполнено. Так же можно заметить что есть и поиск. Я вот думаю его можно даже сделать не по верх шапки а как навигацию по низ шапки и должно смотреться шикарно. Но это я так думаю, вы можете что то для него свое придумать, или стандартно поставить как основном такие типа меню ставят.
Переходим к установке:
Меню идет одним кодом, и ставит его где захотите или ставим верхнею часть сайта:
Код
<link rel="stylesheet" href="http://zornet.ru/CSS-ZORNET/ZR/layout.css" />
<link rel="stylesheet" href="http://zornet.ru/CSS-ZORNET/ZR/menus.css" />
<style>body { min-width: 980px; }
.wrapper { width: 980px; }
#sidebar-a { width: 245px; }
#maininner { width: 735px; }
#menu .dropdown { width: 250px; }
#menu .columns2 { width: 500px; }
#menu .columns3 { width: 750px; }
#menu .columns4 { width: 1000px; }</style>

</head>

<body id="page" class="page sidebar-a-right sidebar-b-right noblog ">

  <div id="page-bg">
   
  <div id="page-bg2">
  <div class="wrapper grid-block"><header id="header">
  <div id="menubar" class="grid-block">
   
  <nav id="menu"><ul class="menu menu-dropdown"><li class="level1 item1 parent active current">

<a href="http://zornet.ru/" class="level1 parent active current"><span>Главная</span></a><div class="dropdown columns1"><div class="dropdown-bg"><div><div class="width100 column"><ul class="level2">

<li class="level2 item44"><a href="http://zornet.ru/" class="level2"><span>компоненты</span></a></li></ul></div></div></div></div></li>

<li class="level1 item3 parent"><a href="http://zornet.ru/" class="level1 parent"><span>модули</span></a><div class="dropdown columns2" style="width:560px;"><div class="dropdown-bg"><div><div class="width50 column"><ul class="level2">

<li class="level2 item38"><a href="http://zornet.ru/" class="level2"><span><span class="icon"> </span>файлы</span></a></li><li class="level2 item37"><a href="http://zornet.ru" class="level2"><span><span class="icon"> </span>новости</span></a></li>

<li class="level2 item39"><a href="http://zornet.ru/" class="level2"><span><span class="icon"> </span>плагины</span></a></li><li class="level2 item40"><a href="http://zornet.ru/" class="level2"><span><span class="icon"> </span>новое</span></a></li>
   

</ul>
  </div><div class="width50 column"><ul class="level2">
  <li class="level2 item42"><a href="http://zornet.ru" class="level2"><span><span class="icon"> </span>популярное</span></a></li>
  <li class="level2 item43"><a href="http://zornet.ru/" class="level2"><span><span class="icon"> </span>О нас</span></a></li>

<li class="level2 item10"><a href="http://zornet.ru/" class="level2"><span><span class="icon" > </span>для новичков</span></a></li>

<li class="level2 item11"><a href="http://zornet.ru/" class="level2"><span><span class="icon"> </span>для профи</span></a></li></ul>
   

</div></div></div></div></li>
   
  <li class="level1 item30"><a href="http://zornet.ru/" class="level1"><span>Скачать</span></a></li>
  <li class="level1 item27 parent"><a href="http://zornet.ru/" class="separator level1 parent"><span>потдержка</span></span></li>
  <li class="level1 item29"><a href="http://zornet.ru/" class="level1"><span>контакты</span></a></li></ul>
<ul class="menu menu-dropdown">
  <li class="level1 parent">
  <span class="level1 parent">
  <span>вход</span>
  </span>
  <div class="dropdown columns1" >
  <div class="dropdown-bg">
  <div>
  <div class="module">

  <div class="username">
  $LOGIN_FORM$
  </div>
  </form>
   
  <script>
  jQuery(function($){
  $('form.short input[placeholder]').placeholder();
  });
  </script>
   
</div>
  </div>
  </div>
  </div>
  </li>
</ul>
</nav>
   
  <div id="search">
<form action="/search/" style="margin: 0pt;" method="get" onsubmit="this.sfSbm.disabled=true">  
<div><div>
  <input name="q" value="Поиск по сайту..." onblur="if(this.value=='') this.value='Поиск по сайту...';" onfocus="if(this.value=='Поиск по сайту...') this.value='';" type="text">
  </div></div>
   
  </form>

</div>
   
  </div>
16.08.2013 Просмотров: 1444 Комментарий: (2)

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

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

Комментарий: 2
๖ۣۜInspire
๖ۣۜInspire 16.08.2013 10:131
0
кривовато всё
Kosten
Kosten 16.08.2013 13:012
0
Supermenыч, так поправь senile
avatar