Активный пункт меню

Тема в разделе "Изменение шаблона (кастомизация)", создана пользователем hitcourier, 21.10.2007.

  1. hitcourier
    Offline

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

    Регистрация:
    21.10.2007
    Сообщения:
    18
    Симпатии:
    0
    Как сделать, чтобы активный пункт меню не являлся ссылкой. Кто-нибудь пытался решить эту проблему.
    Странно, почему это не сделано по умолчанию.
     
  2.  
  3. hitcourier
    Offline

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

    Регистрация:
    21.10.2007
    Сообщения:
    18
    Симпатии:
    0
    Ответ: Активный пункт меню

    Неужели никто не ковырял?
     
  4. mitrich
    Offline

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

    Регистрация:
    06.10.2006
    Сообщения:
    21
    Симпатии:
    2
    Ответ: Активный пункт меню

    А мой модуль меню умееет ;)
    http://joomlaforum.ru/index.php/topic,20351.0.html
     
  5. segun77
    Offline

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

    Регистрация:
    25.06.2008
    Сообщения:
    28
    Симпатии:
    0
    Ответ: Активный пункт меню

    Использую вот такую конструкцию для отображения горизонтального меню (выбран Flat list) картинки подгружаются правильно, а вот активное меню не отображается вообще:
    Код (CODE):
    1. div#navmenu li:hover,
    2. div#navmenu li.iehover {
    3.     background: url(../images/style/menu_btn_lt.png) no-repeat left;
    4.     }
    5. div#navmenu li:hover a,
    6. div#navmenu li.iehover a {
    7.     background: url(../images/style/menu_btn_rt.png) no-repeat right;
    8.     color: #adafb3;
    9.     }
    10. div#navmenu li.active {
    11.     background: url(../images/style/menu_btn_lt.png) no-repeat left;
    12.     }
    13. div#navmenu li.active a {
    14.     background: url(../images/style/menu_btn_rt.png) no-repeat  right;
    15.     color: #0099FF;
    16.     }

    Посмотрел html код, там пункт меню выбран активным, т.е. есть active_menu, но на сайте никак не отражается.
    А вот в вертикальном меню все работает.
    Сайт только выложил на сервер (iphoneideas[.]ru)еще ничего нет там, кроме кривого шаблона. Подскажите, плз как обойти сию проблему.
     
    Последнее редактирование модератором: 17.07.2008
  6. Offline

    _voland_ специалист

    Регистрация:
    12.04.2008
    Сообщения:
    2 173
    Симпатии:
    102
    Пол:
    Мужской
    Ответ: Активный пункт меню

    хакать модуль меню
     
  7. segun77
    Offline

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

    Регистрация:
    25.06.2008
    Сообщения:
    28
    Симпатии:
    0
    Ответ: Активный пункт меню

    Я не настолько продвинут в этом вопросе.
    Может подскажете что конкретно изменить?
     
  8. Fanamura
    Offline

    Fanamura Доброта

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

    А модуль от mitrichа никто не замечает типа?
     
  9. segun77
    Offline

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

    Регистрация:
    25.06.2008
    Сообщения:
    28
    Симпатии:
    0
    Ответ: Активный пункт меню

    Не помогает... Поковырял его, все тоже самое. Настроек конечно гораздо больше, но вот как привязать к активному пункту картинку, я так и не понял. Код вроде правильный, но вот где собака порылась я не въезжаю.?:\

    Добавлено через 7 минут
    единственное, что я добился это кривое отображение активной ссылки (изменение цвета надписи на тот, который я задал для активной ссылки), самой картинки нет, а надпись вверх поднялась на полсантиметра...

    Добавлено через 1 час 53 минуты
    Частично решил проблему. Кто столкнется с таким шаблоном где есть верхнее горизонтальное меню и боковое вертикальное, расскажу как я добился хотя бы изменения цвета надписи активного меню. Да, забыл сказать использовал шаблон js_jamba (от joomlashack). Так вот, даже в оригинале шаблона нет подсветки активного пункта меню, хотя в CSS упоминание о нем есть:
    Код (CODE):
    1. div#navmenu li.active {
    2. background: url(../images/style/menu_btn_lt.png) no-repeat left;
    3. }
    4. div#navmenu li.active a {
    5. background: url(../images/style/menu_btn_rt.png) no-repeat right;
    6. color: #0099FF;
    7. }

    но не работает...

    Боковое меню работает на ура.
    Так вот я скопировал строки отвечающие за активный пункт бокового меню:
    Код (CODE):
    1. #rightcol a#active_menu.mainlevel,
    2. #rightcol a#active_menu.mainlevel:hover,
    3. #rightcol a#active_menu-sidenav.mainlevel-sidenav,
    4. #rightcol a#active_menu.mainlevel-sidenav:hover {
    5.     background: url(../images/style/leftnav_active.png) no-repeat left center;
    6.     color: #fff;
    7.     }

    удалил ненужные строки и заменил контейнер #rightcol на тот, в котором расположено мое горизонтальное меню #navmenu (ну и цвет текста заменил) и вот что получилось:
    Код (CODE):
    1. #navmenu a#active_menu.mainlevel,
    2. #navmenu a#active_menu.mainlevel-sidenav:hover {
    3.     color: #335973;
    4.     }

    Самому до сих пор не ясен один момент (#navmenu a#active_menu.mainlevel-sidenav:hover)
    но факт - работает как положено :)

    Если кому поможет, буду очень рад :)
    Для тех кто тут давно - не пинайте, если криво сделал :[
     
    Последнее редактирование модератором: 17.07.2008
  10. AmmiAk
    Offline

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

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

    Так что в стилевом файле описываешь, "active_menu" или же просто "active"? Какой ссылочный селектор в нем за чем следует? Чтобы оформление ссылки было полным, важно строгое соблюдение порядка следования ее селекторов. Описание селектора активной ссылки должно быть последним в этом ряду - это абсолютно точно.
     
  11. segun77
    Offline

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

    Регистрация:
    25.06.2008
    Сообщения:
    28
    Симпатии:
    0
    Ответ: Активный пункт меню

    Вот кусок сгенерированного кода с двумя пунктами меню, один активный:
    Код (CODE):
    1. <div id="header-wrap">
    2.     <div class="menubar">
    3.         <div id="navmenu">
    4.                         <ul id="mainlevel">
    5. <li><a href="http://iphoneideas.ru/index.php?option=com_frontpage&amp;Itemid=1" class="mainlevel" id="active_menu">Новости</a>
    6. </li>
    7. <li><a href="http://iphoneideas.ru/index.php?option=com_fireboard&amp;Itemid=35" class="mainlevel">Форум</a>
    8. </li>
    9. </ul>                  
    10. </div><!--//navmenu-->

    В коде горизонтального меню я ничего не трогал.

    кусок css, который отвечает за активный пункт (заменил только картинки), хотя, как выяснилось позже, в шаблоне не работало это изначально:
    Код (CODE):
    1. div#navmenu li.active {
    2.    background: url(../images/style/menu_btn_lt.png) no-repeat left;
    3. }
    4. div#navmenu li.active a {
    5.    background: url(../images/style/menu_btn_rt.png) no-repeat right; color: #0099FF;
    6. }

    Несколькими постами выше есть вся комбинация, в смысле еще и с указателем мыши над ссылкой.
    В стилевом файле я нашел .active только в вышеуказанной связке. В индексе его упоминания не было. Но зачем, спрашивается, этот класс задан в стилевом файле, если его нет в индексе? Шаблон вроде солидно сделан... Поэтому я решил не ломать голову (хотя крыша итак уже улетела :pilot:) и взял из вертикального меню строки для активного пункта.
    Если необходима дополнительная информация, чтобы разобраться, могу прислать файлы целиком.
     
    Последнее редактирование модератором: 19.07.2008
  12. AmmiAk
    Offline

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

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

    segun77, еще раз, если ты не обращал особого внимания на мои комментарии к своим постам - любые листинги в сообщениях приводятся с использованием тегов "CODE" ("#")! с|:L

    Все три сообщения с приведением фрагментов листинга стилевого файла шаблона - сплошной неупорядоченный поток сознания без логики и понимания синтаксиса CSS. Проще говоря, увидел, как нечто работает у другого, скопировал, вставил, внес, как тебе показалось, необходимые правки, а о том, чтобы хорошо проанализировать, что происходит именно в твоей разметке станицы сайиа и как соответствующим образом ее застилизовать при помощи средств CSS, не позаботился.

    "Если нечто не работает так, как нужно, значит, тобой в нем была допущена ошибка. Синтаксическая или семантическая, не имеет значения - любая ошибка должна быть обнаружена и исправлена." :O

    Имея на входе такой код:
    Код (CODE):
    1. <div id="navmenu">
    2.     <ul id="mainlevel">
    3.         <li><a href="http://iphoneideas.ru/index.php?option=com_frontpage&amp;Itemid=1"
    4.             class="mainlevel" id="active_menu">Новости</a></li>
    5.         <li><a href="http://iphoneideas.ru/index.php?option=com_fireboard&amp;Itemid=35"
    6.             class="mainlevel">Форум</a></li>
    7.     </ul>
    8. </div>

    Стилизацию ссылок, скажем, необходимо оформлять следующим образом:
    Код (CODE):
    1. #navmenu a.mainlevel:link, #navmenu a.mainlevel:visited {
    2.   background: url(../images/linkBg.gif) no-repeat left center;
    3.   color: #659fde;
    4. }
    5.  
    6. #navmenu a.mainlevel:active, #navmenu a.mainlevel:hover {
    7.   background: #ededed url(../images/linkActiveBg.gif) no-repeat left center;
    8.   color: #d34807;
    9. }
    10.  
    11. #navmenu a#active_menu {
    12.   background: #ededed url(../images/linkActiveBg.gif) no-repeat left center;
    13.   color: #d34807;
    14. }

    Описание свойств первого селектора соответственно относится к обычному и посещенному состоянию ссылок элементов списка контейнера с идентификатором "#navmenu", второго - к состоянию, когда над ними расположен курсор или было осуществлено нажатие, третьего - к активному состоянию, подсветке в меню пункта, соответствующего разделу сайта, в котором в данный момент находится пользователь.
    Именно таким, как показано выше, должно быть следование друг за другом ссылочных селекторов.
     
    Последнее редактирование: 19.07.2008
  13. Offline

    witcatchers-com Недавно здесь

    Регистрация:
    31.05.2010
    Сообщения:
    62
    Симпатии:
    1
    Пол:
    Мужской
    Re: Ответ: Активный пункт меню

    А если меню выглядит так?:
    Код (CODE):
    1. <div class="art-BlockContent">
    2.             <div class="art-BlockContent-body">
    3.        
    4.         <ul class="menu"><li class="item9"><a href="/index.php?option=com_content&amp;view=article&amp;id=3&amp;Itemid=9"><span> ТЕКСТ ССЫЛКИ 1 </span></a></li><li id="current" class="active item10"><a href="/index.php?option=com_content&amp;view=article&amp;id=4&amp;Itemid=10"><span> ТЕКСТ ССЫЛКИ 2</span></a></li></ul>
    5.                 <div class="cleared"></div>
    6.             </div>
    7.         </div>


    Я прописал в CSS следующее:
    Код (CODE):
    1. .art-BlockContent-body a:link
    2. {
    3.     color: #0C7792;
    4. font-family: "Trebuchet MS", Arial, Helvetica, Sans-Serif;
    5. text-decoration: underline;
    6. }
    7.  
    8. .art-BlockContent-body a:visited, .art-BlockContent-body a.visited
    9. {
    10.     color: #858585;
    11. font-family: "Trebuchet MS", Arial, Helvetica, Sans-Serif;
    12. text-decoration: underline;
    13. }
    14.  
    15. .art-BlockContent-body a:hover, .art-BlockContent-body a.hover
    16. {
    17.     color: #000000;
    18. font-family: "Trebuchet MS", Arial, Helvetica, Sans-Serif;
    19. text-decoration: none;
    20. }
    21.  
    22. .art-BlockContent-body a:active, .art-BlockContent-body a.active
    23. {
    24.     color: #000000;
    25. font-family: "Trebuchet MS", Arial, Helvetica, Sans-Serif;
    26. text-decoration: none;
    27. }


    И на выходе имею одинаковый стиль для активного и неактивного пункта меню. Почему?
     
  14. Offline

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

    Регистрация:
    30.03.2011
    Сообщения:
    1
    Симпатии:
    0
    Пол:
    Мужской
    2 witcatchers-com
    у тебя:
    Код (CODE):
    1. .art-BlockContent-body a:link { color: #0C7792; font-family: "Trebuchet MS", Arial, Helvetica, Sans-Serif; text-decoration: underline; }



    сделай:
    Код (CODE):
    1. .art-BlockContent-body ul.menu li a:link { color: #0C7792; font-family: "Trebuchet MS", Arial, Helvetica, Sans-Serif; text-decoration: underline; }
     
    Последнее редактирование: 30.03.2011
  15. Offline

    witcatchers-com Недавно здесь

    Регистрация:
    31.05.2010
    Сообщения:
    62
    Симпатии:
    1
    Пол:
    Мужской
    не помогло.
     
  16. Offline

    witcatchers-com Недавно здесь

    Регистрация:
    31.05.2010
    Сообщения:
    62
    Симпатии:
    1
    Пол:
    Мужской
    может где-то ещё в настройках модуля вывода статей надо что-то крутить? но там я ничего похоже не находил... у меня ArtCats
     
  17. Offline

    witcatchers-com Недавно здесь

    Регистрация:
    31.05.2010
    Сообщения:
    62
    Симпатии:
    1
    Пол:
    Мужской
    Вот что новое открылось мне - в стилях я нашёл где прописать параметры именно для активного пункта меню. Но вот что интересно - он работает только при нажатии на ссылку, когда статья загружается, все пункты снова становятся не активными
     
  18. Offline

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

    Регистрация:
    04.12.2011
    Сообщения:
    3
    Симпатии:
    0
    Пол:
    Мужской
    Re: Ответ: Активный пункт меню

    Делаю шаблон с нуля. Не могу побороть код и получить выделенный пункт меню, хотя перелопатил много материала.
    CSS:
    Код (html):
    1. body, html {
    2. margin:0px;
    3. padding:0px;
    4. text-align:center;
    5. background: #ccc;
    6. }
    7.  
    8.  
    9. #container
    10. {
    11.     min-width: 800px;
    12.     min-height: 500px;
    13.     width:80%;
    14.     padding:10px;
    15.     margin:0 auto;
    16.     text-align:left;
    17.     background: white;
    18. }
    19.  
    20. #top_bar
    21. {
    22.    
    23.     background-image: url(../images/personal2.png);            
    24.     background-position: bottom;
    25.     margin-top: 15px;
    26.     width: 100%;
    27.     height: 200px;
    28.         float: left;
    29. }
    30.  
    31. #top_logo
    32. {
    33.     display: block;
    34.     padding-left: 10px;
    35.     height: 146px;
    36.     width: 541px;
    37. }
    38.  
    39. #top_text
    40. {
    41.  
    42. }
    43.  
    44. #page
    45. {
    46.     padding: 10px;
    47.     margin: 0 0 0 270px;
    48.     min-height: 500px;
    49.     background: white;
    50.    
    51. }
    52.  
    53.  
    54.  
    55. #left_bar
    56. {
    57.     min-width: 150px;
    58.     width: 250px;
    59.     padding: 10px;
    60.    
    61.     background: white;
    62.     float: left;
    63. }
    64.  
    65. #lower_bar
    66. {
    67.     background-image: url(../images/tabs_back.png);     background-position: bottom;
    68.     width: 102%;
    69.     height: 50px;
    70.     margin: -1%;
    71. }
    72.  
    73. #border
    74. {
    75.     width: 5px;
    76.     height: 100%;
    77.     background: url(border.jpg);
    78.     float: left;
    79. }
    80.  
    81. #menu{
    82.  
    83.     padding: 0px;
    84.     margin: 0px;
    85.     list-style: none;
    86. }
    87.  
    88.  
    89. #menu li {
    90.    float: ;
    91. }
    92.  
    93.  
    94. #menu li a, menu li a:visited {
    95.    display: block;
    96.    padding: 5px;
    97.    margin-bottom: 1px;
    98.    color: #FAFAD2;
    99.    background-color: #4682B4;
    100. }
    101.  
    102. #menu a:hover {
    103.    color: #4682B4;
    104.    background-color: #FAFAD2;
    105. }
    106.  
    107. #menu li a:current {
    108.    color: black;
    109.    background: red;
    110. }

    index.php
    Код (PHP):
    1. <?php
    2.  
    3. // no direct access
    4. defined('_JEXEC') or die('Restricted access');
    5.  
    6. ?>
    7.  
    8. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    9.  
    10. <html xmlns="http://www.w3.org/1999/xhtml">
    11.  
    12. <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/bistamed1.0/css/style.css" type="text/css" />
    13. <link rel="icon" type="image/x-icon" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/favicon.ico" />
    14.  
    15.  
    16. <head>
    17.  
    18.     <jdoc:include type="head" />
    19.    
    20.    
    21.  
    22. </head>
    23.  
    24. <body>  
    25.  
    26.  
    27.  
    28. <div id = container>
    29.    
    30.  
    31. <div id = top_bar>
    32.  
    33.     <div id = "top_logo"><jdoc:include type="modules" name="top" />
    34.         <img src="templates/<?php echo $this->template ?>/images/bistamed_logo02.gif" border="0" />
    35.  
    36.     </div>
    37.  
    38. </div>
    39.  
    40. <div id = left_bar><jdoc:include type="modules" name="left" />
    41.    
    42.  
    43. <ul id="menu">
    44.         <jdoc:include type="modules" name="position-7" />
    45.        
    46.     </ul>
    47.  
    48. </div>
    49.  
    50.  
    51. <div id = page><jdoc:include type="component" />
    52.  
    53.  
    54.    
    55.  
    56.    
    57. </div>
    58.  
    59.  
    60. <div id = lower_bar><jdoc:include type="modules" name="footer" />
    61. ООО "Бистамед"  
    62. </div>
    63.  
    64.  
    65. </div>
    66.  
    67.  
    68. </body>
    69. </html>

    Понимаю, что где то надо задать ссылку в индекс.пхп на стиль с активной менюшкой, но не знаю как. Сам стиль работает, т.к. если создать статичную страницу и к одному пункту дать id = current, то он выделяется. Прошу помощи, что надо исправить, что бы все работало? Может как то на JS можно сделать? Спасибо
     
  19. Offline

    Айболит Недавно здесь

    Регистрация:
    30.10.2010
    Сообщения:
    43
    Симпатии:
    1
    Пол:
    Мужской
    можно ли сделать меню выпадающим списком с выбором.
    Желательно для категорий Виртумат

    ВЫглядит примерно так:

    1) отображается одна категория (та, которая активная)

    2) при нажатии на значек (или наведении курсора) выпадает сипсок всех категорий

    3) человек выбирает нужную категорию, нажимает на нее

    4) спсок исчезает, и отображается только выбранная нами категория

    Подскажите, если есть такой модуль, думаю такой млдуль будет полезен
     

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

Загрузка...