Ликбез по созданию и расширению меню / Верстка / Русский клуб Joomla

Ликбез по созданию и расширению меню

al-teen
Верстка
09.10.2012 02:50

1) Создание меню.

Создаем меню через менеджер меню в панели администратора ( Крестик «Создать», заполняем все поля, «Сохранить»).
Выбираем в списке созданное меню, жмем «Создать», из списка выбираем нужный пункт, пишем заголовок, псевдоним, сохраняем.
Создаем еще несколько пунктов.

В панели администратора заходим в менеджер модулей ( Расширения => модули ), над списком модулей находим кнопку «Новый» ( Крестик ). На открывшейся странице находим пункт «Меню», жмем на него. Слева в верхней строчке пишем название модуля, оно же будет заголовком, выводящимся на странице. Варианты включить и выключить для отображения заголовка ( показать или скрыть его на странице сайта ), включить или отключить модуль. Выбыраем из списка позицию шаблона, в которой будет выведено меню (например «top» или «left»). Ниже: выбор группы пользователей, для которых показывать меню, дополнительные стили для меню.

Справа видим выпадающий список со всеми меню, выбираем по названию созданное нами ранее. Ниже предоставляются варианты отображения, выбираем «Список». Можете поэкспериментировать с остальными вариантами. Разница в способах представления на уровне HTML разметки. Но чаще используется именно Список.Далее идут пункты «Начальный уровень» и «Последний уровень», «Всегда показывать подпункты» — это настройки уровней вложенности для пунктов меню, о них информация ниже. Расположение нового окна — параметры JavaScript — расположение всплывающего окна, например,

top=50,left=50,width=200,height=300

В дополнительных параметрах возможно указать интервал между пунктами горизонтального меню (показывать или нет), кэширование ( рекомендуется когда меню уже создано и отредактировано — кэширование позволяет оптимизировать работу сайта ). Ниже располагаются настройки:

ID тега меню — CSS-идентификатор (id), назначенный для тега UL верхнего уровня (необязательный параметр).
CSS-суффикс класса меню (здесь можно задать особый класс CSS для визуальной организации меню).
CSS-суффикс класса модуля (здесь задается особый класс CSS для визуальной организации модуля (содержимого меню))

Через них возможно привязывать к меню собственные CSS стили. Например указав для суффикса класса меню

Код:

_main

. В коде нашего меню увидим

Код:

<ul class="menu_main">

Вместо

Код:

<ul class="menu">

Максимальный уровень вложенности меню по умолчанию стоит 10. То есть меню может содержать максимум 10 уровней вложенных подменю. Уровни больше этого числа будут игнорироваться. Если не показываются подпункты некоторого уровня, то увеличьте это число. В других настройках возможно настроить:

Показывать значки меню — включает отображение значков меню. Формат значков зависит от конкретного шаблона.
Расположение значков меню — задает расположение значков меню справа или слева.
Ссылка на значок меню — значок сам по себе является ссылкой.
Развернутое меню — задает, должен ли пункт меню всегда быть развернут, даже если нажатие происходит по другим меню. Активировать родительский пункт - активная ссылка присваивается родительскому пункту при переходе по ссылке в дочернюю категорию.
Постоянная подсветка активных пунктов — выделение активной ссылки.
Изображение отступа — задает значки, которые будут отображаться в дереве меню уровнем ниже. Можно задать использование значков из шаблона, значки Joomla по умолчанию, не использовать вовсе или задать каждому уровню вложенности своё изображение.
Изображение отступа 1-6 — задает индивидуальный значок каждому уровню иерархии.
Разделитель — задает разделитель пунктов вертикального меню.
Разделитель по концам — задает разделитель пунктов в горизонтальных меню.

Жмем «Сохранить». На странице сайта появляется соданное нами меню. Таким образом мы создали простое меню, без всяких эффектов.

2) Расширяем меню.

Расширить свойства меню можно путем CSS, JavaScript и PHP. Существует множество готовых решений, но редко они соответсвуют требованиям конкретного сайта без необходимости их «допиливать». Эти решения мы не будем разбирать в данной теме, а разложим варианты, наиболее часто задаваемых вопросов в разделе.

