Меню в несколько колонок

вот возник вопрос.. компонент mainmenu выводится в виде списка.. можно ли сделать чтобы он выводился ещё и в несколько стобцов
например так:

* главная * фотографии
* контакты * ссылки
* форум * загрузки

 

Ответ: Меню в несколько колонок

В джумле есть возможность выводить несколько меню.
например, mainmenu и usermenu, (админка => Меню) распределите эти ссылки между этими меню, потом в модулях определите дли них разные модули (админка => модули), а потом в шаблоне вставьте позиции для двух модулей для меню. Можно даже таблицей

Код (CODE):

1. <table>
2.   <tr>
3.     <td><?php mosLoadModules ( 'menu1' ); ?></td>
4.     <td><?php mosLoadModules ( 'menu2' ); ?></td>
5.   </tr>
6. </table>

Привел самый простой пример, можно и в дивах

 

Ответ: Меню в несколько колонок

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

 

Ответ: Меню в несколько колонок

Если в качестве стиля выводимого на сайте меню используется "Плоский список" и область, в которую осуществляется вывод соответствующего ему модуля, ограничена по ширине, можно выводить пункты меню и в две колонки - для этого потребуется проделать соответствующие настройки CSS у идентификаторов списка:

Код (CODE):

1. ul#mainlevel {}
2. ul#mainlevel li {}

Для того, чтобы организовать на сайте подобного рода меню, устанавливаем на область, в которую выводятся его пункты ограничение на ширину "width: 100%", для пунктов меню (ul#mainlevel li) оная, соответственно, будет "width: 50%". Далее в свойствах этого идентификатора также прописываем "float: left" - таким образом, все нечетный пункты меню будут пристыковываться к левой границе содержащей их области (третий под первым, пятый под третьим и т.д.) и занимать половину её ширины, а четные - к правой границе предшествующих им нечетных пунктов (второй справа от первого, четвертый справа от третьего и т.д.)

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

 

Ответ: Меню в несколько колонок

класс. спасибо большое. обязательно попробую!!!

 

Ответ: Меню в несколько колонок

вот пробую сделать так как советовали..
создал 2 идентификатора списка:
ul#mainlevel {width: 100%}
ul#mainlevel li {width: 50%; float: left}

ничего не поменялось.. список всё равно выведен в одну колонку а не в 2.. я что то не так сделал или что то не доделал???

 

Ответ: Меню в несколько колонок

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

Код (CODE):

1. ul#mainlevel { width: 100%; float: left; list-style-type: none; padding: 0; margin: 0; }
2. ul#mainlevel li { width: 50%; float: left; }

Все отступы у плоского списка обнулены, убраны маркеры у его пунктов - это то, что связано с дополнительными стилями, которые никак не влияют на расположение самих пунктов. Скорее всего, у идентификатора плоского списка (ul#mainlevel) недостает определения типа позиционирования, 'float: left' - обозначает плавающий объект. Его же следует добавить и содержащей модуль меню (плоский список) области веб-страницы и очистить страницу добавлением пустого контейнера очистки. Все это будет выглядеть следующим образом:

В шаблоне сайта:

Код (CODE):

1. <div id="mainMenu"><?php mosLoadModules('<позиция>',-2);?></div>
2. <div id="clearMenu"></div>

В стилевом файле:

Код (CODE):

1. div#mainMenu { width: 100%; float: left; }
2. ul#mainlevel { width: 100%; float: left; list-style-type: none; padding: 0; margin: 0; }
3. ul#mainlevel li { width: 50%; float: left; }
4. div#clearMenu { clear: both; }

Попробуй так, у меня все пучком.

 

Ответ: Меню в несколько колонок

тут возникает следующий вопрос..
код меню в конечном итоге выглядит так (после вставок того что было предлжено)

<div id="mainMenu">
<div class="moduletable">
<ul id="mainlevel">
<li><a href="http://kudo-orel.ru/" class="mainlevel" id="active_menu">Главная</a></i>
<li><a href="http://kudo-orel.ru/history.html" class="mainlevel" >История стиля</a></li>
<li><a href="http://kudo-orel.ru/article/" class="mainlevel" >Статьи</a></li>
<li><a href="http://kudo-orel.ru/foto/" class="mainlevel" >Фотографии</a></li>
<li><a href="http://kudo-orel.ru/download/" class="mainlevel" >Загрузки</a></li>
<li><a href="http://kudo-orel.ru/links/" class="mainlevel" >Ссылки</a></li>
<li><a href="#" onclick="javascript: window.open('http://kudo.ru/board/', '', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=550'); return false" class="mainlevel" >Форум</a>
</li>
</ul>
</div>
</div>
<div id="clearMenu"></div>

меню всё равно в один столбец

 

Ответ: Меню в несколько колонок

Прошу прощения, что времени с той поры прошло достаточно - собственно, выдалась свободная минутка и я всерьез занялся твоей "проблемой". Не знаю, насколько это актуально сейчас конкретно для твоего проекта, но другим владельцам сайтов, работающих под управлением Joomla! CMS, думаю, мое решение также будет весьма полезно.

Метод, описанный мной ранее, как выяснилось, безупречно работал лишь в самых последних версиях браузеров (IE7, Firefox 2, Opera 9), в IE6 я тогда проверить не удосужился по всем понятной причине - у меня его просто не было. К этому моменту мне выдалась такая возможность и вот как на самом деле должно выглядеть самое, что ни на есть, оптимальное решение (метод):

В шаблоне сайта:

Код (CODE):

1. <?php mosLoadModules('<позиция>',-2);?>
2. <div id="clearMenu"></div>

В стилевом файле:

Код (CODE):

1. div.moduletable { width: 250px; float: left; }
2. ul#mainlevel { width: 100%; float: left; list-style-type: none; padding: 0; margin: 0; }
3. ul#mainlevel li { width: 49%; float: left; }
4. div#clearMenu { clear: both; }

Пример того, как на твоем сайте может выглядеть подобный вариант меню, emorunov, в приложении к этому сообщению, там же имеются и соответствующие комментарии. Теперь все должно получиться - 100%! ;D

 

Ответ: Меню в несколько колонок

Здорово! всё заработало! Огромное приогромное спасибо, AmmiAk!!!