0 Пользователей и 1 Гость просматривают эту тему.
  • 112 Ответов
  • 50318 Просмотров
*

al-teen

  • Глобальный модератор
  • 2384
  • 224 / 10
  • im
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. Существует множество готовых решений, но редко они соответсвуют требованиям конкретного сайта без необходимости их "допиливать". Эти решения мы не будем разбирать в данной теме, а разложим варианты, наиболее часто задаваемых вопросов в разделе.



Простое горизонтальное меню.
 
 
Код: css
  ul.menu {
padding:0;
margin:0;
 
}
 ul.menu li {
float: left; /* выравниваем ссылки по горизонтали */
list-style-type: none; /* убираем маркеры списка*/
padding-left:10px; /* внутренний отступ слева */
padding-right:10px; /* внутренний отступ справа */
padding-bottom:0px; /* внутренний отступ снизу */
padding-top:0px; /* внутренний отступ сверху */
background-image: url(../images/menu_sep.gif) 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:3px; /* внутренний отступ сверху */
}
 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>
Вышего шаблона, добавляем

Код: javascript
<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 шаблона добавляем строчки:
Код: css
  ul.menu {
position: absolute;
top: 78px;
left: 172px;
list-style-type: none;
padding:0;
margin:0;

}
 ul.menu li {
float: left;
list-style-type: none;
padding-left:10px;
padding-right:10px;
padding-bottom:0px;
padding-top:0px;
background-image: url(../images/menu_sep.gif);
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:3px;
}
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:2em;
    left:0;
    padding:0px 0px 7px;
    margin:0px 0px 7px;
    background-color:white;
    opacity:0.75;
}
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, в него заносим код:
Код: javascript
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 добавляем:
Код: css
ul.menu li ul{
ul.menu li ul{
  display:block;

  z-index:-2;           /*Здесь прячем подпункты на нижние слои*/
  position:absolute;
  margin-left: 220px;  /*Отступ справа = ширина родительского пункта меню*/
  margin-top: -93px;   /*Отступ снизу = высота родительского пункта меню*/

 }
 ul.menu li.hilite ul{
   z-index:100;          /*Вот здесь класс 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]) {

и перед ней вставляем код
Код: php
    if ($node->name() == 'a') {
        $children = $node->children();
    foreach ($node->children() as $child)
    {
      if ($child->name() == 'span') {
                $node->addAttribute('title', $child->_data);
      }
    }
    }

Теперь у нас ссылки меню получают атрибут title="".
« Последнее редактирование: 10.05.2011, 20:31:40 от al-teen »
*

Efanych

  • Глобальный модератор
  • 4370
  • 613 / 0
Пойдёт темка. Буду сюда отправлять.
Тебе +
« Последнее редактирование: 09.05.2011, 15:54:06 от Efanych »
Создание сайтов, шаблонов, помощь в решении проблем.
*

al-teen

  • Глобальный модератор
  • 2384
  • 224 / 10
  • im
Efanych, спс. Исправил очепяточку.
*

Taatshi

  • Глобальный модератор
  • 4802
  • 457 / 0
  • Верстаем и немножко кодим. Обращайтесь ;)
Цитировать
1) Создание меню.

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


В панели администратора заходим в менеджер модулей ( Расширения => модули ), над списком модулей находим кнопку "Новый" ( Крестик ). На открывшейся странице находим пункт "Меню", жмем на него.

Я ламер полнейший? Разьясните, пожалуйста.

После создания меню у меня в менеджере модулей не приходится жать "новый" - модуль появляется автоматически в выключенном состояниии. Я его просто включаю. Я неправильно делаю?
*

al-teen

  • Глобальный модератор
  • 2384
  • 224 / 10
  • im
Я ламер полнейший? Разьясните, пожалуйста.

То есть он дублируется что ли?
*

Taatshi

  • Глобальный модератор
  • 4802
  • 457 / 0
  • Верстаем и немножко кодим. Обращайтесь ;)
Я ламер полнейший? Разьясните, пожалуйста.
То есть он дублируется что ли?

Ну, можно и так сказать, меню сразу создается как модуль.

Я не придраться, собираюсь всю инструкцию пройти, потому что давно хотела научиться делать меню выпадающее попроще. Так что шаги дублирую от и до - мало ли где косячок закрадется...
*

Efanych

  • Глобальный модератор
  • 4370
  • 613 / 0
Добавь, как горизонтальное Не выпадающее меню сделать для полноты картины
Создание сайтов, шаблонов, помощь в решении проблем.
*

al-teen

  • Глобальный модератор
  • 2384
  • 224 / 10
  • im
Taatshi, выглядит как будто какое то расширение стоит для автоматизации. Впрочем я буквально вчера видел сборку от Joomla.ru, в которой по дефолту JoomlaPack и редактор JCE, так что тут не думаю что нужно заморачиваться, создается и хорошо, лишь бы работало стабильно
*

al-teen

  • Глобальный модератор
  • 2384
  • 224 / 10
  • im
Добавь, как горизонтальное Не выпадающее меню сделать для полноты картины
Да заодно можно и вертикальное, о том как победить list-style да позиционировать ссылки списка. Пару цацек на mootools для ховера прикрутить. Щас займусь
*

Android

  • Захожу иногда
  • 87
  • 9 / 1
  • Google наше все!
в тему меню: никто случаем не знает какой класс отвечает за разделитель у меню joostina? у Joomla 1.5 отвечал .separator, joostina на него не реагирует. Стиль всего меню задается классом .mainlevel если его поменять то изменится стиль всех пунктов, что совсем ненужно
*

al-teen

  • Глобальный модератор
  • 2384
  • 224 / 10
  • im
Дописал
*

al-teen

  • Глобальный модератор
  • 2384
  • 224 / 10
  • im
в тему меню: никто случаем не знает какой класс отвечает за разделитель у меню joostina? у Joomla 1.5 отвечал .separator, joostina на него не реагирует. Стиль всего меню задается классом .mainlevel если его поменять то изменится стиль всех пунктов, что совсем ненужно
Раздел о Joomla 1.5. Создайте топик соответствующем разделе
*

Android

  • Захожу иногда
  • 87
  • 9 / 1
  • Google наше все!
Раздел о Joomla 1.5. Создайте топик соответствующем разделе

уже. походу никто не занет
*

al-teen

  • Глобальный модератор
  • 2384
  • 224 / 10
  • im
уже. походу никто не занет
Просто нужно смотреть, лично я с Joostina не работал, даже структурно не знаю что там используется и как
*

Dlinniy

  • Новичок
  • 4
  • 0 / 0
Здравствуйте!
Подскажите, есть ли возможность корректировать CSS стили одного отдельно взятого пункта меню? Спасибо!
*

midav

  • Давно я тут
  • 926
  • 114 / 1
есть ли возможность корректировать CSS стили одного отдельно взятого пункта меню?
Посмотрите какой класс присваивается нужному пункту меню . И присваивайте этому классу свои стили.
Ответы на вопросы по CSS . Откройте для себя Firebug
*

zmancer

  • Давно я тут
  • 523
  • 76 / 19
Здравствуйте!
Подскажите, есть ли возможность корректировать CSS стили одного отдельно взятого пункта меню? Спасибо!
.item23 - где 23 это id пункта меню
*

alexey_samara

  • Новичок
  • 18
  • 0 / 0
Помогите советом, пожалуйста.

Ситуация: есть меню:
    Календари
        Карманные календари
        Настольные календари
        Квартальные календари
        Настенные календари

Меню "Календари" является родительским по отношению к остальным, т.е. остальные вложены в него.
Хочу сделать так, чтобы верхнее меню "Календари" не отображалось совсем, а вложенные меню отображались всегда.

А со стандартным модулем меню возникла проблема.
В настройках игрался параметрами "Начальный уровень" и "Последний уровень". В итоге верхнее меню скрывается, нижние отображаются, НО! отображаются только на страницах заглавного меню "Календари" и на страницах подменю. А надо-то чтобы отображалось везде! (есть еще другие меню).
Параметр "Всегда показывать вложенные подпункты" включен.

Как быть? Помогите!
*

al-teen

  • Глобальный модератор
  • 2384
  • 224 / 10
  • im
Дело в том, что дочерние пункты находятся внутри контейнера li Если обращаться к нему, например посредством visibility:hidden то прозрачным становится весь блок. Нужно обратиться непосредственно к ссылке
Код
#menu li a {visibility:hidden} 
Причем задав для ссылок контейнера прозрачность мы так же обращаемся ко всем ссылкам. Для того чтобы остальное сделать видимым пишем
Код
#menu li ul a {visibility:visible } 
*

alexey_samara

  • Новичок
  • 18
  • 0 / 0
Цитировать
Дело в том, что дочерние пункты находятся внутри контейнера li Если обращаться к нему, например посредством visibility:hidden то прозрачным становится весь блок.
Здесь проблема в том, что, если включить отображение всех пунктов, а затем ненужные элементы скрывать свойством visibility:hidden, то пространство, которое они занимают, не освобождается (display:none использовать нельзя ибо seo) и приходится играться margin-top'ами - задавать минусовое положение, чтобы поднять дочерние пункты. А это для каждой отдельной менюшки приходится ручками делать, что не очень-то расширяемо и функционально :-(

Ну раз уж другого пути нету.. придется делать так.

Спасибо большое!
« Последнее редактирование: 07.06.2011, 14:43:17 от alexey_samara »
*

voldemar77

  • Захожу иногда
  • 58
  • 3 / 0
Благодарю ТС за гениальный труд.
В частности за простое до гениальности решение по title.

Но есть вопрос.
Админка-> пункт меню-> Параметры системы
есть пункт "Заголовок страницы", или в англоязычном варианте "Page title".
Видимо, он изначально и задумывался как содержимое параметра title.
Есть ли вариант выводить в параметре title содержание этого поля, а не дублирование названия пункта меню?
ИМХО это более правильно для SEO.
« Последнее редактирование: 09.06.2011, 01:27:02 от voldemar77 »
---
Продажа квартир в Чехии - за 25 тыс евро 70 кв.м. --> http://222.ru
*

Efanych

  • Глобальный модератор
  • 4370
  • 613 / 0
Цитировать
Видимо, он изначально и задумывался как содержимое параметра title.
Есть ли вариант выводить в параметре title содержание этого поля, а не дублирование названия пункта меню?
Это вы что сейчас спрашиваете? А попробовать туда вписать нужное, а потом посмотреть на титл страницы? Не?
Создание сайтов, шаблонов, помощь в решении проблем.
*

sharp

  • Завсегдатай
  • 1172
  • 97 / 2
Зачет! +
Хочешь знать правду!? читай таблицу умножения.
Поисковое продвижение или раскрутка сайта!
*

voldemar77

  • Захожу иногда
  • 58
  • 3 / 0
А попробовать туда вписать нужное, а потом посмотреть на титл страницы? Не?
На титл смотрел. Не помогло. :) Может из-за sh404SEF, а может ещё почему.
Только заголовок <H1> вылез с содержанием этого поля.
Жаль, что на титл меню не влияет...
---
Продажа квартир в Чехии - за 25 тыс евро 70 кв.м. --> http://222.ru
*

skai

  • Завсегдатай
  • 1199
  • 153 / 1
  • skaiseo
как сделать средствами CSS вертикальное меню с открывающимися в сторону пунктами..
как здесь и здесь (левое меню)

столкнулся с такой необходимостью и никак не могу сообразить..

P.S.
по аналогии без float + смещение? вроде нет..  
ul li ul li


- всё - я сообразил ))
« Последнее редактирование: 27.06.2011, 03:30:25 от skai »
Наполнение вашего сайта - 1т.р. стр. (текст, изображения, мета, перелинковка). Гарантия высокого ранжирования. SEO консультация в подарок.
----------------------------------------------------------------------------------------------
*

al-teen

  • Глобальный модератор
  • 2384
  • 224 / 10
  • im
Цитировать
по аналогии без float + смещение? вроде нет..
Код
position: absolute;left: ..px; top: 0;
float тут без надобности. ))
Код
#menu li:hover ul {position: absolute;left: 200px; top: 0;}
*

al-teen

  • Глобальный модератор
  • 2384
  • 224 / 10
  • im
Просто смещаешь абсолютно спозиционированный вложенный элемент ul влево на ширину родительского li. По идее top: 0;, при необходимости можно поиграться. Как и  c right, bottom
*

skai

  • Завсегдатай
  • 1199
  • 153 / 1
  • skaiseo
Просто смещаешь абсолютно спозиционированный вложенный элемент ul влево на ширину родительского li. По идее top: 0;, при необходимости можно поиграться. Как и  c right, bottom
- да, до меня уже допёрло )) делаю.
Наполнение вашего сайта - 1т.р. стр. (текст, изображения, мета, перелинковка). Гарантия высокого ранжирования. SEO консультация в подарок.
----------------------------------------------------------------------------------------------
*

Олег

  • Захожу иногда
  • 79
  • 1 / 0
Народ,подскажите пожалуйста...обычное джумловское меню с подпунктами.
Joomla! 1.5.23 Stable
9 подпунктов меню.
При выборе первых 3-х пунктов, все остальные подпункты скрываются.
Если жмякнуть на 4,5,6 итд подпункт,то раскрытость меню сохраняется(что собственно и нужно) и видно остальные подпункты.  !
Хочешь мира? Вооружайся!
*

leo78

  • Давно я тут
  • 996
  • 60 / 8
  • I left from paradise!?...
Народ объясните, попробовал всё из первого поста.
В основном интересует левое меню.
Шаблон стандартный Joomla 1.5 rhuk_milkyway

Код
			<div id="whitebox_m">
<div id="area">
<jdoc:include type="message" />

<div id="leftcolumn">
<?php if($this->countModules('left')) : ?>
<jdoc:include type="modules" name="left" style="rounded" />
<?php endif; ?>
</div>

<?php if($this->countModules('left')) : ?>
<div id="maincolumn">
<?php else: ?>


У меня получилось только изменить шрифт и текст дёргался и был в маке чёрной выделен.
Подскажите хотел бы разобраться?

А забыл создал в главном меню
« Последнее редактирование: 15.09.2011, 11:09:11 от leo78 »
Благодарности принимаются круглосуточно: Z957282423806 | R045187244064 | U207811153699
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Большое меню Joomla

Автор Amakeeva

Ответов: 1
Просмотров: 116
Последний ответ 22.01.2018, 13:17:45
от effrit
Как можно отображать имя пользователя в название меню?

Автор selimoff

Ответов: 27
Просмотров: 3045
Последний ответ 02.01.2018, 15:24:44
от logan-19
как сделать пункт меню не кликабельным?

Автор qweqweqwe

Ответов: 13
Просмотров: 5810
Последний ответ 07.09.2017, 01:45:49
от forzi
Сдвинуть пункты меню в левое положение

Автор wectra

Ответов: 6
Просмотров: 439
Последний ответ 12.07.2017, 21:09:01
от wectra
Не отображаются пункты в меню

Автор physic

Ответов: 16
Просмотров: 15753
Последний ответ 27.05.2017, 00:10:15
от OutLaw1