Простое горизонтальное меню.

 ul.menu {
	padding:<span>0</span>;
	margin:<span>0</span>;
 
}
 ul.menu li {
	float: left; /* выравниваем ссылки по горизонтали */
	list-style-type: none; /* убираем маркеры списка*/	
	padding-left:<span>10px</span>; /* внутренний отступ слева */	
	padding-right:<span>10px</span>; /* внутренний отступ справа */	
	padding-bottom:<span>0px</span>; /* внутренний отступ снизу */	
	padding-top:<span>0px</span>; /* внутренний отступ сверху */	
	background-image: url(../images/menu_sep<span>.gif</span>) no-repeat right top; /* разделитель */	
	position:relative; /* позиционируем в блоке родителя */	
}
 
 ul.menu a {
	display: block; /* делаем кликабельной всю кнопку */	
	height: 22px; /* высота кнопки*/	
	padding: 0 10px; /* внутренний отступ справа и слева */	
	overflow: hidden; /* запрещаем обтекание */	
	color: #7a7a7a; /* цвет ссылки */	
	font-family:Grotic; /* название шрифта */	
	font-style:bold; /* жирность шрифта */	
	font-size: 11px; /* размер шрифта */	
	text-decoration:none; /* убираем подчеркивание ссылки */	
	padding-top:<span>3px</span>; /* внутренний отступ сверху */
}
 ul.menu li.active a, ul.menu li a:hover {
	color:#E8A03D; /* цвет ссылки при наведении и активной ссылки */	
}

Так же можно вместо разделителя задать цвет кнопки, или присвоить ей графику.

Аналогично

background-image: url(../images/menu_sep.gif) no-repeat right top;

возможно присвоить к

ul.menu a

ul.menu li.active a, ul.menu li a:hover

Простое вертикальное меню делается аналогично, за исключением отсутствия в

ul.menu li элемента float: left;

Можем несколько расширить наше простое меню в визуальном плане при помощи средств стандартной для Joomla библиотеки mootools. Например добавить анимацию при наведении на ссылку

В поле между тэгами

<head> </head>

Вашего шаблона, добавляем

<script type="text/javascript">
window.addEvent('domready', function(){
    var el = $$('#my_menu li'),
	 color = el.getStyle('backgroundColor', '#333');
       $$('#my_menu li').set('margin', 0).addEvents({
	     mouseenter: function(){
		 this.morph({'margin-left': 5,'background-color': '#676768'});},
		 mouseleave: function(){
		 this.morph({margin: 0,backgroundColor: color});
	}});
});
</script>

В строках

'background-color': '#...'

Редактируем цвет кнопок.

Ниже в шаблоне, позицию для модуля меню оборачиваем блоком

<div class="my_menu"></div>

То есть выглядеть это будет примерно следующим образом

<div id="my_menu">
    <jdoc:include type="modules" name="leftmenu" />
</div>

За работоспособносьт примера ручаться не стану по ряду причин, но в общих чертах думаю понятно, каким образом возможно назначить различные эффекты для нашего меню.

Создание выпадающего меню средствами CSS.

В менемжере меню создаем новые пункты меню и присваиваем им родительский пункт.
В настройках модуля меню Начальный уровень — 0, Последний уровень — 2 или более.

На странице сайта должны появиться дочерние пункты меню рядом с родительским.

В файл template.css шаблона добавляем строчки:

ul.menu {
	position: absolute;
	top: 78px;
	left: 172px;
	list-style-type: none;
	padding:<span>0</span>;
	margin:<span>0</span>;
 
}
 ul.menu li {
	float: left;
	list-style-type: none;
	padding-left:<span>10px</span>;
	padding-right:<span>10px</span>;
	padding-bottom:<span>0px</span>;
	padding-top:<span>0px</span>;
	background-image: url(../images/menu_sep<span>.gif</span>);
	background-position: right top;
	background-repeat: no-repeat;
	position:relative;
}
 
 ul.menu a {
	display: block;
	height: 22px;
	padding: 0 10px;
	overflow: hidden;
	color: #7a7a7a;
	font-family:Grotic;
	font-style:bold;
	font-size: 11px;
	text-transform: uppercase;
	text-decoration:none;
	padding-top:<span>3px</span>;
}
ul.menu li.active a, ul.menu li a:hover {
	color:#E8A03D;
}
ul.menu li a, ul.menu li.active ul li a  {
	color:#7a7a7a;
}
 
