Найти на сайте
  2. Форумы
  3. МАСТЕРСКАЯ
  4. HTML / CSS / PHP / JS / RegExp
  5. Помогите разобраться... Подсветка пунктов меню

Помогите разобраться... Подсветка пунктов меню

Странное поведение вложенного меню при "selected"

#1 11 ноября 2012 в 21:30
Уважаемые знатоки CSS, очень прошу помощи! Не могу понять следующий момент…
Имеется меню. Не штатное, где то тут на форуме взял (просто заменил в шаблоне кусок CSS файла на новый) вариант с горизонтальными подпунктами (вложенными...) Так вот, когда отрабатывает "selected" родительского пункта, подсвечиваются и все вложенные! Непосредственно посмотреть — donsound.alred.ru/informacija/studija-zvukozapisi.html
Если нужно код — приложу отдельным файлом…

ПРошу, пождскажите где ошибка! Не могу сам найти...



  1.  
  2.  
  3.  
  4. #topmenu{
  5.     font-family: 'PT Sans Narrow', sans-serif;
  6.     position:relative; 
  7.     width:940px;
  8.     height:40px;
  9.     margin:15px auto;
  10.     margin-bottom: 25px;
  11.  /*   background:#25548b url(../images/menubar.jpg) 0 0 repeat-x;
  12.     border-radius:8px;
  13.     -moz-border-radius:8px;
  14.     box-shadow: 0 0 5px #000;
  15.     -moz-box-shadow: 0 0 5px #000;
  16.     behavior:url(/templates/_default_/css/PIE.htc)  */
  17.     }
  18.  
  19.  
  20. #topmenu ul{height:40px;}
  21.  
  22. #topmenu li{
  23.     list-style:none; 
  24.     margin:0;
  25.     padding:0;
  26.     height:40px;
  27.     line-height:40px;
  28.     display:inline-block;
  29. 	//display: inline;
  30. 	zoom: 1;
  31.     font-size:14pt;
  32.     //position: relative;
  33.     }
  34.  
  35. #topmenu li a{
  36.     text-decoration:none;
  37.     padding:0 10px;
  38.     display:block;
  39.     color: #fff;
  40.     }
  41.  
  42. /* Если включены картинки к пунктам меню. Перенос их вверх и выравнивание по центру
  43. #topmenu li a img{display:block;width:32px;height:32px;margin:0 auto} */
  44. #topmenu li a.hover{
  45.   /*  background:#fff url(../images/menubg-hover.jpg) 0 0 repeat-x; */
  46.     color: red;
  47.     }
  48.  
  49. #topmenu li.selected a.hover,#topmenu li.selected{
  50.   /*  color: red; */
  51.    /* background:#375E93 url(../images/menubg.jpg) 0 0 repeat-x; */
  52. }
  53. #topmenu li.selected a,#topmenu li.selected a.selected{
  54.     color:red; 
  55.     }
  56.  
  57. #topmenu li ul{ 
  58.     font-size:14pt;
  59.     height:30px;
  60.     display:none;
  61.     position:absolute;
  62.     top:25px;
  63.     margin-left: -10px;
  64.     padding:0 10px;
  65. }
  66. #topmenu li a.hover~ul{
  67.     color:#red;
  68.     z-index:2;
  69.    /* background:#ccc; */
  70.     }
  71.  
  72. #topmenu li.selected>ul{
  73.     color:#red;
  74.   /*  background:#25548b; */
  75.     display:block !important;
  76.     }
  77.  
  78. #topmenu li ul a{
  79.  /*   background:#25548b;  */
  80.     font-size:14pt;
  81.     line-height:30px;
  82.     color:#fff;
  83.     letter-spacing:normal;
  84.   /*  text-shadow:1px 1px 0 #000;  */
  85.     }
  86.  
  87. #topmenu li ul a.hover{
  88.    /* background:#375E93 url(../images/menubg.jpg) 0 0 repeat-x;
  89.     text-shadow:-1px -1px 0 #000; */
  90.     }
  91.  
  92. #topmenu li ul li{position:relative}
  93.  
  94. #topmenu li ul li ul{
  95.   /*  background:#dedede !important;  */
  96.     font-size:14px;
  97.     padding:2px 0; 
  98.     height:auto;
  99.     display:none;
  100.     position:absolute;
  101.     top:30px;
  102.     left:0;
  103.     width:150px;
  104.   /*  border-radius:0 0 5px 5px;
  105.     -moz-border-radius:0 0 5px 5px;
  106.     box-shadow:3px 3px 5px rgba(0,0,0,0.5);
  107.     -moz-box-shadow:3px 3px 5px rgba(0,0,0,0.5);
  108.     behavior:url(/templates/_default_/css/PIE.htc) */}
  109.  
  110. #topmenu li ul li ul li{
  111.     float:none;
  112.     display:block;
  113.    /* background:url(../images/menubar.jpg) 0 100% repeat-x; */
  114.     margin:3px;
  115.     }
  116.  
  117. #topmenu li ul li.selected ul{display:none !important}
  118.  
  119. #topmenu li ul li.selected a.hover~ul{display:block !important}
  120.  
  121. #topmenu li ul li ul li a{background:none;font:italic 700 12px/30px verdana;color:#1f3451 !important;letter-spacing:normal;text-shadow:0 1px 0 #fff !important}
  122.  
  123. #topmenu li ul li ul li a.hover{background:#375E93 url(../images/menubg.jpg) 0 0 repeat-x;border:none;color:#fff !important;text-shadow:0 1px 0 #000 !important}
  124.  
  125. #topmenu li ul li ul li a.selected{color:#fff !important;text-shadow:0 1px 0 #000 !important}
  126.  
  127.  
  128.  
  129.  
  130.  
  131.  
  132. .pathway a{ color:#FFF; }
  133. .pathway a:hover{ color:#BFEAFF; text-decoration:none; }
  134.  
  135.  
0
#2 11 ноября 2012 в 21:46
добавь в файл
  1.  
  2. #topmenu li ul li a{
  3.     color:#fff;
  4. }
  5.  
  6. #topmenu li ul li.selected a{
  7.     color:#fff; /* или любой другой цвет */
  8. }
  9.  
0
#3 11 ноября 2012 в 22:06
Rossoman, нет… Не решает проблему к сожалению...

P.S. А, да! И кстати… Когда выбран родительский пункт или любой из вложенных, подменю НЕ ИСЧЕЗАЕТ! а так и остается висеть со всеми активными пунктами… Это тоже видно по ссылке, указанной мною выше.
0
#4 11 ноября 2012 в 22:28
не обратил внимание что у вас в спан обернута ссылка

добавьте после каждого a span через пробел
  1. #topmenu li ul li a span
0
#5 11 ноября 2012 в 22:33
Rossoman, да! Вот теперь — да!) Спасибо огромное!)
Может еще подскажете почему не исчезает подменю при выбранном родительском или вложенном?
0
#6 11 ноября 2012 в 22:35 
  1. #topmenu li.selected > ul {
  2. color: #red; /* background:#25548B; */;
  3. display: block !important;
уберите отсюда 
  1. display: block !important;
0
#7 11 ноября 2012 в 22:42
Rossoman, Вам плюсы — каждый день) Как я завидую программистам)))

СПАСИБО! Все проблемы решены при Вашей помощи! )
0
#8 11 ноября 2012 в 22:44
незачто)
0
#9 12 ноября 2012 в 09:01
вопрос по теме, но модуля юзерменю.

как у него сделать подсвечивающиеся пункты при нахождении на активной странице?

  1.  <div class="modulebody"><div class="mod_user_menu">

  2.  
  3.     <span class="my_profile">

  4.         <a href="/users/admin">Администратор</a>

  5.     </span>

  6.  
  7.         <span class="my_messages">

  8.                     <a href="/users/1/messages.html">ЛС</a>

  9.             </span>

  10.  
  11.         <span class="my_blog">

  12.         <a href="/blogs/my_blog.html">Блог</a>

  13.     </span>

  14.  
0
#10 12 ноября 2012 в 10:48

как у него сделать подсвечивающиеся пункты при нахождении на активной странице?

Код HTML:
<div class="modulebody"><div class="mod_user_menu">
 
<span class="my_profile">
<a href="/users/admin">Администратор</a>
</span>
 
<span class="my_messages">
<a href="/users/1/messages.html">ЛС</a>
</span>
 
<span class="my_blog">
<a href="/blogs/my_blog.html">Блог</a>
</span>

yury

смотрим пост номер 2. дописываем только после


#topmenu li ul li.selected a, .mod_user_menu span a.selected
{
color:#fff; /* или любой другой цвет */
}

ну или вынеси отедельно .mod_user_menu span a.selected{}, если оформление отличается

должно помочь.
0
#11 12 ноября 2012 в 10:49
balooo, так не будет работать.

yury, активной ссылке у вас присваивается класс selected?
0
#12 12 ноября 2012 в 23:57
так вот я и не знаю как его присвоить на уровне програмной части.

подскажите?)

модуль стандартный, не видоизменный в дистрибутиве
0
#13 13 ноября 2012 в 06:01
в модуле надо "разбирать" адресную строку, чтоб определить, что в данный момент отображается, и в зависимости от результата подсвечивать соответствующий пункт меню.
0
#14 13 ноября 2012 в 07:25
смотрите как сделано в /templates/ваш_шаблон/modules/mod_menu.tpl отсюда отталкивайтесь в сторону
/templates/ваш_шаблон/modules/mod_usermenu.tpl
Проверка траста и спама с донорских сайтов.
0
Теги - минимальное количество
Смена фона для разных разделов
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

Похожие темы

Выравнивание пунктов главного меню в шаблоне Modern.

HTML / CSS / PHP / JS / RegExp Создана 3 года назад 3 сообщения

Подсветка синтаксиса html кода в TinyMCE5

Релизы 2.X Создана 3 года назад 1 сообщение

Изменить подсветку новых комментариев

Ищу исполнителя Создана 1 год назад 6 сообщений

[ЕСТЬ РЕШЕНИЕ] Количество пунктов Главного меню

Флейм / Флуд / Оффтопик Создана 4 года назад 4 сообщения

[ЕСТЬ РЕШЕНИЕ] Другой title для пунктов в главном меню

Релизы 2.X Создана 3 года назад 6 сообщений

Управление видимостью пунктов главного меню для разных страниц

Виджеты, компоненты, плагины, модули Создана 3 года назад 60 сообщений

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.