Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS] Odnośniki
ayo1001
post
Post #1





Grupa: Zarejestrowani
Postów: 74
Pomógł: 1
Dołączył: 29.03.2013

Ostrzeżenie: (0%)
-----

Witam,

Jak można przerobić to:

(IMG:http://images.tinypic.pl/i/00356/u697gtp7d5av_t.jpg)

na:

(IMG:http://images.tinypic.pl/i/00356/wy3llcq5kn54_t.jpg)
Go to the top of the page
+Quote Post
Monter08
post
Post #2





Grupa: Zarejestrowani
Postów: 237
Pomógł: 22
Dołączył: 16.09.2010
Skąd: Lubaczów

Ostrzeżenie: (0%)
-----

a co tu się zmienia oprócz koloru czcionki?
Go to the top of the page
+Quote Post
-Gość-
post
Post #3





Goście
Kod
a:hover {color:#fff;}
Go to the top of the page
+Quote Post
ayo1001
post
Post #4





Grupa: Zarejestrowani
Postów: 74
Pomógł: 1
Dołączył: 29.03.2013

Ostrzeżenie: (0%)
-----

Zaznaczony element oraz "hover" ma być biały a reszta tekstu czarna.
Go to the top of the page
+Quote Post
-Gość-
post
Post #5





Goście
Zaznaczonemu elementowi dodaj klasę np. .active i za pomocą CSS zmień kolor czcionki
Kod
.active, a:hover {color:#fff;}
Go to the top of the page
+Quote Post
ayo1001
post
Post #6





Grupa: Zarejestrowani
Postów: 74
Pomógł: 1
Dołączył: 29.03.2013

Ostrzeżenie: (0%)
-----

Wszystkie czcionki są białe...
Go to the top of the page
+Quote Post
miras
post
Post #7





Grupa: Zarejestrowani
Postów: 1 004
Pomógł: 9
Dołączył: 18.01.2011
Skąd: Siedlce

Ostrzeżenie: (30%)
XX---

a jeśli oczekujesz konkretniejszej odpowiedzi to musisz wrzucić kod.
Go to the top of the page
+Quote Post
-Gość-
post
Post #8





Goście
Kod
.menu li:hover a,
.menu .active a {color:#fff;}
Go to the top of the page
+Quote Post
ayo1001
post
Post #9





Grupa: Zarejestrowani
Postów: 74
Pomógł: 1
Dołączył: 29.03.2013

Ostrzeżenie: (0%)
-----

Dzięki, działa.
Go to the top of the page
+Quote Post
miras
post
Post #10





Grupa: Zarejestrowani
Postów: 1 004
Pomógł: 9
Dołączył: 18.01.2011
Skąd: Siedlce

Ostrzeżenie: (30%)
XX---

tu masz tą czarną czcionkę dla reszty jeszcze:

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <style>
  4. .menu ul {
  5. text-align: left;
  6. display: inline;
  7. margin: 0;
  8. padding: 15px 4px 17px 0;
  9. list-style: none;
  10. }
  11. .menu ul li {
  12. font: bold 12px/18px sans-serif;
  13. display: inline-block;
  14. margin-right: -4px;
  15. position: relative;
  16. padding: 15px 20px;
  17. background: #fff;
  18. cursor: pointer;
  19. -webkit-transition: all 0.2s;
  20. -moz-transition: all 0.2s;
  21. -ms-transition: all 0.2s;
  22. -o-transition: all 0.2s;
  23. transition: all 0.2s;
  24. }
  25. .menu ul li:hover {
  26. background: #555;
  27. }
  28.  
  29. .menu ul li.active {
  30. background: #555;
  31. }
  32. .menu ul li ul {
  33. padding: 0;
  34. position: absolute;
  35. top: 48px;
  36. left: 0;
  37. width: 150px;
  38. -webkit-box-shadow: none;
  39. -moz-box-shadow: none;
  40. box-shadow: none;
  41. display: none;
  42. opacity: 0;
  43. visibility: hidden;
  44. -webkit-transiton: opacity 0.2s;
  45. -moz-transition: opacity 0.2s;
  46. -ms-transition: opacity 0.2s;
  47. -o-transition: opacity 0.2s;
  48. -transition: opacity 0.2s;
  49. }
  50. .menu ul li ul li { 
  51. background: #555; 
  52. display: block; 
  53. text-shadow: 0 -1px 0 rgb(61, 61, 61);
  54. border-bottom: 1px solid #777;
  55. }
  56.  
  57. .menu li:hover a, 
  58. .menu .active a {color:#fff;}
  59. .c { color: #000; }
  60.  
  61. .menu ul li ul li:hover { background: #666; }
  62. .menu ul li:hover ul {
  63. display: block;
  64. opacity: 1;
  65. visibility: visible;
  66. }
  67. .menu a, a.menu { text-decoration: none; }
  68. </style>
  69. </head>
  70.  
  71.  
  72. <div class="menu">
  73. <ul>
  74. <li class="active">
  75. <a href="#">AAAA</a>
  76. <ul>
  77. <li><a href="#">AAAA</a></li>
  78. <li><a href="#">BBBB</a></li>
  79. <li><a href="#">CCCC</a></li>
  80. <li><a href="#">DDDD</a></li>
  81. </ul>
  82. </li>
  83. <li>
  84. <a href="#" class="c">BBBB</a>
  85. <ul>
  86. <li><a href="#">AAAA</a></li>
  87. <li><a href="#">BBBB</a></li>
  88. <li><a href="#">CCCC</a></li>
  89. <li><a href="#">DDDD</a></li>
  90. </ul>
  91. </li>
  92. <li>
  93. <a href="#" class="c">CCCC</a>
  94. <ul>
  95. <li><a href="#">AAAA</a></li>
  96. <li><a href="#">BBBB</a></li>
  97. </ul>
  98. </li>
  99. </div>
  100.  
  101. </html>
  102.  
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.12.2025 - 20:57
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn