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

[al-teen]

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: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>

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

Код

<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: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, в него заносим код:

Код

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:-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]) {

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

Код

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

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

[Efanych]

Пойдёт темка. Буду сюда отправлять.
Тебе +

[al-teen]

Efanych, спс. Исправил очепяточку.

[Taatshi]

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

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


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

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

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

[al-teen]

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

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

[Taatshi]

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

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

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

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

[Efanych]

Добавь, как горизонтальное Не выпадающее меню сделать для полноты картины

[al-teen]

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

[al-teen]

Добавь, как горизонтальное Не выпадающее меню сделать для полноты картины

Да заодно можно и вертикальное, о том как победить list-style да позиционировать ссылки списка. Пару цацек на mootools для ховера прикрутить. Щас займусь

[Android]

в тему меню: никто случаем не знает какой класс отвечает за разделитель у меню joostina? у Joomla 1.5 отвечал .separator, joostina на него не реагирует. Стиль всего меню задается классом .mainlevel если его поменять то изменится стиль всех пунктов, что совсем ненужно

[al-teen]

Дописал

[al-teen]

в тему меню: никто случаем не знает какой класс отвечает за разделитель у меню joostina? у Joomla 1.5 отвечал .separator, joostina на него не реагирует. Стиль всего меню задается классом .mainlevel если его поменять то изменится стиль всех пунктов, что совсем ненужно

Раздел о Joomla 1.5. Создайте топик соответствующем разделе

[Android]

Раздел о Joomla 1.5. Создайте топик соответствующем разделе

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

[al-teen]

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

Просто нужно смотреть, лично я с Joostina не работал, даже структурно не знаю что там используется и как

[Dlinniy]

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

[midav]

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

Посмотрите какой класс присваивается нужному пункту меню . И присваивайте этому классу свои стили.

[zmancer]

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

.item23 - где 23 это id пункта меню

[alexey_samara]

Помогите советом, пожалуйста.

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

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

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

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

[al-teen]

Дело в том, что дочерние пункты находятся внутри контейнера li Если обращаться к нему, например посредством visibility:hidden то прозрачным становится весь блок. Нужно обратиться непосредственно к ссылке

Код:

#menu li a {visibility:hidden}

Причем задав для ссылок контейнера прозрачность мы так же обращаемся ко всем ссылкам. Для того чтобы остальное сделать видимым пишем

Код:

#menu li ul a {visibility:visible }

[alexey_samara]

Дело в том, что дочерние пункты находятся внутри контейнера li Если обращаться к нему, например посредством visibility:hidden то прозрачным становится весь блок.

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

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

Спасибо большое!

[voldemar77]

Благодарю ТС за гениальный труд.
В частности за простое до гениальности решение по title.

Но есть вопрос.
Админка-> пункт меню-> Параметры системы
есть пункт "Заголовок страницы", или в англоязычном варианте "Page title".
Видимо, он изначально и задумывался как содержимое параметра title.
Есть ли вариант выводить в параметре title содержание этого поля, а не дублирование названия пункта меню?
ИМХО это более правильно для SEO.

[Efanych]

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

Это вы что сейчас спрашиваете? А попробовать туда вписать нужное, а потом посмотреть на титл страницы? Не?

[sharp]

Зачет! +

[voldemar77]

А попробовать туда вписать нужное, а потом посмотреть на титл страницы? Не?

На титл смотрел. Не помогло. Может из-за sh404SEF, а может ещё почему.
Только заголовок <H1> вылез с содержанием этого поля.
Жаль, что на титл меню не влияет...

[skai]

как сделать средствами CSS вертикальное меню с открывающимися в сторону пунктами..
как здесь и здесь (левое меню)

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

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


- всё - я сообразил ))

[al-teen]

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

Код:

position: absolute;left: ..px; top: 0;

float тут без надобности. ))

Код:

#menu li:hover ul {position: absolute;left: 200px; top: 0;}

[al-teen]

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

[skai]

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

- да, до меня уже допёрло )) делаю.

[Олег]

Народ,подскажите пожалуйста...обычное джумловское меню с подпунктами.
Joomla! 1.5.23 Stable
9 подпунктов меню.
При выборе первых 3-х пунктов, все остальные подпункты скрываются.
Если жмякнуть на 4,5,6 итд подпункт,то раскрытость меню сохраняется(что собственно и нужно) и видно остальные подпункты.  !

[leo78]

Народ объясните, попробовал всё из первого поста.
В основном интересует левое меню.
Шаблон стандартный 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: ?>

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

А забыл создал в главном меню

[al-teen]

Покажите CSS данного меню

[leo78]

то есть templates/css?
Вот template.css

Код:

/*****************************/
/*** Core HTML setup stuff ***/
/*****************************/

html {
  height: 100%;
  margin-bottom: 1px;
}

form {
  margin: 0;
  padding: 0;
}

