» »

Фиксированное меню для uCoz по разделам


Фиксированное меню для uCoz по разделам

Все мы привыкли, если горизонтальное меню, значит под шапкой или по верх ее, а вот здесь Фиксированное меню для uCoz по разделам под левую сторону вашего ресурса. Будет только видны разделы и при наведение на них они выезжают и можно делать клик и переходить. Светлоим дизайне сделано, даже немного серого добавлено в дизайн и сами кнопки отчетливо видно.

Рад выложить вам интересное меню а точнее сказать удобное меню работает на jQuery. При наведение курсора на меню будет выезжать вся область пункта меню а после того как курсор уберёте оно плавно спрячется. Данное меню очень удобное тем что оно стоит на месте при скорлинге в низ странице и не куда не скрывается что даёт только плюс навигации на сайте. Установка тоже проста и много не занимает + вы сможете изменять картинки на свои .

Установка: Вертикальное фиксированное jQuery меню

HTML + javascript

Код меню следует ставить в нижнюю часть сайта или в верхнюю для того что бы меню отображалось на всех страницах сайта которые существуют на нём.

Код
<ul id="navigation">  
  <li class="home"><a href="http://zornet.ru/" title="Home"></a></li>  
  <li class="about"><a href="" title="About"></a></li>  
  <li class="search"><a href="" title="Search"></a></li>  
  <li class="photos"><a href="" title="Photos"></a></li>  
  <li class="rssfeed"><a href="" title="Rss Feed"></a></li>  
  <li class="podcasts"><a href="" title="Podcasts"></a></li>  
  <li class="contact"><a href="" title="Contact"></a></li>  
  </ul>  
  <script type="text/javascript">  
  $(function() {  
  $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);  

  $('#navigation > li').hover(  
  function () {  
  $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);  
  },  
  function () {  
  $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);  
  }  
  );  
  });  
  </script>


Стили сайта вам нужно дописать в существующие стили вашего сайта в самый низ и сохранить

Код
ul#navigation {  
  position: fixed;  
  margin: 0px;  
  padding: 0px;  
  top: 10px;  
  left: 0px;  
  list-style: none;  
  z-index:9999;  
}  
ul#navigation li {  
  width: 100px;  
}  
ul#navigation li a {  
  display: block;  
  margin-left: -2px;  
  width: 100px;  
  height: 70px;  
  background-color:#CFCFCF;  
  background-repeat:no-repeat;  
  background-position:center center;  
  border:1px solid #AFAFAF;  
  -moz-border-radius:0px 10px 10px 0px;  
  -webkit-border-bottom-right-radius: 10px;  
  -webkit-border-top-right-radius: 10px;  
  -khtml-border-bottom-right-radius: 10px;  
  -khtml-border-top-right-radius: 10px;  
  /*-moz-box-shadow: 0px 4px 3px #000;  
  -webkit-box-shadow: 0px 4px 3px #000;  
  */  
  opacity: 0.6;  
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);  
}  
ul#navigation .home a{  
  background-image: url(../images/home.png);  
}  
ul#navigation .about a {  
  background-image: url(../images/id_card.png);  
}  
ul#navigation .search a {  
  background-image: url(../images/search.png);  
}  
ul#navigation .podcasts a {  
  background-image: url(../images/ipod.png);  
}  
ul#navigation .rssfeed a {  
  background-image: url(../images/rss.png);  
}  
ul#navigation .photos a {  
  background-image: url(../images/camera.png);  
}  
ul#navigation .contact a {  
  background-image: url(../images/mail.png);  
}


Вот и всё меню установлено, вам остаётся только скачать архив и загрузить папку images в файловый менеджер вашего сайта для того что бы в меню появились картинки.
28.09.2015 Загрузок: 3 Просмотров: 715 Комментарий: (2)

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

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

Комментарий: 2
FeStemBer
FeStemBer 28.09.2015 05:021
0
Все хорошо, и само меню отлично вписывается, только одно, не видишь что открываешь. Здесь явный минус, если понимаешь, что первый контейнер будет являться главной страницей, то другие не известны.
Kosten
Kosten 28.09.2015 05:072
0
Но если места не будет, здесь уже не до кнопок, а нужно будет выводить информацию. Да и вообще, можно вместо горизонтального поставить и смотреться в оригинале не как у всех будет.
avatar