| 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)
---------------------------------------------
ааа...  Я только увидел. Это одно меню 
|
| |
| |
| artanik | Дата: Среда, 12.01.2011, 16:13 | Сообщение # 3 |
Рядовой
Сообщений: 2
Награды: 0
Репутация: 0
Статус: Offline
| Ну что же объясню 
Надеюсь ты знаешь что такое 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="тот самый айди"> и вставляешь тот же айди что и придумал раньше, надеюсь понял 
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;
}
думаю ты и сам в силах поправить стили, там легко
|
| |
| |