body {
font-family: Helvetica,Arial,sans-serif;
line-height: 1.3em;
margin: 0px 0px 0px 0px;
font-size: 12px;
color: #333;
}

a:link, a:visited {
text-decoration: none;
font-weight: normal;
}

a:hover {
text-decoration: underline;
font-weight: normal;
}

input.button { cursor: pointer; }

p { margin-top: 0; margin-bottom: 5px; }

img { border: 0 none; }

/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/
#page_bg {
padding: 10px 0;
margin-bottom: 1px;
}

div.center {
  text-align: center;
}

div#wrapper {
margin-left: auto;
margin-right: auto;
}

body.width_medium div#wrapper {
width: 950px;
}

body.width_small div#wrapper {
width: 773px;
}

body.width_fmax div#wrapper {
min-width: 750px;
max-width: 1050px;
}

div#header_l {
position: relative;
}

div#header_r {
height: 90px;
padding-left: 370px;
padding-right: 30px;
padding-top: 25px;
overflow: hidden;
text-align: left;
}

span#logo {
position: absolute;
left: 0;
top: 0;
float: left;
width: 360px;
height: 75px;
background: url(../images/mw_joomla_logo.png) 0 0 no-repeat;
margin-left: 30px;
margin-top: 25px;
}

div#newsflash {
width: auto;
margin-left: 350px;
margin-right: 30px;
border: 1px solid #00f;
}

div#tabarea {
background: #f7f7f7 url(../images/mw_header_b.png) 0 0 repeat-x;
margin: 0 11px;

}

div#tabarea_l {
background: url(../images/mw_header_l_b.png) 0 0 no-repeat;
padding-left: 32px;
}

div#tabarea_r {
height: 42px;
background: url(../images/mw_header_r_b.png) 100% 0 no-repeat;
padding-right: 1px;
}

div#footer_r {
padding-top: 10px;
height: 47px;
overflow: hidden;
}

div#footer_r div {
text-align: center;
font-size: .90em;
color: #aaa;
}

div#footer_r a:link, div#footer_r a:visited  {
color: #999;
}

div#footerspacer {
height: 10px;
}

#pathway {
padding: 0px 10px 8px;
width: auto;
margin-top: -2px;
margin-right: 250px;
text-align: left;
}

#search {
float: right;
width:320px;
margin-top: -20px;
margin-right: 30px;
height: 40px;
overflow: hidden;
text-align:right;
}

form#searchForm input {
vertical-align: middle;
}

form#searchForm table {
border-collapse: collapse;
}

form#searchForm td {
padding:0;
}

#mod_search_searchword {
padding-left: 3px;
}

#area {
padding: 0;
}

#whitebox {
margin: 0 21px 0px 21px;
background: #fff;
width: auto;
}

#whitebox div {
text-align: left;
}

#whitebox_t {
background: #fff url(../images/mw_content_t.png) 0 0 repeat-x;
}

#whitebox_tl {
background: url(../images/mw_content_t_l.png) 0 0 no-repeat;
}

#whitebox_tr {
height: 10px;
overflow: hidden;
background: url(../images/mw_content_t_r.png) 100% 0 no-repeat;
}

#whitebox_m {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
width: auto;
padding: 1px 8px;
}

#whitebox_b {
margin-top: -5px;
background: url(../images/mw_content_b.png) 0 100% repeat-x;
}

#whitebox_bl {
background: url(../images/mw_content_b_l.png) 0 100% no-repeat;
}

#whitebox_br {
height: 13px;
background: url(../images/mw_content_b_r.png) 100% 100% no-repeat;
}

/* horizontal pill menu */
table.pill {
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

td.pill_l {
  background: url(../images/mw_menu_cap_l.png) no-repeat;
  width:  20px;
  height: 32px;

}

td.pill_m {
  background: url(../images/mw_menu_normal_bg.png) repeat-x;
  padding: 0;
  margin: 0;
  width: auto;
}

td.pill_r {
  background: url(../images/mw_menu_cap_r.png) no-repeat;
  width:  19px;
  height: 32px;
}

#pillmenu {
  white-space: nowrap;
  height: 32px;
  float: left;
}

#pillmenu ul {
  margin: 0;
  padding: 0;
  list-style:none;
}

#pillmenu li {
float: left;
background: url(../images/mw_menu_separator.png) top right no-repeat;
margin: 0;
padding: 0;
}

#pillmenu a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
float:left;
  display:block;
  height: 24px;
  line-height: 24px;
  padding: 0 20px;
  color: #000;
  text-decoration: none;
}

#pillmenu a#active_menu-nav {
margin-top:2px;
height: 21px;
line-height: 21px;
background-position: 0 0;
}

#leftcolumn {
padding: 0;
margin: 0;
width: 20%;
float:left;
}

#maincolumn,
#maincolumn_full {
margin-left: 20%;
padding-left: 15px;
width: 75%;
}

