Фиксированное меню для uCoz по разделам - Меню - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Меню


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

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

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

HTML + javascript

Код меню следует ставить в нижнюю часть сайта или в верхнюю для того что бы меню отображалось на всех страницах сайта которые существуют на нём.
Code
<ul id="navigation">  
  <li class="home"><a href="http://kamorka.ucoz.com/" 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>

Стили сайта вам нужно дописать в существующие стили вашего сайта в самый низ и сохранить
Code
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 в файловый менеджер вашего сайта для того что бы в меню появились картинки.

Важно!

При копировании материала указывать ссылку на источник.

- 364
- 09-Декабря-2016
- 0
- 0
Материал разместил:

Похожий материал
Статьи сайта