Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][MENU]
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
drwycior
27.10.2014, 14:15:46
Witam,

mam menu które powinno być w trzech różnych kolorach. Po kliknięciu. Nieaktywne powinno wrócić do szarego tak jak jest teraz.

http://www.mbphoto.ch/contact-me/rechtliches/


[HTML] pobierz, plaintext 
  1. .topmenu .dropdown .menu-item-667 a:hover{
  2. 	color:red;}
  3.  
  4. .topmenu .dropdown .menu-item-831 a:hover{
  5. 	color:#45D820;}
  6.  
  7. .topmenu .dropdown .menu-item-710 a:hover{
  8. 	color:#17CEEA;}
[HTML] pobierz, plaintext



a:hover
a:visited

dla tego menu działa.

Ale dla

a:active
a:focus

to rozwiązanie nie działa. Czyli żeby zaznaczony link zatrzymał wartość przydzielonego koloru.

Oto cały CSS dot. menu:

[HTML] pobierz, plaintext 
  1. /* topmenu */
  2.  
  3. .topmenu {
  4.  
  5. 	position:absolute;
  6.  
  7. 	top:34px;
  8.  
  9. 	right:190px;}
  10.  
  11.  
  12.  
  13. .topmenu .dropdown {
  14.  
  15. 	font-family: meineschrift, Verdana;
  16.  
  17. 	font-size:14px;
  18.  
  19. 	text-transform:uppercase;
  20.  
  21. 	line-height:1.1em;
  22.  
  23. 	z-index:1300;
  24.  
  25. 	margin:0;
  26.  
  27. 	padding:0;
  28.  
  29. 	background: #888888;}
  30.  
  31.  
  32.  
  33. .topmenu .dropdown li {
  34.  
  35. 	display:block;
  36.  
  37. 	float:left;
  38.  
  39. 	margin:0;
  40.  
  41. 	position:relative;
  42.  
  43. 	list-style:none;
  44.  
  45. 	margin:0 10px;}
  46.  
  47.  
  48. .topmenu .dropdown li a {
  49.  
  50. 	display:block;
  51.  
  52. 	color:#d1d3d4;
  53.  
  54. 	height:20px;
  55.  
  56. 	text-decoration:none;}
  57.  
  58.  
  59. .topmenu .dropdown li a span {
  60.  
  61. 	display:block}
  62.  
  63.  
  64. .topmenu .dropdown .menu-item-667 a:active{
  65. 	color:red;}
  66.  
  67. .topmenu .dropdown .menu-item-831 a:active{
  68. 	color:#45D820;}
  69.  
  70. .topmenu .dropdown .menu-item-710 a:active{
  71. 	color:#17CEEA;}
  72.  
  73. .topmenu .dropdown .menu-item-667 a:hover{
  74. 	color:red;}
  75.  
  76. .topmenu .dropdown .menu-item-831 a:hover{
  77. 	color:#45D820;}
  78.  
  79. .topmenu .dropdown .menu-item-710 a:hover{
  80. 	color:#17CEEA;}
  81.  
  82. .topmenu .dropdown .current-menu-ancestor-item ul li a,
  83.  
  84. .topmenu .dropdown .current-menu-ancestor .current-menu-item li a,
  85.  
  86. .topmenu .dropdown .menu-item-home ul li a,
  87.  
  88. .topmenu .dropdown .current-menu-ancestor .current-menu-ancestor li a,
  89.  
  90. .topmenu .dropdown .current-menu-ancestor li .current-menu-item li a,
  91.  
  92. .topmenu .dropdown .current-menu-ancestor .current-menu-ancestor .current-menu-ancestor li a {
  93.  
  94. 	color:#d1d3d4;}
  95.  
  96.  
  97. .topmenu .dropdown.menu-item-831 li ul li a:focus{
  98. 	color:#45D820;}
  99.  
  100. .topmenu .dropdown .current-menu-ancestor ul li a:hover,
  101.  
  102. .topmenu .dropdown .current-menu-ancestor .current-menu-item a,
  103.  
  104. .topmenu .dropdown .current-menu-ancestor li .current-menu-item-667 a,
  105.  
  106. .topmenu .dropdown li .current-menu-item-667 a:focus{
  107. 	color:red;}
  108. .topmenu .dropdown.current-menu-item-588 a:active{
  109. 	color:#45D820;}
  110. .topmenu .dropdown.current-menu-item-710 a:active{
  111. 	color:#17CEEA;}
  112.  
  113.  
  114. .topmenu .dropdown .current-menu-ancestor .current-menu-ancestor a:focus{
  115. 	color:;}
  116.  
  117. .topmenu .dropdown .current-menu-ancestor .current-menu-ancestor .current-menu-ancestor :focus{
  118. 	color:;}
  119.  
  120. .topmenu .dropdown .current-menu-ancestor .current-menu-ancestor .current-menu-ancestor li :focus{
  121. 	color:;}
  122.  
  123. .topmenu .dropdown .current-menu-ancestor .current-menu-ancestor .current-menu-ancestor .current-menu-item a{
  124.  
  125. 	color:#d1d3d4;}
  126.  
  127.  
  128.  
  129. .topmenu .dropdown li ul {
  130.  
  131. 	display:none;
  132.  
  133. 	position: absolute;
  134.  
  135. 	top: 20px;
  136.  
  137. 	left:-15px;
  138.  
  139. 	z-index: 1308;
  140.  
  141. 	width: 186px;
  142.  
  143. 	padding:22px 0 0 0;
  144.  
  145. 	margin:0;
  146.  
  147. 	font-size:13px;}
  148.  
  149.  
  150.  
  151. .topmenu .dropdown li ul li ul {
  152.  
  153. 	display:none;
  154.  
  155. 	position: absolute;
  156.  
  157. 	top:-7px;
  158.  
  159. 	width: 175px;
  160.  
  161. 	left:-175px !important;
  162.  
  163. 	z-index: 1308;
  164.  
  165. 	padding:0;
  166.  
  167. 	font-size:12px;}
  168.  
  169.  
  170.  
  171. .topmenu .dropdown li ul li {
  172.  
  173. 	display:block;
  174.  
  175. 	background:url(images/dropdown_sprite2.png) 0 0 repeat-y;
  176.  
  177. 	width: 186px;
  178.  
  179. 	margin:0;
  180.  
  181. 	height:auto;
  182.  
  183. 	clear:both;
  184.  
  185. 	position:relative;
  186.  
  187. 	line-height:1.3em}
  188.  
  189.  
  190.  
  191. .topmenu .dropdown li ul li ul li {
  192.  
  193. 	width: 175px;}
  194.  
  195.  
  196.  
  197. .topmenu .dropdown li ul li ul li {
  198.  
  199. 	background:url(images/dropdown_sprite2.png) -186px 0 repeat-y;}
  200.  
  201.  
  202.  
  203. .topmenu .dropdown li ul li.first {
  204.  
  205. 	background:url(images/dropdown_sprite.png) 0 top no-repeat;
  206.  
  207. 	padding-top:15px}
  208.  
  209.  
  210.  
  211. .topmenu .dropdown li ul li ul li.first {
  212.  
  213. 	background:url(images/dropdown_sprite.png) -372px top no-repeat;
  214.  
  215. 	padding-top:8px}
  216.  
  217.  
  218.  
  219. .topmenu .dropdown li ul li.last {
  220.  
  221. 	background:url(images/dropdown_sprite.png) -186px bottom no-repeat;
  222.  
  223. 	padding:0 0 8px 0;}
  224.  
  225.  
  226.  
  227. .topmenu .dropdown li ul li ul li.last {
  228.  
  229. 	background:url(images/dropdown_sprite.png) -547px bottom no-repeat;}
  230.  
  231.  
  232.  
  233. .topmenu .dropdown li ul li a{
  234.  
  235. 	background:url(images/dropdown_sprite2.png) -361px bottom no-repeat;
  236.  
  237. 	display:block;
  238.  
  239. 	color:#d1d3d4;
  240.  
  241. 	text-shadow:0 1px 1px #000;
  242.  
  243. 	height: auto;
  244.  
  245. 	padding:10px 23px 10px 23px;}
  246.  
  247.  
  248.  
  249. .topmenu .dropdown li ul li ul li a {
  250.  
  251. 	background:url(images/dropdown_sprite2.png) -547px bottom no-repeat;
  252.  
  253. 	padding:10px 23px 10px 19px !important;}
  254.  
  255.  
  256.  
  257. .topmenu .dropdown li ul li.last a,
  258.  
  259. .topmenu .dropdown li ul li ul li.last a {
  260.  
  261. 	background:none}
  262.  
  263.  
  264.  
  265. .topmenu .dropdown li a:hover span {
  266.  
  267. 	cursor:pointer}
  268.  
  269.  
  270.  
  271. .topmenu .dropdown .parent li a span,
  272.  
  273. .topmenu .dropdown .parent li a:hover span  {
  274.  
  275. 	background:none}
  276.  
  277.  
  278.  
  279. .topmenu .dropdown li ul li.parent ul li span,
  280.  
  281. .topmenu .dropdown li ul li.parent ul a:hover span {
  282.  
  283. 	background:none;
  284.  
  285. 	padding-right:0px}
  286.  
  287.  
  288.  
  289. .topmenu .dropdown li ul li.parent span,
  290.  
  291. .topmenu .dropdown li ul li.parent ul li.parent a span {
  292.  
  293. 	background:url(images/dropdown_1_arrow.png) 130px 5px no-repeat;
  294.  
  295. 	padding-right:10px}
  296.  
  297.  
  298.  
  299.  
  300.  
  301. .topmenu .dropdown li ul li.parent ul li.parent a span {
  302.  
  303. 	background-position:115px 5px;}
  304.  
  305.  
  306.  
  307. .topmenu .dropdown li ul li.parent a:hover span {
  308.  
  309. 	background:url(images/dropdown_1_arrow.png) 131px 5px no-repeat;}
  310.  
  311.  
  312.  
  313. .topmenu .dropdown li:hover ul li ul,
  314.  
  315. .topmenu .dropdown li:hover ul li:hover ul ul  {
  316.  
  317. 	display:none;}	
  318.  
  319.  
  320.  
  321. .topmenu .dropdown li:hover ul,
  322.  
  323. .topmenu .dropdown li:hover ul li:hover ul,
  324.  
  325. .topmenu .dropdown li:hover ul li:hover ul li:hover ul {
  326.  
  327. 	display:block}
[HTML] pobierz, plaintext
Olsz4k
27.10.2014, 17:49:49
Działa, tylko selektor :active służy do czego innego wink.gif
http://www.w3schools.com/cssref/sel_active.asp
Jak chcesz zatrzymać wartość koloru to do danego elementu musisz dodać klasę np. .active, którą wcześniej sobie ostylujesz.
drwycior
27.10.2014, 19:37:50
No dobrze ale ja muszę mieć 3 różne, jedna klasa nie wystarczy, czyli np.

.act1 {
color: red;
}
.act2 {
color: #45D820;
}
.act3 {
color: #17CEEA;
}


I teraz jak to połączyć z menu-item żeby zatrzymało kolor?

.topmenu .dropdown .menu-item-667
.topmenu .dropdown .menu-item-831
.topmenu .dropdown .menu-item-710
mortus
27.10.2014, 21:05:41
Jeśli używasz dropdown menu z Wordpres'a, to:
[CSS] pobierz, plaintext 
  1. ul.dropdown > li.current-menu-item.menu-item-667 > a {
  2.   color: red !important;
  3. }
  4. ul.dropdown > li.current-menu-parent.menu-item-667 > a {
  5.   color: red !important;
  6. }
  7. ul.dropdown > li.current-menu-item.menu-item-831 > a {
  8.   color: #45D820 !important;
  9. }
  10. ul.dropdown > li.current-menu-parent.menu-item-831 > a {
  11.   color: #45D820 !important;
  12. }
  13. ul.dropdown > li.current-menu-item.menu-item-710 > a {
  14.   color: #17CEEA !important;
  15. }
  16. ul.dropdown > li.current-menu-parent.menu-item-710 > a {
  17.   color: #17CEEA !important;
  18. }
[CSS] pobierz, plaintext

Gdyby to było menu bez rozwijania, to można śmiało usunąć znaki >, które oznaczają przynależność lub relację parent - children (jak kto woli).
drwycior
27.10.2014, 21:25:51
Ojej wielkie wielkie dzięki! smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.