#maincolumn_full {
margin-left: 0;
padding: 0;
width: 100%;
}

table.nopad {
width: 100%;
border-collapse: collapse;
padding: 0;
margin: 0;
margin-bottom: 15px;
}

table.nopad td.middle_pad {
width: 20px;
}

/*****************************************/
/*** Joomla! specific content elements ***/
/*****************************************/

div.offline {
background: #fffebb;
width: 100%;
position: absolute;
top: 0;
left: 0;
font-size: 1.2em;
padding: 5px;
}

span.pathway {
  display: block;
  margin: 0 20px;
  height: 16px;
  line-height: 16px;
  overflow: hidden;
}

/* headers */
div.componentheading {
  padding-left: 0px;
}

h1 {
padding: 0;
font-family:Helvetica ,Arial,sans-serif;
font-size: 1.3em;
font-weight: bold;
vertical-align: bottom;
color: #666;
text-align: inherit;
width: 100%;
}

h2, .contentheading {
padding: 0;
font-family: Arial, Helvetica,sans-serif;
font-size: 1.4em;
font-weight: normal;
vertical-align: bottom;
color: #333;
text-align: inherit;
width: 100%;
}

table.contentpaneopen h3 {
margin-top: 25px;
}

h4 {
font-family: Arial, Helvetica, sans-serif;
color: #333;
}

h3, .componentheading, table.moduletable th, legend {
  margin: 0;
  font-weight: bold;
  font-family: Helvetica,Arial,sans-serif;
  font-size: 1.5em;
  padding-left: 0px;
margin-bottom: 10px;
text-align: left;
}

/* small text */
.small {
font-size: .90em;
color: #999;
font-weight: normal;
text-align: left;
}

.modifydate {
  height: 20px;
  vertical-align: bottom;
font-size: .90em;
color: #999;
font-weight: normal;
text-align: left;
}

.createdate {
height: 20px;
vertical-align: top;
font-size: .90em;
color: #999;
font-weight: normal;
vertical-align: top;
padding-bottom: 5px;
padding-top: 0px;

}

a.readon {
margin-top: 10px;
display: block;
float: left;
background: url(../images/mw_readon.png) top right no-repeat;
padding-right: 20px;
line-height: 14px;
height: 16px;
}

/* form validation */
.invalid { border-color: #ff0000; }
label.invalid { color: #ff0000; }


/** overlib **/

.ol-foreground {
background-color: #f6f6f6;
}

.ol-background {
background-color: #666;
}

.ol-textfont {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}

.ol-captionfont {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #f6f6f6;
font-weight: bold;
}
.ol-captionfont a {
color: #0B55C4;
text-decoration: none;
font-size: 12px;
}

.ol-closefont {}

/* menu links */
a.mainlevel:link, a.mainlevel:visited {
padding-left: 5px;
}

a.mainlevel:hover {

}

/* spacers */
span.article_separator {
display: block;
height: 20px;
}

.article_column {
padding-right: 5px;
}

.column_separator {
border-left: 1px dashed #e0e0e0;
padding-left: 10px;
}

td.buttonheading {

}

td.buttonheading img {
border:none;
}

.clr {
clear: both;
}

td.greyline {
  width: 20px;
  background: url(../images/mw_line_grey.png) 50% 0 repeat-y;
}

div#maindivider {
  border-top: 1px solid #ddd;
  margin-bottom: 10px;
  overflow: hidden;
  height: 1px;
}

table.blog span.article_separator {
display: block;
height: 20px;
}

/* edit button */
.contentpaneopen_edit{
float: left;
}

/* table of contents */
table.contenttoc {
  margin: 5px;
  border: 1px solid #ccc;
  padding: 5px;
  float: right;
}

table.contenttoc td {
  padding: 0 5px;
}


/* content tables */
td.sectiontableheader {
  background: #efefef;
  color: #333;
  font-weight: bold;
  padding: 4px;
  border-right: 1px solid #fff;
}

tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
  padding: 4px;
}

td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2 {
  padding: 3px;
}


/* content styles */
table.contentpaneopen, table.contentpane {
margin: 0;
padding: 0;
width: 100%;
}

table.contentpaneopen li {
margin-bottom: 5px;
}

table.contentpaneopen fieldset {
border: 0;
border-top: 1px solid #ddd;
}

table.contentpaneopen h3 {
margin-top: 25px;
}

table.contentpaneopen h4 {
font-family: Arial, Helvetica, sans-serif;
color: #333;
}

.highlight {
background-color: #fffebb;
}

/* module control elements */
table.user1user2 div.moduletable {
margin-bottom: 0px;
}

div.moduletable, div.module {
  margin-bottom: 25px;
}

div.module_menu h3 {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: #eee;
margin: -23px -4px 5px -5px;
padding-left: 10px;
padding-bottom: 2px;
}

div.module_menu {
margin: 0;
padding: 0;
margin-bottom: 15px;
}

