программисты, которые фанатики jQuery - какие-то извращенцы. =)
Есть задача: создать раскрывающееся меню, чтобы элементы этого меню можно было добавлять и изменять динамически. Что значит динамически? прямо на сайте? т.е. на уже сформировавшемся меню? Что-то типа drag&drop?
Вариант, конечно. А если имеется ввиду что подразумевается какая-то админка, через которую можно создавать и всячески редактировать меню, то могу сказать что jQuery тут вообще не при чем, и даже докажу это готовым примером =)
Я не говорю что мой вариант самый идеальный, но я бы сделал так:
Таблица в базе данных MENU
id,name,link,parent,position
Есть запрос к таблице
SELECT * FROM Menu ORDER BY parent,position
в результате я получаю массив
Array
(
[1] => Array
(
[id] => 1
[name] => Пункт 1
[link] => #
[parent] => 0
[position] => 1
)
[2] => Array
(
[id] => 1
[name] => Пункт 2
[link] => #
[parent] => 0
[position] => 2
)
[3] => Array
(
[id] => 1
[name] => Пункт 2.1
[link] => ?go=2.1
[parent] => 2
[position] => 1
)
[4] => Array
(
[id] => 1
[name] => Пункт 2.2
[link] => ?go=2.2
[parent] => 2
[position] => 2
)
)
а дальше берём и делаем вот так
#nav {border:3px solid #3e4547;box-shadow:2px 2px 8px #000000;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}
#nav, #nav ul {list-style:none;padding:0;width:200px;}
#nav ul {position:relative;z-index:-1;}
#nav li {position:relative;z-index:100;}
#nav ul li {margin-top:-23px;-moz-transition: 0.4s linear 0.4s;-ms-transition: 0.4s linear 0.4s;-o-transition: 0.4s linear 0.4s;-webkit-transition: 0.4s linear 0.4s;transition: 0.4s linear 0.4s;}
#nav li a {background-color:#d4d5d8;color:#000;display:block;font-size:12px;font-weight:bold;line-height:28px;outline:0;padding-left:15px;text-decoration:none;}
#nav li a.sub {background:#d4d5d8 url("../images/down.gif") no-repeat;}
#nav li a + img {cursor:pointer;display:none;height:28px;left:0;position:absolute;top:0;width:200px;}
#nav li a img {border-width:0px;height:24px;line-height:28px;margin-right:8px;vertical-align:middle;width:24px;}
#nav li a:hover {background-color:#bcbdc1;}
#nav ul li a {background-color:#eee;border-bottom:1px solid #ccc;color:#000;font-size:11px;line-height:22px;}
#nav ul li a:hover {background-color:#ddd;color:#444;}
#nav ul li a img {background: url("../images/bulb.png") no-repeat;border-width:0px;height:16px;line-height:22px;margin-right:5px;vertical-align:middle;width:16px;}
#nav ul li:nth-child(odd) a img {background:url("../images/bulb2.png") no-repeat;}
#nav a.sub:focus {background:#bcbdc1;outline:0;}
#nav a:focus ~ ul li {margin-top:0;-moz-transition: 0.4s linear;-ms-transition: 0.4s linear;-o-transition: 0.4s linears;-webkit-transition: 0.4s linears;transition: 0.4s linear;}
#nav a:focus + img, #nav a:active + img {display:block;}
#nav a.sub:active {background:#bcbdc1;outline:0;}
#nav a:active ~ ul li {margin-top:0;}
#nav ul:hover {display:block;}а в любой файл шаблона, например
<ul id="nav">
<?php for($i=1;$i<=count($menu);$i++)
{
if($menu[$i]['parent']=='0')
{echo "\n\r<li><a href=\"".$menu[$i]['link']."\">".$menu[$i]['name'];
echo "<ul>";
for($k=0;$k<=count($menu);$k++)
{
if($menu[$k]['parent']==$i)
{echo "\n\r<li><a href=\"".$menu[$k]['link']."\">".$menu[$k]['name']."</li>";}
}
echo "</ul>";
echo "</li>";
}
}
</ul>
в результате получим
Пункт 1
Пункт 2
Пункт 2.1
Пункт 2.2
Теперь разберем подробнее
в таблице у нас имеются поля
id - уникальный идентификатор пункта меню
name - имя ссылки для этого пункта
link - адрес ссылки для пункта
parent - уникальный идентификатор родительского пункта, если родителя нет, тогда 0
position - порядковый номер пункта внутри общего родителя
Можно ещё добавить поле visibility типа bool и ставить там 1 для всех пунктов которые нужно показывать и 0 для тех которые не нужно показывать (конечно учесть это в запросе)
или добавить поле access и показывать какие-то пункты только определенным пользователям, вариаций куча.
И если нам нужно поменять порядок пунктов внутри одного родителя, мы просто меняем их position
А если нужно пункт передвинуть в другого родителя то меняем parent
А если нужно поменять очередность самих родителей, то меняем у них position.
Очень управляемое меню. Я сам что-то подобное частенько использую.
P.S. этот код писался прямо тут, и учитывая что у меня сейчас 4 утра, ни разу не гарантирую что он будет работать, но по логике должен, можете проверить
_____________
программирование - инструмент для решения конкретных задач, любая попытка спроектировать что-то универсальное приведет к провалу.©paul85В любом случае тебе прийдётся пройти путь изобретения велосипеда, который прошли другие, только причиной твоего изобретения будет непонимание принципов работы велосипеда изобретённого другими людьми.©SlavaFr
jQuery это попытка использовать АН-225 для перевозки зубочистки
