Подсветка активного пункта графического меню

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

  1. Offline

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

    Регистрация:
    02.01.2013
    Сообщения:
    34
    Симпатии:
    0
    Пол:
    Женский
    Здравствуйте!

    Как прописать подсветку активного пункта графического меню как на картинке?
     

    Вложения:

  2.  
  3. shurikkan
    Offline

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

    Регистрация:
    01.09.2011
    Сообщения:
    1 856
    Симпатии:
    162
    Пол:
    Мужской
    ИТОГО (выжимка из долгого обсасывания темы сообществом...)

    Как установить выделение текущего пункта меню (меню картинками):

    В примере используется меню, состоящее из картинок. текущий пункт меню - чёрно-белая картинка.

    1). Объединяем иконки всех пунктов меню в единую картинку.

    2). Помещаем на картинку с обычными иконками картинки текущих пунктов меню (чёрно-белые копии пунктов меню) и приводим общую картинку к такому виду: (см.вложение)

    3). Закачиваем картинку на сервер. Запоминаем/копируем адрес картинки на сервере.

    4). Для присвоение пунктам меню фона используем адрес картинки на сервере в параметре background. Адрес картинки фона для всех пунктов меню будет одинаковым:
    Код (html):
    1. background: url(адрес-картинки-на-сервере) no-repeat смещение-по-вертикали смешение-по-горизонтали;

    Различаться будет только смещение картинки фона по горизонтали и вертикали, относительно пункта меню.
    5). Для присвоения фона текущему пункту меню:
    5.1). Определяем с помощью Firebug какой класс добавляется к текущему пункту меню.
    5.2). Используем li.класс для установки фона background для присвоения фона только текущему пункту меню
    5.2). Используем сдвиг изображения картинки фона до того места в котором расположена чёрно-белая копия фона текущего пункта меню.
     

    Вложения:

    • icons.gif
      icons.gif
      Размер файла:
      2.6 КБ
      Просмотров:
      3
  4. Offline

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

    Регистрация:
    02.01.2013
    Сообщения:
    34
    Симпатии:
    0
    Пол:
    Женский
    Для присвоения фона текущему пункту меню:
    1 Определяем с помощью Firebug какой класс добавляется к текущему пункту меню.
    2 Используем li.класс для установки фона background для присвоения фона только текущему пункту меню
    3 Используем сдвиг изображения картинки фона до того места в котором расположена чёрно-белая копия фона текущего пункта меню

    Здравствуйте!

    Я сделала картинку, закачала в imeges скопировала адрес

    я не поняла как в css прописать

    у меня li текущего меню

    Код (CODE):
    1. li#current.active.item100


    в сss графического бокового меню у меня прописано

    Код (CODE):
    1. /* WR-Team.ru :: Правое меню отдых и здоровье */
    2. .moduletable-right.rest ul li {
    3.     float: left;
    4. }
    5. .moduletable-right.rest ul li a {
    6.     display: block;
    7.     width: 153px;
    8.     height: 40px;
    9.     padding: 72px 0 0;
    10.     margin: 0 5px 0 0;
    11.     color: #fff;
    12.     text-decoration: none;
    13.     text-align: center;
    14.     line-height: 5px;
    15.     border-bottom: none;
    16. }
    17. .moduletable-right.rest  li a span {
    18.     display: none;
    19. }
    20. .moduletable-right.rest  li a:hover {
    21.    color: #ccc !important;
    22. }
    23. .moduletable-right.rest ul li.item100 a {
    24.     background: url('../../../images/stories/item100.png') no-repeat 0 0;
    25. }
    26. .moduletable-right.rest ul li.item99 a {
    27.     background: url('../../../images/stories/item99.png') no-repeat 0 0;
    28. }


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

    Код (CODE):
    1. /* WR-Team.ru :: Правое меню отдых и здоровье */
    2. .moduletable-right.rest ul li {
    3.     float: left;
    4. }
    5. .moduletable-right.rest ul li a {
    6.     display: block;
    7.     width: 153px;
    8.     height: 40px;
    9.     padding: 72px 0 0;
    10.     margin: 0 5px 0 0;
    11.     color: #fff;
    12.     text-decoration: none;
    13.     text-align: center;
    14.     line-height: 5px;
    15.     border-bottom: none;
    16. }
    17. .moduletable-right.rest  li a span {
    18.     display: none;
    19. }
    20. .moduletable-right.rest  li a:hover {
    21.    color: #ccc !important;
    22. }
    23. .moduletable-right.rest ul li.item100 a {
    24.     background: url('../../../images/stories/item100.png') no-repeat 0 0;
    25. }
    26. .moduletable-right.rest ul li.active item100 a {
    27.     background: url(images/item1.png') no-repeat 0 160px;
    28. }
    29. .moduletable-right.rest ul li.item99 a {
    30.     background: url('../../../images/stories/item99.png') no-repeat 0 0;
    31. }
     
  5. draff
    Offline

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

    Регистрация:
    17.01.2011
    Сообщения:
    6 037
    Симпатии:
    518
    Пол:
    Мужской
    Inessa,
    Да не получится так как ты хочешь,по рецепту shurikkan,
    Тебе нужно для каждого пункта меню отдельный фон при пункте меню current
     
  6. Offline

    TroL специалист

    Регистрация:
    01.03.2011
    Сообщения:
    502
    Симпатии:
    34
    Пол:
    Мужской
    если пункт меню состоит из фигурной картинки а не всего блока (если нет то советую так и сделать), то в ксс пропишите. думаю должно сработать

    Код (CODE):
    1. moduletable-right.rest ul li {
    2.     float: left;
    3.   [U][B] background:цвет фона[/B][/U]
    4. }
    5.  
    6. moduletable-right.rest ul li#current.active{
    7.   [U][B] background:цвет фона активного фона меню[/B][/U]
    8. }
    9.  
    10.  
    11. .moduletable-right.rest ul li a {
    12.     display: block;
    13.     width: 153px;
    14.     height: 40px;
    15.     padding: 72px 0 0;
    16.     margin: 0 5px 0 0;
    17.     color: #fff;
    18.     text-decoration: none;
    19.     text-align: center;
    20.     line-height: 5px;
    21.     border-bottom: none;
    22. }
    23. .moduletable-right.rest  li a span {
    24.     display: none;
    25. }
    26. .moduletable-right.rest  li a:hover {
    27.    color: #ccc !important;
    28. }
    29. [STRIKE].moduletable-right.rest ul li.item100 a {
    30.     background: url('../../../images/stories/item100.png') no-repeat 0 0;
    31. }
    32. .moduletable-right.rest ul li.item99 a {
    33.     background: url('../../../images/stories/item99.png') no-repeat 0 0;
    34. }[/STRIKE]


    Что то зачеркнул, может быть зря, а то что подчеркнуто надо добавить
     
  7. Offline

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

    Регистрация:
    02.01.2013
    Сообщения:
    34
    Симпатии:
    0
    Пол:
    Женский
     
    Последнее редактирование: 05.03.2013
  8. shurikkan
    Offline

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

    Регистрация:
    01.09.2011
    Сообщения:
    1 856
    Симпатии:
    162
    Пол:
    Мужской
    Всё получится...
    Инесса, логин-пароль давай, а то мы год с этой темой детской возиться будем.

    У неё из всего блока. И чего велосипед придумывать?

    естественно не получилось - читай что он пишет! "если ... состоит ... НЕ из всего блока". у тебя же картинки с фоном цельные.
     
  9. Offline

    TroL специалист

    Регистрация:
    01.03.2011
    Сообщения:
    502
    Симпатии:
    34
    Пол:
    Мужской
    и все таки я советую поправит картинки и сделать пнг без фона.
    Если сайт корпоративный то часто бывает что сайт делают разные программисты.
    я вот на своей работе столкнулся с тем что на сайте фирмы есть подобное меню (изображение, фон и текст в одной картинки) и исходники потерялись, изображения были на разной высоте относительно границы, текст разных шрифтов. и что бы добавить новый пункт меню мне приходилось брать готовый пункт меню затирать лишнее и зарисовывать. потом сделал как надо и фон сделал заливкой, текст - текстом, а изображение отдельной частью. и анимацию меню сделал по приятней.
    Так что совет из личного опыта
     
  10. Offline

    TroL специалист

    Регистрация:
    01.03.2011
    Сообщения:
    502
    Симпатии:
    34
    Пол:
    Мужской
    поэтому Inessa займитесь самими картинками. а уж изменения фона реализовать будет просто + можно будет добавить анимацию
     
  11. Offline

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

    Регистрация:
    02.01.2013
    Сообщения:
    34
    Симпатии:
    0
    Пол:
    Женский
    TroL,

    Картинки меню уже на сайте, осталось дело за подсветкой. И для меня это сложно пока. А анимация вообще неизвестная тема

    У меня опыт нулевой, мне еще изучать изучать. Если бы не помощь shurikkan я наверное не справилась с графикой. Мне сайт достался с непонятным меню и начинкой, я по мере обучения меняю все. Да еще при верстке не был установлен мультик.
     
  12. Offline

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

    Регистрация:
    02.01.2013
    Сообщения:
    34
    Симпатии:
    0
    Пол:
    Женский
    Я вчера прописала код background и у меня текущий пункт стал белый, я никак не соображу как смещение правильно прописать, посчитать

    Код (CODE):
    1. /* WR-Team.ru :: Правое меню отдых и здоровье */
    2. .moduletable-right.rest ul li {
    3.     float: left;
    4. }
    5. .moduletable-right.rest ul li a {
    6.     display: block;
    7.     width: 153px;
    8.     height: 40px;
    9.     padding: 72px 0 0;
    10.     margin: 0 5px 0 0;
    11.     color: #fff;
    12.     text-decoration: none;
    13.     text-align: center;
    14.     line-height: 5px;
    15.     border-bottom: none;
    16. }
    17. .moduletable-right.rest  li a span {
    18.     display: none;
    19. }
    20. .moduletable-right.rest  li a:hover {
    21.    color: #ccc !important;
    22. }
    23. .moduletable-right.rest ul li.item100 a {
    24.     background: url('../../../images/stories/item100.png') no-repeat 0 0;
    25. }
    26. .moduletable-right.rest ul li.active.item100 a{
    27.    background: url(images/stories/icons.png) no-repeat 230px 994px;
    28. }
    29. .moduletable-right.rest ul li.item99 a {
    30.     background: url('../../../images/stories/item99.png') no-repeat 0 0;
    31. }
    32. .moduletable-right.rest ul li.active.item99 a {
    33. background: url(images/stories/icons.png) no-repeat 0 170px;
    34. }
     
  13. Offline

    TroL специалист

    Регистрация:
    01.03.2011
    Сообщения:
    502
    Симпатии:
    34
    Пол:
    Мужской
    А ссылка на сайт?!
    Здесь дело не в сайто-строительстве. здесь надо взять картинки, скачать с сайта картинки или найти psd или векторные исходники, и сделать их без фона. просто центральная картинка и прозрачный фон. тогда будет проще все настроить, и проще в будущем
     
  14. Offline

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

    Регистрация:
    02.01.2013
    Сообщения:
    34
    Симпатии:
    0
    Пол:
    Женский
    Кнопки - картинки я уже делала, исходники есть. Я их обесцветила и вместе с цветными кнопками поместила в одну картинку как говорилось вышеэ. теперь мне нужно сделать смещение, и в этом сложность
     
  15. shurikkan
    Offline

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

    Регистрация:
    01.09.2011
    Сообщения:
    1 856
    Симпатии:
    162
    Пол:
    Мужской
    Охх......
    В чём проблема то? Верхний левый угол картинки фона соответствует верхнему левому углу элемента, которому присваивается этот фон.
    Код (html):
    1. background: url('../images/tro-lo-lo.png') 120px 50px no-repeat;

    url(../..) - адрес картинки
    120px - сместить картинку на 120px по оси X (отступ слева, двигаем картинку вправо)
    50px - сместить картинку на 50px по оси Y (отступ сверху, двигаем картинку вниз)
     
  16. Offline

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

    Регистрация:
    02.01.2013
    Сообщения:
    34
    Симпатии:
    0
    Пол:
    Женский
    Бегу пробывать.
     
  17. Offline

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

    Регистрация:
    02.01.2013
    Сообщения:
    34
    Симпатии:
    0
    Пол:
    Женский
    картина таже белый фон
     
  18. Offline

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

    Регистрация:
    02.01.2013
    Сообщения:
    34
    Симпатии:
    0
    Пол:
    Женский
    может я что то не так прописала?
    Я и так и так а у меня белый фон и все
     
  19. shurikkan
    Offline

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

    Регистрация:
    01.09.2011
    Сообщения:
    1 856
    Симпатии:
    162
    Пол:
    Мужской
    ну давай звони... я снова с гарнитурой, швы на щеке зажили, говорить могу))

    P.S.: и не надо сообщениями флудить! :(
     
  20. Offline

    TroL специалист

    Регистрация:
    01.03.2011
    Сообщения:
    502
    Симпатии:
    34
    Пол:
    Мужской
    Дайте ссылку на сайт. или попробуйте это
    пункт меню(li) к нему без пробела пишете ":hover" - это эфект при наведении
    и в него background:red; должно окраситься в красный

    li:hover{
    background:red;
    }
     
  21. draff
    Offline

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

    Регистрация:
    17.01.2011
    Сообщения:
    6 037
    Симпатии:
    518
    Пол:
    Мужской
    Оффтопик (не в тему) - жми сюда!
     

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

Загрузка...