div.module_menu div div div {
padding: 10px;
padding-top: 30px;
padding-bottom: 15px;
width: auto;
}

div.module_menu div div div div {
background: none;
padding: 0;
}

div.module_menu ul {
margin: 10px 0;
padding-left: 20px;
}

div.module_menu ul li a:link, div.module_menu ul li a:visited {
font-weight: bold;
}

#leftcolumn div.module {
padding: 0 10px;
}

#leftcolumn div.module table {
width: auto;
}

/* forms */
table.adminform textarea {
  width: 540px;
  height: 400px;
  font-size: 1em;
  color: #000099;
}

div.search input {
width: 145px;
border: 1px solid #ccc;
margin: 15px 0 10px 0;
}

form#form-login fieldset { border: 0 none; margin: 0em; padding: 0.2em;}
form#form-login ul { padding-left: 20px; }

form#com-form-login fieldset { border: 0 none; margin: 0em; padding: 0.2em;}
form#com-form-login ul { padding-left: 20px; }

/* thumbnails */
div.mosimage         {  margin: 5px; }
div.mosimage_caption {  font-size: .90em; color: #666; }

div.caption       { padding: 0 10px 0 10px; }
div.caption img   { border: 1px solid #CCC; }
div.caption p     { font-size: .90em; color: #666; text-align: center; }

/* Parameter Table */
table.paramlist {
margin-top: 5px;
}

table.paramlist td.paramlist_key {
width: 128px;
text-align: left;
height: 30px;
}

table.paramlist td.paramlist_value {
}

div.message {
font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size : 14px;
color : #c30;
text-align: center;
width: auto;
background-color: #f9f9f9;
border: solid 1px #d5d5d5;
margin: 3px 0px 10px;
padding: 3px 20px;
}

/* Banners module */

/* Default skyscraper style */
.bannergroup {
}

.banneritem img {
display: block;
margin-left: auto;
margin-right: auto;
}

/* Text advert style */

.banneritem_text {
padding: 4px;
font-size: 11px;
}

.bannerfooter_text {
padding: 4px;
font-size: 11px;
background-color: #F7F7F7;
text-align: right;
}

/* System Messages */
/* see system general.css */

.pagination span { padding: 2px; }
.pagination a    { padding: 2px; }

/* Polls */
.pollstableborder td {
text-align: left;
}

/* WebLinks */
span.description {
display:block;
padding-left: 30px;
}

/* Frontend Editing*/
fieldset {
border: 1px solid #ccc;
margin-top: 15px;
padding: 15px;
}

legend {
margin: 0;
padding: 0 10px;
}

td.key {
border-bottom:1px solid #eee;
color: #666;
}

/* Tooltips */

.tool-tip {
float: left;
background: #ffc;
border: 1px solid #D4D5AA;
padding: 5px;
max-width: 200px;
}

.tool-title {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: bold;
margin-top: -15px;
padding-top: 15px;
padding-bottom: 5px;
background: url(../../system/images/selector-arrow.png) no-repeat;
}

.tool-text {
font-size: 100%;
margin: 0;
}

/* System Standard Messages */
#system-message { margin-bottom: 20px; }

#system-message dd.message ul { background: #C3D2E5 url(../../system/images/notice-info.png) 4px center no-repeat;border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin:0px; padding-left: 40px; text-indent:0px;}

/* System Error Messages */
#system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin:0px; padding-left: 40px; text-indent:0px;}

/* System Notice Messages */
#system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E; margin:0px; padding-left: 40px; text-indent:0px;}

#syndicate{
float:left;
padding-left: 25px;
}

#power_by{
float:inherit;
    padding-right: 25px;
    text-align: center;
}

/* Component Specific Fixes */

#component-contact table td {
padding: 2px 0;
}

/* Note Style */
p.alert {
    background: #FFF7C0 url(../images/alert.gif) center no-repeat;
    background-position: 15px 50%; /* x-pos y-pos */
    text-align: left;
    padding: 5px 20px 5px 45px;
    border-top: 2px solid #F7D229;
    border-bottom: 2px solid #F7D229;
    color: #996666;
}

p.cancel {
    background: #FFF7C0 url(../images/cancel.gif) center no-repeat;
    background-position: 15px 50%; /* x-pos y-pos */
    text-align: left;
    padding: 5px 20px 5px 45px;
    border-top: 2px solid #F7D229;
    border-bottom: 2px solid #F7D229;
    color: #ff0000;
}

p.info {
    background: #F8FAFC url(../images/info.gif) center no-repeat;
    background-position: 15px 50%; /* x-pos y-pos */
    text-align: left;
    padding: 5px 20px 5px 45px;
    border-top: 2px solid #B5D4FE;
    border-bottom: 2px solid #B5D4FE;
    color: #5E6273;
}

