Иконки в меню при наведении анимированые и для каждого пункта своя

Тема в разделе "Вопросы по работе с меню", создана пользователем Аня, 01.06.2013.

  1. Аня
    Offline

    Аня Пользователь

    Регистрация:
    07.04.2008
    Сообщения:
    177
    Симпатии:
    11
    Пол:
    Женский
    Добрый день, подскажите пожалуйста все темы пересмотрела, что-то подобного не нашла. Мне необходимо сделать меню с уникальными картинками, но помимо этого, при наведении на пункт меню изображение должно быть анимированным и так же у каждого пункта меню свою картинка. Это можно реализовать стандартными способами или необходимо для каждого пункта создавать свой вид в css?
     
  2.  
  3. OlegM
    Offline

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

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    А что под подразумевается под этими способами?

    Стандартно у каждого пункта (тег LI) есть свой уникальный класс CSS, с их помощью и делается... в CSS. Также в настройках пункта меню можно задать CSS-класс для ссылки - тега А.
     
  4. woojin
    Offline

    woojin Местный Команда форума

    Регистрация:
    31.05.2009
    Сообщения:
    3 209
    Симпатии:
    335
    Пол:
    Мужской
    почти для каждого
    как сказал OlegM, существует определённый класс (для всех разный или с добавлением)
    для всех пунктов прописывается что то общее
    а потом для каждого отдельно прописывается обычная картинка и картинка при наведении
    анимированые картинки это .GIF
     
  5. Аня
    Offline

    Аня Пользователь

    Регистрация:
    07.04.2008
    Сообщения:
    177
    Симпатии:
    11
    Пол:
    Женский
    Спасибки я так и поняла, сейчас как раз картинки доделываю и буду пробовать внедрить. Единственно получается к каждому тегу li нужно будет присвоить ID пункта меню? Или нет? Вот здесь немного застопорилась
     
  6. woojin
    Offline

    woojin Местный Команда форума

    Регистрация:
    31.05.2009
    Сообщения:
    3 209
    Симпатии:
    335
    Пол:
    Мужской
    к примеру общий класс
    Код (html):
    1. .pic {
    2.  тут какие то общие действия с картинками
    3. }

    и дополнительные классы для каждого пункта меню
    Код (html):
    1. .p1 {
    2.  background-image: url (тут адрес первой картинки)
    3. }
    4. .p2 {
    5.  background-image: url (тут адрес второй картинки)
    6. }
    7. .p3 {
    8.  background-image: url (тут адрес третьей картинки)
    9. }


    окончательный html твоего меню будет выглядеть так:
    Код (html):
    1. <ul>
    2.    <li class="pic p1">первый пункт</li>
    3.    <li class="pic p2">второй пункт</li>
    4.    <li class="pic p3">третий пункт</li>


    т.е. классы могут, грубо говоря, "суммироваться"
    или дополнять друг друга
     
  7. draff
    Offline

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

    Регистрация:
    17.01.2011
    Сообщения:
    6 041
    Симпатии:
    518
    Пол:
    Мужской
    В J 2.5 картинку для пункта меню можно указать в параметрах пункта меню.
    Может и в J 1.7 так.
     
  8. OlegM
    Offline

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

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    Читаем внимательно
    Поэтому смотрим исходный код меню (html-код страницы с меню сайта), смотрим настройки пунктов меню - принимаем решение, как делать.
     
    Аня нравится это.
  9. Аня
    Offline

    Аня Пользователь

    Регистрация:
    07.04.2008
    Сообщения:
    177
    Симпатии:
    11
    Пол:
    Женский
    Спасибо большое, буду сегодня реализовывать.
     

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

Загрузка...