Как сделать чтобы в меню вместо текста вставить картинки!

Тема в разделе "Навигационная структура сайта", создана пользователем OlegM, 29.08.2007.

  1. OlegM
    Offline

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

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    Начало на "старом" форуме CMS Joomla

    Задача: Нужно, чтобы в меню вместо текста вставлялись изображения.

    Решение:
    Знакома технология "замена текста кртинкой"? Здесь так же.
    Надо получишь меню вида
    Код (CODE):
    1. <ul class="mainlevel">
    2.  <li id="item1"><a href="#" class="mainlevel" title="Главная"><span>Главная</span></a></li>
    3.  <li id="item2"><a href="#" class="mainlevel" title="Контакты"><span>Контакты</span></a></li>
    4.  <li id="item3"><a href="#" class="mainlevel" title="Новости"><span>Новости</span></a></li>
    5. </ul>

    вместо привычного
    Код (CODE):
    1. <ul id="mainlevel">
    2.  <li><a href="#" class="mainlevel">Главная</a></li>
    3.  <li><a href="#" class="mainlevel" >Контакты</a></li>
    4.  <li><a href="#" class="mainlevel" >Новости</a></li>
    5. </ul>


    Дальше - дело техники, т.е. дело за CSS: скрываешь текст и выводишь картинки:
    Код (CODE):
    1. ul.mainlevel a span {
    2.  display:none
    3. }
    4. li#item1 a {
    5. display:block;
    6. width:30px;
    7. height:30px;
    8. background:url(картинка1);
    9. }
    10. li#item2 a {
    11. display:block;
    12. width:30px;
    13. height:30px;
    14. background:url(картинка2);
    15. }
    16. li#item3 a {
    17. display:block;
    18. width:30px;
    19. height:30px;
    20. background:url(картинка3);
    21. }


    Еще круче можно сделать с помощью Extended Menu
     
  2.  
  3. Offline

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

    Регистрация:
    27.03.2008
    Сообщения:
    11
    Симпатии:
    0
    Можно подробней? :[
     
    Последнее редактирование модератором: 05.04.2014
  4. vehichi
    Offline

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

    Регистрация:
    29.09.2007
    Сообщения:
    115
    Симпатии:
    2
    Пол:
    Мужской
    Есть компонент для такого случая - Thumbnail Menu Pro...
     
  5. Offline

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

    Регистрация:
    27.03.2008
    Сообщения:
    11
    Симпатии:
    0
    Очень хорошая вещь, спасибо. Но в версии 1.0.0 не настраивается border. Может подскажете где в коде поковыряться или версию где скачать новее? :)

    P/S/ Все, разобрался. Ручками в кодах полазил. Спасибо всем!
     
    Последнее редактирование: 17.12.2008
  6. Offline

    _voland_ специалист

    Регистрация:
    12.04.2008
    Сообщения:
    2 173
    Симпатии:
    102
    Пол:
    Мужской
    а ручками в css?
     
  7. Offline

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

    Регистрация:
    27.03.2008
    Сообщения:
    11
    Симпатии:
    0
    Дело в том, что для данного модуля свойство border прописано в php модуля. там стоит жестко - border 1px

    Как это изменить через css?
     
  8. Offline

    _voland_ специалист

    Регистрация:
    12.04.2008
    Сообщения:
    2 173
    Симпатии:
    102
    Пол:
    Мужской
    Тогда переопределяем вывод в шаблоне через html\mod_menu\... (см ja_purity - как образец)
     
  9. infoman
    Offline

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

    Регистрация:
    28.08.2007
    Сообщения:
    575
    Симпатии:
    12
    Пол:
    Мужской
    joomla параноя была с кнопками картинками помоему :) там вообще весёленький разработчик
     
  10. liga
    Offline

    liga Пользователь

    Регистрация:
    21.10.2008
    Сообщения:
    495
    Симпатии:
    18
    Пол:
    Мужской
    Спасибо за информацию sourpuss, помогло, осталось только отступ слева убрать.
     
  11. Offline

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

    Регистрация:
    25.08.2008
    Сообщения:
    11
    Симпатии:
    0
    Пол:
    Мужской
    Вопрос: а где можно изменить этот шаблон вывода меню? У меня Joomla 1.5. перерыл, вроде, всё, что относится к mainmenu...но чего-то похожено не нашёл.

    Вот опробовал сделать как вы предлагаете с ExtendedMenu. Вроде, пока что получается [!]
    Но всё же хочется узнать как работать с родным mainmenu? :[

    P.S. Вот всё замечательно с EM в Лисе и Опере, только в кривом Осле опять поехал последний пункт... :'(
    головоломка на всю ночь :D
     
    Последнее редактирование: 03.05.2009
  12. Offline

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

    Регистрация:
    24.06.2009
    Сообщения:
    1
    Симпатии:
    0
    Пол:
    Мужской
    Как сделать чтоб в активной страничке пункт меню остался выделенным?

    Достопочтенные!

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

    Как мне сделать?

    Спасибо от джумчайника :[
     

    Вложения:

    • menu.jpg
      menu.jpg
      Размер файла:
      8.7 КБ
      Просмотров:
      51
  13. liga
    Offline

    liga Пользователь

    Регистрация:
    21.10.2008
    Сообщения:
    495
    Симпатии:
    18
    Пол:
    Мужской
    ZIGON, К каждой картине меню прописывать стиль a:active
     
  14. Offline

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

    Регистрация:
    19.08.2009
    Сообщения:
    3
    Симпатии:
    0
    Всем привет. Почитал - спасибо, ценные советы. Решил попробовать сам, и тут же затык)
    Начинаю с начала. Есть так называемое главное меню, выводится в поле user3, меню горизонтальное, сразу под графической шапкой страницы. Выводятся скучные ГЛАВНАЯ / ПРОДУКЦИЯ и тд :D Решил заменить на красивые (на мой взгляд) иконки. И тырк тырк.. понял что "приплыл". Через стандартный модуль mod_mainmenu вроде получилось, но наткнулся на то, что и старые пункты меню остались. Убираться не хотят. пошерстил немного поиск и нашел эту тему. в цсс добавил код:
    Код (PHP):
    1. ul.mainlevel a span {
    2.        display:none
    3.       }
    4.       li#item1 a {
    5.      display:block;
    6.       width:30px;
    7.       height:30px;
    8.       background:url(картинка1);
    9.       }
    10.       li#item2 a {
    11.      display:block;
    12.       width:30px;
    13.       height:30px;
    14.       background:url(картинка2);
    15.       }
    16.       li#item3 a {
    17.      display:block;
    18.       width:30px;
    19.       height:30px;
    20.       background:url('../images/stories/date(2).png');
    21.       }

    В index.php добавил код

    Код (PHP):
    1. <ul id="mainlevel">
    2.        <li><a href="/format/index.php/2009-08-07-19-10-56" class="mainlevel">Glavnaja</a></li>
    3.        <li><a href="#" class="mainlevel" >Contacts</a></li>
    4.        <li><a href="/format/index.php/2009-08-19-05-44-56" class="mainlevel" >Calendar</a></li>
    5.       </ul>
    6.       <jdoc:include type="modules" name="user3" />

    Публикацию меню в модуль user3 просто отключил.
    И получил на выходе фигу ) Вижу только 3 ссылки, причем одна под другой. и никаких картинок.
    Помогите?
     
  15. Offline

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

    Регистрация:
    19.08.2009
    Сообщения:
    3
    Симпатии:
    0
    так :) с графикой разобрался. остались открытыми 2 вопроса:
    1. как вытянуть "меню" в одну строчку (просто выстроив пункты <li> в одно не прокатило (просьба не пинать за верстку, ну начинаю я.. :) );
    2. можно ли сделать вывод всё таки в секцию user3 или смысла нету?
     
  16. Offline

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

    Регистрация:
    29.10.2007
    Сообщения:
    7
    Симпатии:
    0
    Пол:
    Женский
    Подскажите плиз...... как компонент Thumbnail Menu Pro привязать только к главному меню....
    а остальные менюшки чтобы стандартно выводились....


    Заранее спасибо за ответ!!!!!11
     
  17. Offline

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

    Регистрация:
    26.03.2010
    Сообщения:
    2
    Симпатии:
    0
    Пол:
    Мужской
    Попробуйте использовать не меню, а механизм баннеров. все выводится и очень просто.
    На некоторых конторах, отлавливают баннеры и блокируют. Все из-за того, что хранятся они в images\banners\. Покопавшись немного в modules\mod_banners\helper.php вы сможете решить эту проблему.
     
  18. Offline

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

    Регистрация:
    05.06.2010
    Сообщения:
    8
    Симпатии:
    0
    Пол:
    Мужской

    Интересует тот же вопрос. Куда писать css ясно, а где конкретно и что менять в mod_mainmenu не понятно...
     
  19. Ripley
    Offline

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

    Регистрация:
    24.05.2009
    Сообщения:
    173
    Симпатии:
    4
    Пол:
    Мужской
    Тема, конечно, старая, но...
    Бесплатный компонент Ninja Simple Icon Menu более прост в настройке и способен удовлетворить большинство людей, создающих темы, с названиями, вроде "Как сделать чтобы в меню вместо текста вставить картинки!"
    Базовые настройки позволяют:
    • Задавать ширину и высоту изображения (необходимо проставить данные ваших изображений - модуль способен подгонять их под нужный размер но делает это не очень... в общем, сделать то, что нужно сразу в фотошопе гораздо проще и краше.);
    • Задавать само изображение и альтернативное изображение, появляющееся при наведении курсора (для возможности выбора своих изображений, их надо скопировать в папку модуля);
    • Отступ от верхнего пункта меню
    • Скрывать пункты меню от незарегистрированных пользователей.
    • Направление меню (горизонтальное, вертикальное).
    • Там еще кое что есть, но мне хватает с избытком того, что приведено выше.

    Для более серьезных изменений и тонкой настройки необходимо знать CSS и ковырять этим знанием соответствующий файл модуля (или работать в обнимку с хорошим самоучителем). Благо, там все просто. В основном там зашиты даные об отступах и положении всего модуля и его элементов относительно окружающего пространства.
    P.S.: По крайней мере php при работе с данным компонентом выпадает из списка необходимых дисциплин для подавляющего большинства подобных проектов. Быть может, меня сейчас расстреляют Отцы, за то,что я несу какую то ересь,но мне сей вариант помог.
    P.P.S.: Проблем с шрифтами больше нет - хоть из розовых слоников слова составляйте, хоть из Myriad Pro. :D
    P.P.P.S: Личный опыт: Что бы узнать ссылку на нужный материал или модуль, создайте в неопубликованном меню пункт, ведущий к нужному компоненту или материалу и возьмите ссылку оттуда. Не в коем случае не удаляйте пункт меню - не будет работать ссылка. Как вариант вы можете создать в задействованном меню неактивный пункт - ссылка есть, пользователь не видит лишний пункт меню.
     
    Последнее редактирование: 08.02.2011
  20. Offline

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

    Регистрация:
    13.03.2010
    Сообщения:
    452
    Симпатии:
    18
    Пол:
    Женский
    Вот читаю и понимаю, что все-таки в css надо прописывать ссылки, аналогично, как в html. А, как сделать меню из картинок, чтобы стандартно создавался пункт меню? Т.е., в самом шаблоне ссылки на пункты меню не прописывать? Предположим, в шапке есть несколько картинок в разных позициях и хочу, чтобы при нажатии какой-либо картинки выходит определенный пункт меню. Как создать это средствами html, понятно, а можно это как-то подцепить к стандартному модулю меню joomla? :[
     

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

Загрузка...