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

Как сделать, чтобы активный пункт меню не являлся ссылкой. Кто-нибудь пытался решить эту проблему.
Странно, почему это не сделано по умолчанию.

 

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

Неужели никто не ковырял?

 

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

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

 

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

Использую вот такую конструкцию для отображения горизонтального меню (выбран 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)еще ничего нет там, кроме кривого шаблона. Подскажите, плз как обойти сию проблему.

 

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

хакать модуль меню

 

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

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

 

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

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

 

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

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

Добавлено через 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)
но факт - работает как положено

Если кому поможет, буду очень рад
Для тех кто тут давно - не пинайте, если криво сделал

 

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

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

 

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

Вот кусок сгенерированного кода с двумя пунктами меню, один активный:

Код (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 только в вышеуказанной связке. В индексе его упоминания не было. Но зачем, спрашивается, этот класс задан в стилевом файле, если его нет в индексе? Шаблон вроде солидно сделан... Поэтому я решил не ломать голову (хотя крыша итак уже улетела ) и взял из вертикального меню строки для активного пункта.
Если необходима дополнительная информация, чтобы разобраться, могу прислать файлы целиком.

 

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

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

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

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

Имея на входе такой код:

Код (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", второго - к состоянию, когда над ними расположен курсор или было осуществлено нажатие, третьего - к активному состоянию, подсветке в меню пункта, соответствующего разделу сайта, в котором в данный момент находится пользователь.

Именно таким, как показано выше, должно быть следование друг за другом ссылочных селекторов.

 

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. }

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

 

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; }

 

не помогло.

 

может где-то ещё в настройках модуля вывода статей надо что-то крутить? но там я ничего похоже не находил... у меня ArtCats

 

Вот что новое открылось мне - в стилях я нашёл где прописать параметры именно для активного пункта меню. Но вот что интересно - он работает только при нажатии на ссылку, когда статья загружается, все пункты снова становятся не активными

 

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 можно сделать? Спасибо

 

можно ли сделать меню выпадающим списком с выбором.
Желательно для категорий Виртумат

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

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

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

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

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

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