Назначение отдельных ID и/или class для пунктов меню (ul и li)

Назначение отдельных ID и/или class для пунктов меню (ul и li)

Прислано: newpiero

чт, 07/07/2011 - 08:39

Другие статьи по теме:

Просмотрел с помощью поиска весь сайт и весь рунет в поисках решения, но не смог найти.

Подскажите решение такого вопроса (или как это по другому сделать): как назначить свой ID (или свой class) разным пунктам меню?
Конкретно для каждого ul или li, для того чтобы получилось многоуровневое горизонтальное выпадающее меню, вот примерный код:

<ul id="nav">
                <li><a href="#nogo1">Сотовые телефоны</a></li>
                <li><a href="#nogo2">Фотоаппараты</a>
                    <ul class="sub">
                        <li><a href="#nogo3">Cameras</a>
                                <ul>
                                    <li><a href="#nogo4">Nikon</a></li>
                                    <li><a href="#nogo5">Minolta</a></li>
                                    <li><a href="#nogo6">Pentax</a></li>
                                </ul>
                        </li>
                        <li class="mid"><a href="#nogo7" class="fly">Lenses</a>
                                <ul>
                                    <li><a href="#nogo8">Wide Angle</a></li>
                                    <li><a href="#nogo9">Standard</a></li>
                                    <li><a href="#nogo10">Telephoto</a></li>
                                    <li><a href="#nogo11" class="fly">Zoom</a>
                                        <ul>
                                            <li><a href="#nogo12">35mm to 125mm</a></li>
                                            <li><a href="#nogo13">50mm to 250mm</a></li>
                                            <li><a href="#nogo14">125mm to 500mm</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#nogo15">Mirror</a></li>
                                    <li><a href="#nogo16" class="fly">Non standard</a>
                                        <ul>
                                            <li><a href="#nogo17">Bayonet mount</a></li>
                                            <li><a href="#nogo18">Screw mount</a></li>
                                        </ul>
                                    </li>
                                </ul>
                        </li>
                    </ul>
                </li>
             </ul>

newpiero's blog
Для комментирования войдите или зарегистрируйтесь

Настройки просмотра комментариев

Выберите нужный метод показа комментариев и нажмите "Применить"

Опубликовано Punk_UnDeaD в чт, 07/07/2011 - 08:51.

menu_attributes в помощь
но он может только ссылкам проставлять, а не li
совместите с селекторами a+ul и другим, может покроете

я нередко нагло нумерую жаваскриптом

Для комментирования войдите или зарегистрируйтесь

Опубликовано newpiero в чт, 07/07/2011 - 08:58.

"Punk_UnDeaD" написал(а):

menu_attributes в помощь

его в первую очередь поставил, но он действительно только по ссылкам.в

Для комментирования войдите или зарегистрируйтесь

Опубликовано Punk_UnDeaD в чт, 07/07/2011 - 09:18.

"newpiero" написал(а):

его в первую очередь поставил, но он действительно только по ссылкам.в

псевдоселектора :has ещё не изобрели, увы

http://api.jquery.com/has-selector/

Для комментирования войдите или зарегистрируйтесь

Опубликовано newpiero в чт, 07/07/2011 - 09:37.

"Punk_UnDeaD" написал(а):

я нередко нагло нумерую жаваскриптом

Я не силен в жаваскриптах. Подскажите как пронумеровать?

Для комментирования войдите или зарегистрируйтесь

Опубликовано Dan в чт, 07/07/2011 - 09:43.

В файл template.php:

/**
 * Implementation of theme_menu_item_link()
 */
function НАЗВАНИЕТЕМЫ_menu_item_link($link) {
  if (empty($link['localized_options'])) {
    $link['localized_options'] = array();
  }
  $link['localized_options']['attributes']['class'] .= ' menu-' . $link['mlid'];
  return l($link['title'], $link['href'], $link['localized_options']);
}
 
/**
 * Implementation of theme_menu_item()
 */