p.shield {
    background: #F8FAFC url(../images/shield.gif) center no-repeat;
    background-position: 15px 50%; /* x-pos y-pos */
    text-align: left;
    padding: 5px 20px 5px 45px;
    border-top: 2px solid #B5D4FE;
    border-bottom: 2px solid #B5D4FE;
    color: #5E6273;
}

p.warn {
    background: #FBEEF1 url(../images/warning.gif) center no-repeat;
    background-position: 15px 50%; /* x-pos y-pos */
    text-align: left;
    padding: 5px 20px 5px 45px;
    border-top: 2px solid #FEABB9;
    border-bottom: 2px solid #FEABB9;
    color: #8E6A64;
}

p.sticky {
    background: #E6FFE1 url(../images/sun.gif) center no-repeat;
    background-position: 15px 50%; /* x-pos y-pos */
    text-align: left;
    padding: 5px 20px 5px 45px;
    border-top: 2px solid #FEABB9;
    border-bottom: 2px solid #FEABB9;
    color: #48793F;
}

p.add {
    background: #E6FFE1 url(../images/add.gif) center no-repeat;
    background-position: 15px 50%; /* x-pos y-pos */
    text-align: left;
    padding: 5px 20px 5px 45px;
    border-top: 2px solid #009036;
    border-bottom: 2px solid #009036;
    color: #48793F;
}

p.feed {
    background: #E0E0E8 url(../images/feed.gif) center no-repeat;
    background-position: 15px 50%; /* x-pos y-pos */
    text-align: left;
    padding: 5px 20px 5px 45px;
    border-top: 2px solid #85BBDB;
    border-bottom: 2px solid #85BBDB;
    color: #333333;
}

p.download {
    background: #F0F0F0 url(../images/download.gif) center no-repeat;
    background-position: 15px 50%; /* x-pos y-pos */
    text-align: left;
    padding: 5px 20px 5px 45px;
    border-top: 2px solid #C0C0C0;
    border-bottom: 2px solid #C0C0C0;
    color: #666666;
}

p.doc {
    background: #F0F0F0 url(../images/doc.gif) center no-repeat;
    background-position: 15px 50%; /* x-pos y-pos */
    text-align: left;
    padding: 5px 20px 5px 45px;
    border-top: 2px solid #C0C0C0;
    border-bottom: 2px solid #C0C0C0;
    color: #666666;
}

p.download {
    background: #F0F0F0 url(../images/download.gif) center no-repeat;
    background-position: 15px 50%; /* x-pos y-pos */
    text-align: left;
    padding: 5px 20px 5px 45px;
    border-top: 2px solid #C0C0C0;
    border-bottom: 2px solid #C0C0C0;
    color: #666666;
}

p.code {
    border-left: 5px solid #C3D7EA;
    padding: 5px 20px 5px 10px;
    background: #F0F0F0 url(../images/_no-image.gif) no-repeat scroll 10px 5px;
    font-family: Courier New,Courier,mono,times new roman;
    line-height: 150%;
    color: green;
}

pre.code {
    border-left: 5px solid #C3D7EA;
    padding: 5px 20px 5px 10px;
    background: #F0F0F0 url(../images/_no-image.gif) no-repeat scroll 10px 5px;
    font-family: Courier New,Courier,mono,times new roman;
    line-height: 150%;
    color: green;
}

blockquote.quote1 {
    border-top: 2px dotted #cccccc;
    border-bottom: 2px dotted #cccccc;
    margin: 15px 10px; padding: 10px 20px 10px 60px;
    background: #ffffff url(../images/quote1.gif) no-repeat scroll left top;
}

p.quote1 {
    padding: 10px 30px 15px 0px;
    background: transparent url(../images/quote2.gif) no-repeat scroll right bottom;
    font-size: 110%;
    line-height: 120%;
    color: #999999;
    font-style: italic;
}

blockquote.quote2 {
    border-top: 2px dotted #cccccc;
    border-bottom: 2px dotted #cccccc;
    margin: 15px 10px; padding: 10px 20px 10px 60px;
    background: #ffffff url(../images/quote1.gif) no-repeat scroll left top;
    float: left; width: 200px;
}

p.quote2 {
    padding: 10px 30px 15px 0px;
    background: transparent url(../images/quote2.gif) no-repeat scroll right bottom;
    font-size: 110%;
    line-height: 120%;
    color: #999999;
    font-style: italic;
}

blockquote.quote3 {
    border-top: 2px dotted #cccccc;
    border-bottom: 2px dotted #cccccc;
    margin: 15px 10px; padding: 10px 20px 10px 60px;
    background: #ffffff url(../images/quote1.gif) no-repeat scroll left top;
    float: right; width: 200px;
}

p.quote3 {
    padding: 10px 30px 15px 0px;
    background: transparent url(../images/quote2.gif) no-repeat scroll right bottom;
    font-size: 110%;
    line-height: 120%;
    color: #999999;
    font-style: italic;
}