ul.menu li ul {
    display:none;
    position:absolute;
    top:<span>2em</span>;
    left:<span>0</span>;
    padding:<span>0px</span> 0px 7px;
    margin:<span>0px</span> 0px 7px;
    background-color:white;
    opacity:<span>0</span>.<span>75</span>;
}
ul.menu li:hover ul {
    display:block;
}
ul.menu li:hover ul li a{
    height:auto;
}

Вертикальное это меню или горизонтальное, сторону, в которой отображаются подпункты при наведении можно настроить в каскаде

ul.menu li ul

оперируя свойствами

  top:2em;
   left:0;
   padding:0px 0px 7px;
   margin:0px 0px 7px;

Из минусов данного метода можно выделить сложности с IE6 — не воспринимает :hover, лечится костылями на JS, Сложности с восприятием 4го и более уровней. То есть подобным методом корректно можно обработать вложениея лишь до 3го уровня включительно. Если нужно обработать больше вложений, рекомендую использовать средства JS.

Выпадающее меню на JS+CSS.

Создаем отдельный файл menu.js, в него заносим код:

window.addEvent('domready', function() {
 
var Element = $$('.moduletable_shop ul.menu li.parent').set({
    'events': {
        'mouseover': function(){ this.addClass('hilite') },
        'mouseleave': function(){ this.removeClass('hilite') }
    }
});
});

В CSS добавляем:

ul.menu li ul{
ul.menu li ul{
  display:block;
 
  z-index:<span>-2</span>;           /*Здесь прячем подпункты на нижние слои*/
  position:absolute;
  margin-left: 220px;  /*Отступ справа = ширина родительского пункта меню*/
  margin-top: -93px;   /*Отступ снизу = высота родительского пункта меню*/
 
 }
 ul.menu li.hilite ul{
   z-index:<span>100</span>;          /*Вот здесь класс hilite наш - выводим меню в верхние слои*/
 }

Оперируя свойствами

margin-left: 220px;
 margin-top: -93px;

добиваемся четкого отображения раскрывающихся категорий.

3) Устраняем недочеты.

В стандартном mod_mainmenu существуют несколько досадных недоработок. Если на сайте используется несколько модулей меню на основе стандартного mod_mainmenu – мы получаем ошибку валидации – для каждого активного пункта меню UL LI создается id=«current» (в случае создания связанных меню, многоуровневых либо просто дублирование модуля) Лечится просто – в файле templates/шаблон/html/mod_mainmenu/default.php (что это такое и что делать если такого файла нет – объяснять не буду, читаем документацию по шаблонизации движка) находим строку примерно 71

$node->addAttribute('id', 'current');

и заменяем на

$node->addAttribute('id', 'current'.$id);

Теперь у нас к каждому current добавляется идентификатор itemid.

Для лучшей поисковой оптимизации к каждой ссылке на сайте рекомендуется добавлять атрибут title="" с описанием. В стандартном модуле его нет, но лечится весьма не сложно.

Копируем файл modules/mod_mainmenu/tmpl/default.php в папку шаблона, т.е. он должен размещаться по адресу templates/название_шаблона/html/mod_mainmenu/default.php

Открываем файл, находим строку

if (isset($path) &amp;&amp; $node->attributes('id') == $path[0]) {

и перед ней вставляем код

   if ($node->name() == 'a') {
        $children = $node->children();
    foreach ($node->children() as $child)
    {
      if ($child->name() == 'span') {
                $node->addAttribute('title', $child->_data);
      }
    }
    }

Теперь у нас ссылки меню получают атрибут title="".

3 comments

zikkuratvk
09.10.2012 06:10
Updated: Just now
0

Мне кстати как не верстальщику такие штуки очень интересны)

Dron79
09.10.2012 06:37
Updated: Just now
0

Благодарю, полезный материал.