Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Menu na stronkę
Forum PHP.pl > Forum > Przedszkole
smagul
19.02.2009, 13:21:24
Witam, jakieś 2 miesiące temu widziałem na pewnej stronie (niestety zapomniałem na której) ładne menu. Zainteresowałem się jak jest zrobione, bo jak będę miał więcej czasu to wstawię takie cudo do siebie. Niestety stronki nie mogę znaleźć a sam jakoś sobie nie radzę.

Idea tego menu opiera się na tym, że po najechaniu nad obrazek będący przyciskiem, zostaje on przesunięty (w górę lub do dołu).
Wszystko było realizowane w CSS dokładnie takimi samymi komendami jak w normalnych linkach. czyli a.hover itp.
Mógł by ktoś napisac mi taki link?
Strarus
19.02.2009, 13:23:46
I to ja niby jestem chory....
zzeus
19.02.2009, 13:24:06
Może napisz coś więcej o tym menu poza tym że je widzialeś smile.gif
carck3r
19.02.2009, 13:25:34
laugh.gif Wyciągnę zaraz zza pazuchy moją kryształową kulę.
smagul
19.02.2009, 13:26:03
siostrzeniec się bawił (2 latka) i wysłał niedokończonego posta jak odszedłem od kompa tongue.gif sorry
Strarus
19.02.2009, 13:26:45
background-position: -30px;
erix
19.02.2009, 19:44:03
Kolejne komentarze nie wnoszące nic konkretnego do tematu będą nagradzane warnami.
smagul
21.02.2009, 14:03:14
zrobilem menu ale marnie mi to wyszło, potrzebuje pomocy.

chciał bym usunąć całkiem te dwie kropki które sa <hr> ami, nie wiem czemu zrobiła mi się przerwa w menu i pojawiła ramka z prawej strony  blinksmiley.gif . oraz trzeba by podnieść boki tego menu.
[HTML] pobierz, plaintext 
  1. <hr class="podzial" />
  2. <DIV id=menu>
  3. <UL id=menuN>
  4.   <li id="lewa"><p>Lewa strona</p>
  5.   <li id="news"><a title="Newsy" 
  6. <?php if($HTTP_GET_VARS['strona']=='news'){ ?>class="act" <?php } ?> 
  7.   href="index.php?strona=news">Newsy</a>
  8.   
  9.   <li id="pozdro"><a title="Pozdrowienia" 
  10. <?php if($HTTP_GET_VARS['strona']=='pozdrowienia'){ ?>class="act" <?php } ?> 
  11.   href="index.php?strona=pozdrowienia">Pozdrowienia</a>
  12.   
  13.   <li id="forum"><a title="Forum" href="forum" target="_blank">Forum</a> 
  14.   
  15.   <li id="prezenterzy"><a title="Prezenterzy" 
  16. <?php if($HTTP_GET_VARS['strona']=='prezenterzy'){ ?>class="act" <?php } ?> 
  17.   href="index.php?strona=prezenterzy">Prezenterzy</a> 
  18.   
  19.   <li id="top_lista"><a title="Lista przebojów" 
  20. <?php if($HTTP_GET_VARS['strona']=='top_lista'){ ?>class="act" <?php } ?> 
  21.   href="index.php?strona=top_lista">Top Lista</a> 
  22.   
  23.   <li id="bajery"><a title="Bajery" 
  24. <?php if($HTTP_GET_VARS['strona']=='bajery'){ ?>class="act" <?php } ?> 
  25.   href="#">Bajery</a>
  26.   
  27. <?php if($HTTP_SESSION_VARS['user_online']) {?>
  28.   <li id="profil"><a title=Profil  <?php if($HTTP_GET_VARS['strona']=='profil'){ ?>class="act" <?php } ?> 
  29.   href="index.php?strona=profil">Profil</a>
  30. <?php }
  31. else {?>
  32.   <li id="rejestracja"><a title="Rejestracja" 
  33. <?php if($HTTP_GET_VARS['strona']=='rejestracja'){ ?>class="act" <?php } ?> 
  34.   href="index.php?strona=rejestracja">Rejestracja</a>
  35. <?php } ?>
  36.   <li id="prawa"><p>Prawa strona</p>
  37. </LI></UL></DIV>
  38. <hr class="podzial" />
[HTML] pobierz, plaintext



