Меню с картинками

Тема в разделе "Проектирование", создана пользователем K@pustin, 02.04.2011.

  1. Offline

    K@pustin Недавно здесь

    Регистрация:
    12.07.2010
    Сообщения:
    17
    Симпатии:
    0
    Пол:
    Мужской
    Помогите, необходимо сделать меню следующего вида:
    [​IMG]
    Можно ли это сделать в Joomla с тем условием, что добавляя новый пункт меню, новые пункты будут появляться ниже, т.е. ширина всего в три пункта, и если можно то как?
    Заранее спасибо
     
  2.  
  3. Offline

    K@pustin Недавно здесь

    Регистрация:
    12.07.2010
    Сообщения:
    17
    Симпатии:
    0
    Пол:
    Мужской
    И никто даже не знает как сделать?
     
  4. Offline

    TroL специалист

    Регистрация:
    01.03.2011
    Сообщения:
    502
    Симпатии:
    34
    Пол:
    Мужской
    всек это можно сделать! создаешь меню(картинки можно через саму джумлу вставить), идешь в модули и создаешь модуль с этим меню и версткой "списком"далее в ксс ul {...; list-style: none;} ширену и высоту выставляешь для "ul" и "li".
    если надо подробности пиши в личку, помогу
     
    K@pustin нравится это.
  5. Ripley
    Offline

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

    Регистрация:
    24.05.2009
    Сообщения:
    173
    Симпатии:
    4
    Пол:
    Мужской
    Есть готовый бесплатный модуль для таких случаев - Ninja Simple Icon Menu:
    Ссылка: http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems/image-menus/3636
    Высоту и ширину каждой кнопки можно задать в настройках. Отступы в настройках, вроде тоже есть, но я для себя ковырялся в CSS.
    Там пять вариантов настройки отображения кнопок меню. При одном из них кнопки располагаются именно так, как показано на этом рисунке, с той лишь разницей, что в ряду может быть и 6 кнопок, если их размер и ширина блока, отведенного под модуль позволит им поместятся в один ряд в таком количестве (иными словами, они "переносятся на новую строку" по мере необходимости, как слова в книге).
    Два НО:
    • Изображения для кнопок меню берутся из директории модуля. Добавлять свои изображения в директорию модуля надо либо через ftp, либо через средства, предоставленные хостером в личном кабинете.
    • Модуль способен изменять размеры изображения на лету, путем подгонки под указанные Вами настройки размера кнопок. Только вот качество получаемых изображений таково, что лучше сразу нарисовать кнопки лучшего размера.
     
    Последнее редактирование: 05.04.2011
  6. Offline

    K@pustin Недавно здесь

    Регистрация:
    12.07.2010
    Сообщения:
    17
    Симпатии:
    0
    Пол:
    Мужской
    Блин, а я горизонтальное меню мучал, он таблицей все верстать начинает, поэтому копаться долго надо. А списками сегодня попробую
     
  7. Offline

    K@pustin Недавно здесь

    Регистрация:
    12.07.2010
    Сообщения:
    17
    Симпатии:
    0
    Пол:
    Мужской
    а какой компонент отвечает за внешний вид меню?
    Т.е. если меню выводится списками, где описана его верстка?
     
  8. Offline

    K@pustin Недавно здесь

    Регистрация:
    12.07.2010
    Сообщения:
    17
    Симпатии:
    0
    Пол:
    Мужской
    я так понял, надо изменить модуль mod_mainmenu, но как?
     
  9. Offline

    TroL специалист

    Регистрация:
    01.03.2011
    Сообщения:
    502
    Симпатии:
    34
    Пол:
    Мужской
    он же у тебя в диве список?! вот от него и веди путь типо #mainmenu ul li.....
    в ксс-е выставляешь примерно такое (в кодуе много лишнего и недостающего будет, но принцип такойже)
    Код (CODE):
    1. #menubodyb {
    2.     margin-top:15px;
    3.     z-index:100;
    4.     float:left;
    5.     padding: 0 0 20px 0;
    6.     font-size:14px;
    7.     border-top:2px inset #ccccff;
    8.     border-bottom:2px inset #ccccff;
    9. }
    10.  
    11.  
    12. #menubodyb ul{
    13.     list-style: none;
    14.     width:600px;
    15.     margin: 0;
    16. }
    17.  
    18. #menubodyb ul li {
    19.     float: left;
    20.     width:280px;
    21.     cursor: pointer;
    22.     display: block;
    23.     margin-top:6px;
    24.     margin-left:15px;
    25. }
    26.  
    27. #menubodyb ul li:hover {
    28.     border:3px outset;
    29.     background:#ccc;
    30.     width:274px;
    31.     float: left;
    32.     margin-top:0px;
    33. }
    34.  
    35. #menubodyb ul li a{
    36.     padding-left:5px;
    37.     display: block;
    38. }
     
  10. Offline

    K@pustin Недавно здесь

    Регистрация:
    12.07.2010
    Сообщения:
    17
    Симпатии:
    0
    Пол:
    Мужской
    хорошо, попробую стилями выровнять, спасибо
     

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

Загрузка...