Новое таб меню для uCoz


Новое таб меню для uCoz

1545
4.4 из 10
Проголосовало: 5




  • Скачать с сервера
  • Скачать
  • Смотреть демо


В настоящее время. многие сайты используют такой вид таб меню, особенно на WordPress, для экономии места на сайте. Я видел много сайтов использующих данный переключатель для того, чтобы на сайте было больше места , вставляя туда, например: меню, последние комментарии, случайные статьи и тд. Это хороший способ экономии пространства сайта, если использовать его правильно, то можно значительно увеличить рабочую область сайта.

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

Code
<div class="box">  
   
  <ul id="tabMenu">  
  <li class="posts selected"></li>  
  <li class="comments"></li>  
  <li class="category"></li>  
  <li class="famous"></li>  
  <li class="random"></li>  
  </ul>  
   
  <div class="boxTop"></div>  
   
  <div class="boxBody">  
   
  <div id="posts" class="show parent">  
  <ul>  
  <li>Post 1</li>  
  <li>Post 2</li>  
  <li class="last">Post 3</li>  
  </ul>  
  </div>  
   
  <div id="comments" class="parent">  
  <ul>  
  <li>Comment 1</li>  
  <li>Comment 2</li>  
  <li class="last">Comment 3</li>  
  </ul>  
  </div>  
   
  <div id="category" class="parent">  
  <ul>  
  <li>Category 1</li>  
  <li>Category 2</li>  
  <li class="last">Category 3</li>  
  </ul>  
  </div>  
   
  <div id="famous" class="parent">  
  <ul>  
  <li>Famous post 1</li>  
  <li>Famous post 2</li>  
  <li class="last">Famous post 3</li>  
  </ul>  
  </div>  
   
  <div id="random" class="parent">  
  <ul>  
  <li>Random post 1</li>  
  <li>Random post 2</li>  
  <li class="last">Random post 3</li>  
  </ul>  
  </div>  
   
  </div>  
   
  <div class="boxBottom"></div>  
   
  </div>


CSS:

Code
<style>  
   
  a {  
  color:#ccc;  
  text-decoration:none;  
  }  
   
  a:hover {  
  color:#ccc;  
  text-decoration:none  
  }  
   
  #tabMenu {  
  margin:0;  
  padding:0 0 0 15px;  
  list-style:none;  
  }  
   
  #tabMenu li {  
  float:left;  
  height:32px;  
  width:39px;  
  cursor:pointer;  
  cursor:hand  
  }  
   
  /* this is the button images */  
  li.comments {background:url(images/tabComment.gif) no-repeat 0 -32px;}  
  li.posts {background:url(images/tabStar.gif) no-repeat 0 -32px;}  
  li.category {background:url(images/tabFolder.gif) no-repeat 0 -32px;}  
  li.famous {background:url(images/tabHeart.gif) no-repeat 0 -32px;}  
  li.random {background:url(images/tabRandom.gif) no-repeat 0 -32px;}  
   
  li.mouseover {background-position:0 0;}  
  li.mouseout {background-position:0 -32px;}  
  li.selected {background-position:0 0;}  
   
  .box {  
  width:227px  
  }  
   
  .boxTop {  
  background:url(images/boxTop.gif)no-repeat;  
  height:11px;  
  clear:both  
  }  
   
  .boxBody {  
  background-color:#282828;  
  }  
   
  .boxBottom {  
  background:url(images/boxBottom.gif) no-repeat;  
  height:11px;  
  }  
   
  .boxBody div.parent {  
  display:none;  
  }  
   
  .boxBody div.show {  
  display:block;  
  }  
   
   
  .boxBody #category a {  
  display:block  
  }  
   
  /* styling for the content*/  
  .boxBody div ul {  
  margin:0 10px 0 25px;  
  padding:0;  
  width:190px;  
  list-style-image:url(images/arrow.gif)  
  }  
   
  .boxBody div li {  
  border-bottom:1px dotted #8e8e8e;  
  padding:4px 0;  
  cursor:hand;  
  cursor:pointer  
  }  
   
  .boxBody div ul li.last {  
  border-bottom:none  
  }  
   
  .boxBody div li span {  
  font-size:8px;  
  font-style:italic;  
  color:#888;  
  }  
   
  /* IE Hacks */  
  *html .boxTop {margin-bottom:-2px;}  
  *html .boxBody div ul {margin-left:10px;padding-left:15px;}  
   
  </style>


Javascript:

Code
<script type="text/javascript" src="/js/jquery-1.3.1.min.js"></script>  
  <script type="text/javascript">  
   
  $(document).ready(function() {  
   
  //Get all the LI from the #tabMenu UL  
  $('#tabMenu li').click(function(){  
   
  //perform the actions when it's not selected  
  if (!$(this).hasClass('selected')) {  
   
  //remove the selected class from all LI  
  $('#tabMenu li').removeClass('selected');  
   
  //Reassign the LI  
  $(this).addClass('selected');  
   
  //Hide all the DIV in .boxBody  
  $('.boxBody div.parent').slideUp('1500');  
   
  //Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.  
  $('.boxBody div.parent:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');  
   
  }  
  }).mouseover(function() {  
   
  //Add and remove class, Personally I dont think this is the right way to do it,  
  //if you have better ideas to toggle it, please comment  
  $(this).addClass('mouseover');  
  $(this).removeClass('mouseout');  
   
  }).mouseout(function() {  
   
  //Add and remove class  
  $(this).addClass('mouseout');  
  $(this).removeClass('mouseover');  
   
  });  
   
   
  //Mouseover with animate Effect for Category menu list <img src="http://s51.ucoz.net/sm/1/smile.gif" border="0" align="absmiddle" alt="smile" />  
  $('.boxBody #category li').mouseover(function() {  
   
  //Change background color and animate the padding  
  $(this).css('backgroundColor','#888');  
  $(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});  
  }).mouseout(function() {  
   
  //Change background color and animate the padding  
  $(this).css('backgroundColor','');  
  $(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});  
  });  
   
  //Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.  
  $('.boxBody li').click(function(){  
  window.location = $(this).find("a").attr("href");  
  }).mouseover(function() {  
  $(this).css('backgroundColor','#888');  
  }).mouseout(function() {  
  $(this).css('backgroundColor','');  
  });  
   
  });  
   
  </script>


Из прикрепленного архива заливаем все файлы в соответствующие папки js, images.
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
  • Всего комментариев: 1

Froa
+2
Froa написал: Написано 07 Марта 2012 в 14:48
Комментарий №1
старое.....

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    205
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 10
    Гостей: 10
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: