Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.57/21: Рейтинг темы: голосов - 21, средняя оценка - 4.57
1 / 1 / 0
Регистрация: 04.11.2012
Сообщений: 91
1

Выделение активного пункта меню цветом

06.06.2017, 22:03. Показов 3822. Ответов 13
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Ребята, вот есть СSS с сайта, которым занимаюсь.
Поскажите как выделить цветом пункт меню, на который наведена мышка?
Конкретно интересует дополнительное подменю, которое выскакиевает при наведении на основные разделы в топменю.
Выделение нужно оранежвое, а шрифт при этом становится белым.


CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

/* =Navigation
-------------------------------------------------------------- */
#skehead  .top-nav-menu{float:right;}
#header.skehead-headernav-shrink
#skenav ul ul a { line-height: 1.2em; }
#skenav {background:none repeat scroll 0 0 transparent; 
display:block; 
margin-left:auto;  
margin-right:auto; 
border:medium none;
margin-top:0; } 
#skenav  ul > li:last-child a{margin-right:0;} 
#skenav .ske-menu, 
ul.menu 
 
{
font-size: 13px;
 margin: 0px;
 display:inline-block;
 width:auto;
 float:right;
 }
 
 #skenav .ske-menu ul.menu {list-style: none;margin: 0; }
#skenav .ske-menu .menu li,ul.menu li {float: left; position: relative;  margin-left: 0px;  list-style: none outside none;  }
#skenav a { border-bottom: 3px solid transparent;
border-top: 3px solid transparent;
color: #5A5A5A;
display: block;
font-size: 14px;
font-weight:600;
 text-transform:none;
 line-height: 94px;
 margin:0px 0px;
 padding: 0 10px;
 text-decoration: none;
 -webkit-transition:all .3s ease 0s;
 -moz-transition: all .3s ease 0s;
 -o-transition: all .3s ease 0s;
 transition: all .3s ease 0s; }
#skenav ul li:hover{z-index:999999999999;}
#skenav ul .sub-menu li ,
#skenav ul ul li {display: block; width:100%;}
#skenav ul ul 
{
box-shadow:0 3px 4px -3px #171717;
position: absolute;
top: 100%;
left: 1px;
  float: left;
  width: 250px;
  z-index: 99999;
  padding:0px 17px;
  background:rgba(255,255,255,.98);
  margin-bottom: 0;}
#skenav ul .children li:first-child, 
#skenav ul .sub-menu li:first-child { border-top: none; }
 
#skenav ul ul a
 {
 border: 0 none !important;
 color: #7C7C7C;
 font-size: 14px;
 height: auto;
 line-height: 1.2em; 
 margin: 0;
 padding: 12px 0;
 width: auto; 
 }  
#skenav ul ul a:hover{color:#7C7C7C;;}
#skenav ul ul li{ border-top: 1px dotted rgba(0,0,0,.15);}
#skenav ul ul ul.sub-menu,#skenav ul ul ul.children{  left: 100%;  top: 0px !important; border-top: 0 none;margin-top:0; }
* html #skenav ul li.current_page_item a, * html #skenav ul li.current-menu-ancestor a, * html #skenav ul li.current-menu-item a, * html #skenav ul li.current-menu-parent a, * html #skenav ul li a:hover {  color: #fff;  }
#skenav ul ul.sub-menu li.current_page_item > a { border: medium none; }
#skenav .nav-top-link-level-2{ left: 100%; }
#skenav .nav-column-links ul {left: 100% !important; top: 0 !important; display: none; }
#skenav .nav-dropdown ul .has_child:hover .nav-column-links ul{ display: block; }
0
Лучшие ответы (1)
Сообщение: #10519057
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 06.06.2017, 22:03
Ответы с готовыми решениями:

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

Выделение активного пункта меню
Вопрос простой. Как мне сделать активный пункт меню? Нужно это для класса top-menu. HTML и CSS...

выделение активного пункта меню
Есть данное меню. <div id="menu"> <ul> <li class="current"><a...

Выделение активного пункта меню. Нужен совет!
Доброго времени суток, форумчане! Я в принципе нуб в CSS, помогите решить задачу. Необходимо...

13
dev - investigator
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
06.06.2017, 23:26 2
Лучший ответ Сообщение было отмечено CyberNUB как решение

Решение

CyberNUB, строка 41
Цитата Сообщение от CyberNUB Посмотреть сообщение
#skenav ul li:hover{z-index:999999999999;}
заменить
CSS
1

#skenav ul li:hover{background-color: orange; z-index:999999999999;}
строка 70
Цитата Сообщение от CyberNUB Посмотреть сообщение
#skenav ul ul a:hover{color:#7C7C7C;;}
заменить на
CSS
1

#skenav ul ul a:hover{color:white;}
1
1 / 1 / 0
Регистрация: 04.11.2012
Сообщений: 91
07.06.2017, 07:00  [ТС] 3
Qwerty_Wasd, Спасибо дружище!
Слушай, только некоторый момент возник:
вот сайт: http://sm-lube.ru/
Смотри, видишь, выделение не по всей области меню? Там же размеры, да нужно прописать? Не подскажешь?
Ну и белым оно что-то не хочет становится.
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
07.06.2017, 19:41 4
CyberNUB,
Цитата Сообщение от CyberNUB Посмотреть сообщение
Смотри, видишь, выделение не по всей области меню?
Вижу. Строка 53
Цитата Сообщение от CyberNUB Посмотреть сообщение
padding:0px 17px;
убрать. Будет по всей.
Цитата Сообщение от CyberNUB Посмотреть сообщение
Ну и белым оно что-то не хочет становится.
потому что после каждого изменения в коде - в браузере просмотр начинается с CTRL+F5.
0
1 / 1 / 0
Регистрация: 04.11.2012
Сообщений: 91
07.06.2017, 20:16  [ТС] 5
Qwerty_Wasd,
...в браузере просмотр начинается с CTRL+F5.
Да, спасибо, я знаю про очистку кэша, но это не поменяло сути. Я потому и написал что не поменялось на белое.

убрать. Будет по всей.
Да, справа действительно выравнивание произошло, а вот справа нет.
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
07.06.2017, 20:32 6
CyberNUB,
CSS
1
2
3
4
5
6
7
8
9
10
11
12

#skenav ul ul {
    box-shadow: 0 3px 4px -3px #171717;
    position: absolute;
    top: 100%;
    left: 1px;
    float: left;
    width: 250px;
    z-index: 99999;
    padding: 0px 17px;
    background: rgba(255,255,255,.98);
    margin-bottom: 0;
}
вытянул с сайта. padding не убран. Выравнивание текста
CSS
1
2
3

#skenav ul ul li {    
    text-align: center;
}
Добавлено через 53 секунды
a: hover у вас вообще черный цвет.

Добавлено через 3 минуты
CyberNUB, очень рекомендую модульно(по блокам) потестить свое творение. Отключить скрипты. По блокам чекать приемлемый вид страницы. По одному подключать сторонние скрипты. Чтобы убедиться, что они не глушат ваш код.
0
1 / 1 / 0
Регистрация: 04.11.2012
Сообщений: 91
07.06.2017, 20:36  [ТС] 7
Qwerty_Wasd,
Странно. Вот передо мной открыт CSS в редакторе:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

/* =Navigation
-------------------------------------------------------------- */
#skehead  .top-nav-menu{float:right;}
#header.skehead-headernav-shrink
#skenav ul ul a { line-height: 1.2em; }
#skenav {background:none repeat scroll 0 0 transparent; 
display:block; 
margin-left:auto;  
margin-right:auto; 
border:medium none;
margin-top:0; } 
#skenav  ul > li:last-child a{margin-right:0;} 
#skenav .ske-menu, 
ul.menu 
 
{
font-size: 13px;
 margin: 0px;
 display:inline-block;
 width:auto;
 float:right;
 }
 
 #skenav .ske-menu ul.menu {list-style: none;margin: 0; }
#skenav .ske-menu .menu li,ul.menu li {float: left; position: relative;  margin-left: 0px;  list-style: none outside none;  }
#skenav a { border-bottom: 3px solid transparent;
border-top: 3px solid transparent;
color: #5A5A5A;
display: block;
font-size: 14px;
font-weight:600;
 text-transform:none;
 line-height: 94px;
 margin:0px 0px;
 padding: 0 10px;
 text-decoration: none;
 -webkit-transition:all .3s ease 0s;
 -moz-transition: all .3s ease 0s;
 -o-transition: all .3s ease 0s;
 transition: all .3s ease 0s; }
#skenav ul li:hover
{
background-color: orange;
 z-index:999999999999;
 }
 
#skenav ul .sub-menu li ,
#skenav ul ul li {display: block; width:100%;}
#skenav ul ul 
{
box-shadow:0 3px 4px -3px #171717;
position: absolute;
top: 100%;
left: 1px;
  float: left;
  width: 250px;
  z-index: 99999;
  background: rgba(255,255,255,.98);
  margin-bottom: 0;}
#skenav ul .children li:first-child, 
#skenav ul .sub-menu li:first-child { border-top: none; }
 
#skenav ul ul a
 {
 border: 0 none !important;
 color: #383737;
 font-size: 14px;
 height: auto;
 line-height: 1.2em; 
 margin: 0;
 padding: 12px 0;
 width: auto; 
 }  
1
#skenav ul ul a:hover {color:white;}
#skenav ul ul li{ border-top: 1px dotted rgba(0,0,0,.15); text-align: center;}
#skenav ul ul ul.sub-menu,#skenav ul ul ul.children{  left: 100%;  top: 0px !important; border-top: 0 none;margin-top:0; }
* html #skenav ul li.current_page_item a, * html #skenav ul li.current-menu-ancestor a, * html #skenav ul li.current-menu-item a, * html #skenav ul li.current-menu-parent a, * html #skenav ul li a:hover {  color: #fff;  }
#skenav ul ul.sub-menu li.current_page_item > a { border: medium none; }
#skenav .nav-top-link-level-2{ left: 100%; }
#skenav .nav-column-links ul {left: 100% !important; top: 0 !important; display: none; }
#skenav .nav-dropdown ul .has_child:hover .nav-column-links ul{ display: block; }
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
07.06.2017, 20:37 8
CyberNUB,
Цитата Сообщение от CyberNUB Посмотреть сообщение
открыт CSS в редакторе:
в каком? В консоле wordpress?
0
1 / 1 / 0
Регистрация: 04.11.2012
Сообщений: 91
07.06.2017, 20:38  [ТС] 9
Qwerty_Wasd,
Notepad++
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
07.06.2017, 20:39 10
CyberNUB, обратно как заливали?
0
1 / 1 / 0
Регистрация: 04.11.2012
Сообщений: 91
07.06.2017, 20:42  [ТС] 11
Qwerty_Wasd, Да, заливал.
Странно вообще. Открыл в WP, действительно паддинг остался. Забавная ситуация, особенно если учесть, что через FTP открывается версия без padding. Сейчас попробую прямо в WP удалить и поправить.
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
07.06.2017, 20:46 12
CyberNUB, подумайте насчет потестить по кусочкам, с самого начала. А пока вашим решением будет являться дочерняя тема, вот ссылка на мануал WP =>ТЫК<= почитайте как ее создать. И те правила CSS, что я дал используйте в ней. У нее приоритет будет выше.
0
1 / 1 / 0
Регистрация: 04.11.2012
Сообщений: 91
07.06.2017, 20:47  [ТС] 13
Qwerty_Wasd, Спасибо дружище!
Извини если тупые вопросы задавал, учусь вот, начальство требует всем своим филиалам сайты сделать и нанимать никого не хочет.
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
07.06.2017, 20:50 14
CyberNUB, все нормально. Этот форум создан для жадных до знаний ) Удачи.
0
07.06.2017, 20:50
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 07.06.2017, 20:50
Помогаю со студенческими работами здесь

Выделение пункта меню при наведении - только текст или весь блок пункта
Всем привет.Есть меню, при наведении появляется hover но он идет строго по тексту... Можно ли его...

Подсветка активного пункта меню
Доброго времени суток! Народ помогите сделать подсветку активного пункта меню, пробовал через...

Рамка для активного пункта меню
&lt;li class =&quot;lis1&quot;&gt;&lt;a href=&quot;#home&quot;&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li class =&quot;lis1&quot;&gt;&lt;a...

Выделение активного меню
Не получается сделать, чтобы ссылка была другого стиля, если она активная. Гугл дает массу инфы - а...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
14
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru