[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Модератор форума: remus, Sazon4ik, Vladsterus  
HELP!!!!!People)))
ronaldoДата: Пятница, 19.11.2010, 07:54 | Сообщение # 1
Рядовой
Сообщений: 1
Награды: 0
Репутация: 0
Статус: Offline
Всем привет!!! Помагите пожалуйста сделать Такое меню,
НУ ИЛИ РИПНУТЬ))))))))
Заранее благодарен


Сообщение отредактировал ronaldo - Пятница, 19.11.2010, 07:55
 
NikitOKДата: Четверг, 16.12.2010, 19:48 | Сообщение # 2
Рядовой
Сообщений: 7
Награды: 0
Репутация: 0
Статус: Offline
А какое именно меню? То что верхнее или то что чуть ниже?

Добавлено (16.12.2010, 19:48)
---------------------------------------------
ааа... biggrin Я только увидел. Это одно меню lol

 
artanikДата: Среда, 12.01.2011, 16:13 | Сообщение # 3
Рядовой
Сообщений: 2
Награды: 0
Репутация: 0
Статус: Offline
Ну что же объясню cool
Надеюсь ты знаешь что такое Jquery, так как это меню написано с помощью этого фреймворка.
Вообщем качаешь и подключаешь к сайту или можешь пользоваться google
Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

или ms
Code

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>

далее создай ещё один файлик, назви типа menu.js и вставь
Code

$(document).ready(function() {
function menu(tab) {
  var tab = tab;
  if(!($("div#menu ul li#"+tab).hasClass('active'))) {
   $("div#menu ul li").removeClass();
   $("div#menu ul li#"+tab).addClass('active');
   $("div#tabs ul").slideUp("normal");
   $("div#tabs ul#tab_"+tab+":hidden").slideDown("normal");
  }
  return false;
}
}

с javascript мы разобрались, теперь html
Code

<div id="menu">
  <ul>
   <li onclick="menu('menu1');" id="menu1" class="active"><a href="javascript:void(null);"><span class="m1"></span><b><span class="m2">Пункт 1</span><span class="m3"></span></b></a></li>
   <li onclick="menu('menu2');" id="menu2"><b><a href="javascript:void(null);"><span class="m1"></span><span class="m2">Пункт 2</span><span class="m3"></span></a></b></li>
  </ul>
</div>
<div id="tabs">

<ul id="tab_menu1" style="display: block;">
<li><a href="http://rmadrid.net.ru">Все новости</a></li><li><a href="http://rmadrid.net.ru/news/la_liga/1-0-6">Ла Лига</a></li><li><a href="http://rmadrid.net.ru/news/liga_chempionov/1-0-1">Лига Чемпионов</a></li><li><a href="http://rmadrid.net.ru/news/kubok_korolja/1-0-3">Кубок Короля</a></li><li><a href="http://rmadrid.net.ru/news/sbornaja/1-0-2">Сборная</a></li><li><a href="http://rmadrid.net.ru/news/intervju/1-0-9">Интервью</a></li><li><a href="http://rmadrid.net.ru/news/transfery/1-0-4">Трансферы</a></li><li><a href="http://rmadrid.net.ru/news/kantera/1-0-10">Кантера</a></li><li><a href="http://rmadrid.net.ru/news/raznoe/1-0-11">Разное</a></li>
</ul>

  <ul id="tab_menu2">
  <li><a href="http://rmadrid.net.ru/index/0-11">Информация</a></li><li><a href="http://rmadrid.net.ru/index/0-5">Состав</a></li><li><a href="http://rmadrid.net.ru/index/0-8">Трансферы</a></li> </ul>

</div>

Как видишь ничё сложного, просто первый блок меню, с событием клика и функцией menu('id');
короче будешь создавать ещё пункты, просто пишешь ещё один li в первом блоке и придумай id вписав в ту функцию onclick="menu('твой айди');" , в следующем пишешь новый <ul id="тот самый айди"> и вставляешь тот же айди что и придумал раньше, надеюсь понял wackol
CSS
Создай ксс и подключи к сайту, вписав в него
Code

#menu {
  width:900px;
  height:35px;
  padding-top:8px;
  background:url(http://rmadrid.net.ru/menuRM1.png);
}
#menu li {
  float:left;
  height:8px;
  padding:0px 8px 10px 8px;
  font-size:10px;
  background:url(http://rmadrid.net.ru/spacer1.jpg) right center no-repeat;
}
#menu li.active {
  background:;
}
#menu a {
  color:#FFF;
  float:left;
  height:35px;
}
#menu a span {
  float:left;
  height:35px;
}
#menu a .m1, #menu a .m3 {
  width:5px;
}

#tabs {
  position:absolute;
  top:35px;
  width:880px;
  height:20px;
  left:0;
  margin: 0 auto;
  background:url(http://rmadrid.net.ru/menuRM2.png);
  padding:7px 0 0 20px;
}
#tabs ul {
  display:none;
}
#tabs ul li {
  height:auto;
  padding:0 0 0 10px;
  font-size:10px;
  margin-left:20px;
  display:inline;
  background: url() 0px 0px no-repeat;
}

думаю ты и сам в силах поправить стили, там легко
 
  • Страница 1 из 1
  • 1
Поиск: