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

Тема в разделе "Интерактивные возможности", создана пользователем emorunov, 07.09.2007.

Статус темы:
Закрыта.
  1. Offline

    emorunov Недавно здесь

    Регистрация:
    25.07.2007
    Сообщения:
    27
    Симпатии:
    0
    Пол:
    Мужской
    вот возник вопрос.. компонент mainmenu выводится в виде списка.. можно ли сделать чтобы он выводился ещё и в несколько стобцов
    например так:

    * главная * фотографии
    * контакты * ссылки
    * форум * загрузки
     
  2.  
  3. Fanamura
    Offline

    Fanamura Доброта

    Регистрация:
    12.03.2007
    Сообщения:
    5 108
    Симпатии:
    159
    Пол:
    Мужской
    Ответ: Меню в несколько колонок

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

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

    :)

    Привел самый простой пример, можно и в дивах :)
     
  4. Offline

    emorunov Недавно здесь

    Регистрация:
    25.07.2007
    Сообщения:
    27
    Симпатии:
    0
    Пол:
    Мужской
    Ответ: Меню в несколько колонок

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

    AmmiAk Укротитель браузеров

    Регистрация:
    25.07.2007
    Сообщения:
    633
    Симпатии:
    34
    Пол:
    Мужской
    Ответ: Меню в несколько колонок

    Если в качестве стиля выводимого на сайте меню используется "Плоский список" и область, в которую осуществляется вывод соответствующего ему модуля, ограничена по ширине, можно выводить пункты меню и в две колонки - для этого потребуется проделать соответствующие настройки CSS у идентификаторов списка:
    Код (CODE):
    1. ul#mainlevel {}
    2. ul#mainlevel li {}

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

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

    emorunov Недавно здесь

    Регистрация:
    25.07.2007
    Сообщения:
    27
    Симпатии:
    0
    Пол:
    Мужской
    Ответ: Меню в несколько колонок

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

    emorunov Недавно здесь

    Регистрация:
    25.07.2007
    Сообщения:
    27
    Симпатии:
    0
    Пол:
    Мужской
    Ответ: Меню в несколько колонок

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

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

    AmmiAk Укротитель браузеров

    Регистрация:
    25.07.2007
    Сообщения:
    633
    Симпатии:
    34
    Пол:
    Мужской
    Ответ: Меню в несколько колонок

    Специально проверил сам, как это работает - у меня стиль отображения такого меню выглядит следующим образом:
    Код (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; }


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

    emorunov Недавно здесь

    Регистрация:
    25.07.2007
    Сообщения:
    27
    Симпатии:
    0
    Пол:
    Мужской
    Ответ: Меню в несколько колонок

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

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

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

    AmmiAk Укротитель браузеров

    Регистрация:
    25.07.2007
    Сообщения:
    633
    Симпатии:
    34
    Пол:
    Мужской
    Ответ: Меню в несколько колонок

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

    Метод, описанный мной ранее, как выяснилось, безупречно работал лишь в самых последних версиях браузеров (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
     

    Вложения:

    • menu2column.rar
      Размер файла:
      997 байт
      Просмотров:
      39
    emorunov нравится это.
  11. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    Ответ: Меню в несколько колонок

    проще в шаблоне сделать
    Тогда будет то же самое, но средствами Joomla, при этом каждое меню (колонку) можно оформить отдельно.

    У AmmiAk другой подход.

    AmmiAk, +1
     
  12. Offline

    emorunov Недавно здесь

    Регистрация:
    25.07.2007
    Сообщения:
    27
    Симпатии:
    0
    Пол:
    Мужской
    Ответ: Меню в несколько колонок

    Здорово! всё заработало! Огромное приогромное спасибо, AmmiAk!!!
     
Статус темы:
Закрыта.

Поделиться этой страницей

Загрузка...