/* Tips, Error, Message, Hightlight*/
p.error {
padding-left: 25px;
color: #BF0000;
background: url(../images/icon-error.gif) no-repeat top left;
}

p.message {
padding-left: 25px;
color: #006699;
background: url(../images/icon-info.gif) no-repeat top left;
}

p.tips {
padding-left: 25px;
color: #EE9600;
background: url(../images/icon-tips.gif) no-repeat top left;
}

.highlight {
padding: 1px 5px;
background: #FFFFCC;
font-weight: bold;
}

/* Note Style */
p.stickynote {
padding: 10px 0px 10px 40px;
border: 1px solid #CACACC;
background: url(../images/sticky-bg.gif) no-repeat 5px center #FFFFFF;
}

p.download1 {
padding: 10px 0px 10px 40px;
border: 1px solid #CACACC;
background: url(../images/download-bg.gif) no-repeat 5px center #FFFFFF;
}

.blocknumber {
clear: both;
padding: 5px 15px 10px;
position: relative;
}

/* Check list */
ul.checklist {
list-style: none;
}

ul.checklist li {
margin-left: 15px;
padding: 0 0 5px 20px;
background: url(../images/checklist-bg.gif) no-repeat 0 3px;
}

/* Small checklist */
ul.small-checklist {
list-style: none;
}

ul.small-checklist li {
margin-left: 15px;
padding: 0 0 5px 20px;
background: url(../images/icon_list.gif) no-repeat 0 3px;
}

/* Check list */
ul.stars {
list-style: none;
}

ul.stars li {
margin-left: 15px;
padding: 0px 0 5px 20px;
background: url(../images/star-bg.gif) no-repeat 0 3px;
}


div.dropcap {
    padding: 0px 8px 4px 0px;
    float: left;
    text-transform: uppercase;
    line-height: 80%; display:
    block; color: #333333;
    font-size: 70px;
    font-family: Georgia,Times New Roman,Trebuchet MS;
}

/* META
--------------------------------------------------------- */
.article-tools {
border-top: 1px solid #DDDDDD;
width: 100%;
float: left;
clear: both;
margin-bottom: 15px;
display: block;
background: #ECECEC;
}

.article-meta {
padding: 5px;
width: 80%;
float: left;
}

.createby {
padding: 3px 3px 3px 20px;
background: url(../images/icon-user.gif) no-repeat 0 2px;
}

.createdate {
padding: 3px 3px 3px 20px;
background: url(../images/icon-date.gif) no-repeat 0 2px;
}

.modifydate {
width: 100%;
float: left;
}

div.buttonheading {
float: right;
width: 15%;
}

.buttonheading img {
margin: 7px 5px 0 0;
border: 0;
float: right;
}

abbr {
    border-bottom: 1px dashed red;
    color: #000080;
   }

code {
    color: green;
   }

.photo img {
    border: 10px solid #e8e8e8;
    padding: 4px;
    background: silver none repeat scroll 0% 0%;
    outline-color: silver;
    outline-style: solid;
    outline-width: 1px;
    width: 100px;
    height: 100px;  
    margin-left: 10px;
    margin-right: 10px;
   }

.photo1 img {
    border: 0pt none;
    padding: 10px;
    background: #fafafa none repeat scroll 0% 0%;
    outline-color: #e8e8e8;
    outline-style: solid;
    outline-width: 1px;
    margin-left: 10px;
    margin-right: 10px;
   }

.photo2 img {
    border: 10px solid #e8e8e8;
    padding: 4px;
    margin: 5px;  
    background: #ffffff none repeat scroll 0% 0%;
    width: 100px;
    height: 100px;
    outline-color: silver;
    outline-style: solid;
    outline-width: 1px;
   }

.photo3 img {
    border: 0pt none;
    padding: 10px;
    background: #fafafa none repeat scroll 0% 0%;
    outline-color: #e8e8e8;
    outline-style: solid;
    outline-width: 1px;
    width: 100px;
    height: 100px;
    margin-left: 10px;
    margin-right: 10px;
   }

a img.avatar1  {
    border:1px solid #CCCCCC;
    padding:1px;
    margin-left: 10px;
    margin-right: 10px;
}

a:hover img.avatar1 {
  border:1px solid #999999;
}

img.foto {
    border: 0pt none;
    padding: 10px;
    background: #fafafa none repeat scroll 0% 0%;
    outline-color: #e8e8e8;
    outline-style: solid;
    outline-width: 1px;
    margin-left: 10px;
    margin-right: 10px;
    float: left;
   }

span.mm2 {
  padding-left:10px;
  background: url(../images/more2_2.gif) no-repeat left 5px;
}

/* .floatbox { overflow:hidden; } */

div#footer a.anchor {
margin: 3px 20px 0px 0px;
width: 30px;
height: 5px;
background: url(../images/footer_anchor.png) 0 0 no-repeat;
display: block;
float: right;
text-decoration: none;
}