function НАЗВАНИЕТЕМЫ_menu_item($link, $has_children, $menu = '', $in_active_trail = FALSE, $extra_class = NULL) {
  $class = ($menu ? 'expanded' : ($has_children ? 'collapsed' : 'leaf'));
  $matches = array();
  $class .= preg_match('(menu-\d+)', $link, $matches)? ' '.$matches[0] : '';
 
  if (!empty($extra_class)) {
     $class .= ' ' . $extra_class;
  }
  if ($in_active_trail) {
     $class .= ' active-trail';
  }
  return '<li class="' . $class . '">' . $link . $menu . "</li>\n";
}

Не забываем про чистку кэша.

Для комментирования войдите или зарегистрируйтесь

Опубликовано newpiero в чт, 07/07/2011 - 10:25.

"Dan" написал(а):

В файл template.php:
/**
* Implementation of theme_menu_item_link()
*/
function НАЗВАНИЕТЕМЫ_menu_item_link($link) {
if (empty($link['localized_options'])) {
$link['localized_options'] = array();
}
$link['localized_options']['attributes']['class'] .= ' menu-' . $link['mlid'];
return l($link['title'], $link['href'], $link['localized_options']);
}

/**
* Implementation of theme_menu_item()
*/
function НАЗВАНИЕТЕМЫ_menu_item($link, $has_children, $menu = '', $in_active_trail = FALSE, $extra_class = NULL) {
$class = ($menu ? 'expanded' : ($has_children ? 'collapsed' : 'leaf'));
$matches = array();
$class .= preg_match('(menu-\d+)', $link, $matches)? ' '.$matches[0] : '';

if (!empty($extra_class)) {
$class .= ' ' . $extra_class;
}
if ($in_active_trail) {
$class .= ' active-trail';
}
return '

' . $link . $menu . "

\n";
}

Не забываем про чистку кэша.

Спасибо! Классы у li действительно стали уникальные, а вот у ul остались все такие же. Как сделать и их уникальными?

Для комментирования войдите или зарегистрируйтесь

Опубликовано Punk_UnDeaD в чт, 07/07/2011 - 10:45.

"newpiero" написал(а):

Я не силен в жаваскриптах. Подскажите как пронумеровать?

	$('ul.menu').each(function(){$(this).children("li").each(function(i){$(this).addClass("element-"+i);});});

Для комментирования войдите или зарегистрируйтесь

Опубликовано Dan в чт, 07/07/2011 - 11:15.

"newpiero" написал(а):

А зачем? Для привязки в CSS достаточно li.menu-123 > ul
Или в theme('links') можно указать нужные классы.

Для комментирования войдите или зарегистрируйтесь

Опубликовано newpiero в чт, 07/07/2011 - 11:16.

"Dan" написал(а):

А зачем? Для привязки в CSS достаточно li.menu-123 > ul

Точно, спасибо еще раз. Совсем заработался видимо, таких элементарных вещей не вижу.

Для комментирования войдите или зарегистрируйтесь

Опубликовано xakudu в пн, 28/11/2011 - 22:48.

"Dan" написал(а):

А зачем? Для привязки в CSS достаточно li.menu-123 > ul
Или в theme('links') можно указать нужные классы.

А если все же нужны классы? А точнее даже больше - нужно в зависимости от уровня меню или от его номера выводить то через ul li , то через DIV - то тогда как быть?

Для комментирования войдите или зарегистрируйтесь

Опубликовано Dan в вт, 29/11/2011 - 08:53.

"xakudu" написал(а):

Если нужны классы, то я уже привёл решение, а попеременное оборачивание в разные блоки это или нехватка знаний по CSS, либо по JS :)
Но по-любому это делается темизацией, по типу того, что привёл я.

Для комментирования войдите или зарегистрируйтесь

Опубликовано xakudu в вт, 29/11/2011 - 15:29.

"Dan" написал(а):

Дело не в этом. У меня есть верстка. Верхний уровень DIV, вторые уровни списки UL LI - выпадающее меню. Мне не охота вручную CSS прописывать и заново создавать, а охота проверить какой уровень и подставить UL LI где надо.