i CSS
[HTML] pobierz, plaintext 
  1. hr.podzial {
  2.  color: white;
  3.  width: 0;
  4.  height: 0;
  5.  position: inherit;
  6. }
  7.  
  8. #menu {
  9.  MARGIN: 0px; WIDTH: 980px; POSITION: relative; HEIGHT: 50px
  10. }
  11. #menu #menuN {
  12.  padding: 0; 
  13.  margin: 0 auto;
  14. }
  15. #menu #menuN LI {
  16.  DISPLAY: inline
  17. }
  18.  
  19. #menu #menuN LI A {
  20.  FLOAT: left; OVERFLOW: hidden; MARGIN-RIGHT: 0px; PADDING-TOP: 40px; HEIGHT: 0px
  21. }
  22. #menu #menuN LI P {
  23.  FLOAT: left; OVERFLOW: hidden; MARGIN-RIGHT: 0px; PADDING-TOP: 40px; HEIGHT: 0px
  24. }
  25.  
  26. #menu #menuN LI#lewa P {
  27.  BACKGROUND: url(gfx/menu/lewa.png) no-repeat 0px -120px; 
  28.  WIDTH: 17px;
  29. }
  30. #menu #menuN LI#prawa P {
  31.  BACKGROUND: url(gfx/menu/prawa.png) no-repeat 0px -120px; 
  32.  WIDTH: 22px;
  33. }
  34.  
  35. #menu #menuN LI#news A {
  36.  BACKGROUND: url(gfx/menu/newsy.png) no-repeat 0px -120px; 
  37.  WIDTH: 61px;
  38. }
  39. #menu #menuN LI#forum A {
  40.  BACKGROUND: url(gfx/menu/forum.png) no-repeat 0px -120px; 
  41.  WIDTH: 94px;
  42. }
  43. #menu #menuN LI#pozdro A {
  44.  BACKGROUND: url(gfx/menu/pozdro.png) no-repeat 0px -120px; 
  45.  WIDTH: 144px;
  46. }
  47. #menu #menuN LI#prezenterzy A {
  48.  BACKGROUND: url(gfx/menu/prezenterzy.png) no-repeat 0px -120px; 
  49.  WIDTH: 124px;
  50. }
  51. #menu #menuN LI#top_lista A {
  52.  BACKGROUND: url(gfx/menu/top_lista.png) no-repeat 0px -120px; 
  53.  WIDTH: 102px;
  54. }
  55. #menu #menuN LI#bajery A {
  56.  BACKGROUND: url(gfx/menu/bajery.png) no-repeat 0px -120px; 
  57.  WIDTH: 71px;
  58. }
  59. #menu #menuN LI#profil A {
  60.  BACKGROUND: url(gfx/menu/profil.png) no-repeat 0px -120px; 
  61.  WIDTH: 60px
  62. }
  63. #menu #menuN LI#rejestracja A {
  64.  BACKGROUND: url(gfx/menu/rejestracja.png) no-repeat 0px -120px; 
  65.  WIDTH: 119px
  66. }
  67. #menu #menuN LI#forum A:hover {
  68.  BACKGROUND-POSITION: 0px -80px
  69. }
  70. #menu #menuN LI#pozdro A:hover {
  71.  BACKGROUND-POSITION: 0px -80px
  72. }
  73. #menu #menuN LI#prezenterzy A:hover {
  74.  BACKGROUND-POSITION: 0px -80px
  75. }
  76. #menu #menuN LI#top_lista A:hover {
  77.  BACKGROUND-POSITION: 0px -80px
  78. }
  79. #menu #menuN LI#bajery A:hover {
  80.  BACKGROUND-POSITION: 0px -80px
  81. }
  82. #menu #menuN LI#profil A:hover {
  83.  BACKGROUND-POSITION: 0px -80px
  84. }
  85. #menu #menuN LI#news A:hover {
  86.  BACKGROUND-POSITION: 0px -80px
  87. }
  88. #menu #menuN LI#rejestracja A:hover {
  89.  BACKGROUND-POSITION: 0px -80px
  90. }
  91. #menu #menuN LI#forum A:active {
  92.  BACKGROUND-POSITION: 0px -50px
  93. }
  94. #menu #menuN LI#pozdro A:active {
  95.  BACKGROUND-POSITION: 0px -40px
  96. }
  97. #menu #menuN LI#prezenterzy A:active {
  98.  BACKGROUND-POSITION: 0px -40px
  99. }
  100. #menu #menuN LI#top_lista A:active {
  101.  BACKGROUND-POSITION: 0px -40px
  102. }
  103. #menu #menuN LI#bajery A:active {
  104.  BACKGROUND-POSITION: 0px -40px
  105. }
  106. #menu #menuN LI#profil A:active {
  107.  BACKGROUND-POSITION: 0px -40px
  108. }
  109. #menu #menuN LI#news A:active {
  110.  BACKGROUND-POSITION: 0px -40px
  111. }
  112. #menu #menuN LI#rejestracja A:active {
  113.  BACKGROUND-POSITION: 0px -40px
  114. }
  115. #menu #menuN LI#forum A.act {
  116.  BACKGROUND-POSITION: 0px 0px
  117. }
  118. #menu #menuN LI#pozdro A.act {
  119.  BACKGROUND-POSITION: 0px 0px
  120. }
  121. #menu #menuN LI#prezenterzy A.act {
  122.  BACKGROUND-POSITION: 0px 0px
  123. }
  124. #menu #menuN LI#top_lista A.act {
  125.  BACKGROUND-POSITION: 0px 0px
  126. }
  127. #menu #menuN LI#bajery A.act {
  128.  BACKGROUND-POSITION: 0px 0px
  129. }
  130. #menu #menuN LI#profil A.act {
  131.  BACKGROUND-POSITION: 0px 0px
  132. }
  133. #menu #menuN LI#news A.act {
  134.  BACKGROUND-POSITION: 0px 0px
  135. }
  136. #menu #menuN LI#rejestracja A.act {
  137.  BACKGROUND-POSITION: 0px 0px
  138. }
[HTML] pobierz, plaintext
erix
21.02.2009, 14:16:49
Używaj bbcode, bo nie da się czytać...
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.