blue.css

Код:

/* blue */
a:link, a:visited {
color: #135cae;
}

a:hover {
color: #0b3768;
}

#pillmenu a:hover {
  color: #135cae;
}

#pillmenu a#active_menu-nav {
  background: url(../images/blue/mw_menu_active_bg.png) repeat-x;
  color: #fff;
}

#pillmenu a#active_menu-nav:hover {
  color: #fff;
}

h3, .componentheading, table.moduletable th {
  color: #135cae;
}

div.module_menu {
background: url(../images/blue/mw_box_br.png) 100% 100% no-repeat;
}

div.module_menu div {
background: url(../images/blue/mw_box_bl.png) 0 100% no-repeat;
}

div.module_menu div div {
background: url(../images/blue/mw_box_tr.png) 100% 0 no-repeat;
}

div.module_menu div div div {
background: url(../images/blue/mw_box_tl.png) 0 0 no-repeat;
}

Код:

<div id="leftcolumn">
                          <div id="left"> <div class="module_menu">

<div>
<div>
<div>
<h3>Foto-Studio</h3>
<ul class="menu"><li class="item1"><a href="http://www.foto-s.ru/"><span>Главная</span></a></li><li class="item50"><a href="/the-news.html"><span>Новости</span></a></li><li class="item356"><a href="/article.html"><span>Статьи</span></a></li><li class="item75"><a href="/exhibitions.html"><span>Выставки</span></a></li><li class="item74"><a href="/contests.html"><span>Конкурсы</span></a></li><li class="item37"><a href="/photobooks.html"><span>Книги</span></a></li><li class="item41"><a href="/dictionary.html"><span>Словарь</span></a></li><li class="item73"><a href="/news-feeds.html"><span>Ленты новостей</span></a></li><li class="item77"><a href="/faq.html"><span>Вопросы и ответы</span></a></li><li class="item48"><a href="/web-links.html"><span>Ссылки</span></a></li><li id="current" class="parent active item611"><a href="/katalogi.html"><span>Каталоги</span></a><ul><li class="item606"><a href="/katalogi/flea-market.html"><span>Барахолка</span></a></li><li class="item610"><a href="/katalogi/download-archive.html"><span>Скачать Архив</span></a></li></ul></li></ul> </div>

</div>
</div>
</div>
<div class="module_menu">
<div>
<div>
<div>
<h3>Меню пользователя</h3>

<ul class="menu"><li class="item51"><a href="/submit-an-article.html"><span>Добавить статью</span></a></li><li class="item52"><a href="/submit-a-web-link.html"><span>Добавить веб-ссылку</span></a></li><li class="item24"><a href="/logout.html"><span>Выход</span></a></li></ul> </div>
</div>
</div>
</div>
</div>
                        </div>

<div id="maincolumn">

[al-teen]

Код:

#leftcolumn {
padding: 0;
margin: 0;
width: 20%;
float:left;
}

#maincolumn,
#maincolumn_full {
margin-left: 20%;
padding-left: 15px;
width: 75%;
}

С данными блоками работайте. С вопросами по CSS обращайтесь в соответствующий раздел форума

[leo78]

al-teen
Я понял, что CSS не к вам, а как заставить меню реагировать на курсор и раскрывание?

[al-teen]

Это именно вопросы CSS

[leo78]

понял спасибо

[leo78]

al-teen Ещё вопрос, а у templates-ja_purity работают данные примеры?

[al-teen]

Проверьте

[leo78]

Блин не пашет
Наф. это меню без него проблем хватает (

[Danleri]

В шаблоне для шрифта заголовка меню (и любых других модулей) использован редкий не стандартный шрифт (в чем-то он похож на Arial Narrow), который в кириллице отображается совсем другим шрифтом (выглядит как TimesNewRoman) , что делать в таком случае, т.к. шаблон теряет свой стиль, можно ли для заголовков кириллицей использовать шрифты кроме банальных??

[WebLab 8]

Danleri, не совсем в тему Ваш вопрос, можно конечно, если ковыряться вручную лень, на ext.joomla.org дополнения есть для этого Phoca Font например. И вот здесь неплохо почитать Тема: Не стандартные шрифты на сайте

[komkova]

В стандартном 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

Скажите, пожалуйста, где искать этот самый default.php, или где найти документацию по этому поводу? и у меня modules/mod_mainmenu/tmpl/default.php а modules/mod_menu/tmpl/default.php это одно и тоже?

[al-teen]

Одно и то же

[komkova]

 

Скажите, пожалуйста, где искать этот самый default.php, или где найти документацию по этому поводу? и у меня modules/mod_mainmenu/tmpl/default.php а modules/mod_menu/tmpl/default.php это одно и тоже?

все хорошо, но в этом файле нет подобной строки.

[al-teen]

В топике приведен вариант для J1.5.В более поздних версиях CMS(1.6,1.7) данной проблемы не существует.Так как id="current" было заменено на class="current".class, в отличии от id, с точки зрения валидности, может встречаться на странице много раз.

[komkova]

спасибо. может направите тогда где можно посмотреть настройки бокса (расположения) например user3 или top. Как я понимаю в 1.7 там настраивается способ отображения.

___________________________________

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

[al-teen]

Если с шаблоном нет картики модульной сетки, то узнать можно лишь методом научного тыка.Открываете менеджер модулей, выбираете в списке любой из них, открываете.Далее в пункте "Позиция" выбираете по очереди все подряд и смотрите где этот модуль располагается при назначении его той или иной позиции.Но это тема про меню.И ответ на Ваш вопрос присутствует в разделе FAQ

[LightStorm]

создал меню, всё работает спс за мануал) но возникла проблема: пункты выпадающего меню наследуют стили родительского меню, а конкретно разделитель остается и еще если нажать на родительский пункт то бекграунд меняется. вот ссылка, http://usif.apelsun.info/ пункт меню наші тендери.  пока что оставляю как есть для просмотра, но это только на сегодня. очень надеюсь на ответ


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

[zmancer]

ul.menu_mane li.parent ul li a - подпункт меню

[LightStorm]

ul.menu_mane li li a{}
вот прописал такой стиль, он действительно действует на те ссылки что нужно, но теперь возникла проблема: как убить беграунд? прописываю
ul.menu_mane li li a{
   background-image:none !important;
}
не работает, вообще не реагирует ни на что, кроме background-color при этом оно убивает палку, но остается сам цвет. как можна убить эту палку?))

[LightStorm]

всё разобрался)

[bozhkov]

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

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

Огромное спасибо за ликбез! Все вроде получается, кроме одного: выпадающее меню выпадает, только когда находимся на странице, куда ведет этот пункт меню. А когда на других - не выпадает ;((
Можно это как-то победить? Самому не догнать ;((((

[bozhkov]

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

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

Огромное спасибо за ликбез! Все вроде получается, кроме одного: выпадающее меню выпадает, только когда находимся на странице, куда ведет этот пункт меню. А когда на других - не выпадает ;((
Можно это как-то победить? Самому не догнать ;((((

[bozhkov]

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

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

Огромное спасибо за ликбез! Все вроде получается, кроме одного: выпадающее меню выпадает, только когда находимся на странице, куда ведет этот пункт меню. А когда на других - не выпадает ;((
Можно это как-то победить? Самому не догнать ;((((

[al-teen]

Скорее всего дело в настройке модуля меню. Поставьте галочку на "Показывать вложенные пункты"

[_laila_]

Меню работает, сижу подстраиваю под сайт, но случилось следующее:
у меня почему-то пункты всплывающего меню не в одну строчку, а переносятся по словам в следующую строку вот так:

1.Главная 

2.Достижения

3.Успехи
нашего
питомника

4. Особенности
породы

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

1.Главная 

2.Достижения

3.Успехи_нашего_питомника

4. Особенности породы

Но так как-то же не красиво вместо пробелов точки или еще какую ерунду рисовать
Где нужно что прописать в вашем коде, что бы он слова не переносил?

[Efanych]

white-space: nowrap, например. Может ещё высоту можна ограничить, но тут нужно сайт глянуть.

[al-teen]

_laila_, почитайте информацию о грамотных пунктах меню. Например в Google. Ничего общего с кодами. Название пункта меню должно быть коротким и лаконичным. Одновременно с этим - интуитивно понятным любому посетителю.

Mail.Ru / Почта / Мой Мир / Одноклассники / Игры / Знакомства / Новости / Поиск / Все проекты

Идеально. Учитесь. И нет проблем с переносом слов. Как то не очень располагают к вчитыванию пункты типа "Привет матросам Балтийского Флота от верных сынов Закавказья"

[_laila_]

al-teen Это всё очень замечательно, но некоторые словосочетания сложно превратить в одно слово, например: "Выбор котенка"
А оно переносится именно как:
Выбор
котенка
Или мне что, оставить слово : "Котята" или "Выбор". Много говорящий получится пункт меню, а бабульке моей нужно именно что бы это был пункт меню.
И я не считаю что название такое напоминает: "Привет матросам Балтийского Флота от верных сынов Закавказья"
А длинное словосочетание "Успехи_нашего_питомника" я для примера написала, его вполне можно сократить до УСПЕХИ, что собственно и сделано.
Все равно, спасибо что уделили внимание моему посту

Efanych спасибо, я попробую

[_laila_]

я нашла в чем беда.
В CSS в родительском меню стояло width: 124px; - ширина кнопки, и в всплывающем меню эта ширина унаследовалась.
Поэтому и переносились слова. Добавила нужную ширину кнопки к свойствам всплывающего меню и все встало на свои места
Я - CSS тупица