[HTML][CSS]Menu na stronkę Opcje

[smagul]

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?

Ten post edytował smagul 19.02.2009, 13:24:56

[Strarus]

I to ja niby jestem chory....

[zzeus]

Może napisz coś więcej o tym menu poza tym że je widzialeś (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

[carck3r]

(IMG:http://forum.php.pl/style_emoticons/default/laugh.gif) Wyciągnę zaraz zza pazuchy moją kryształową kulę.

Ten post edytował carck3r 19.02.2009, 13:25:51

[smagul]

siostrzeniec się bawił (2 latka) i wysłał niedokończonego posta jak odszedłem od kompa (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif) sorry

[Strarus]

background-position: -30px;

[erix]

Kolejne komentarze nie wnoszące nic konkretnego do tematu będą nagradzane warnami.

[smagul]

zrobilem menu ale marnie mi to wyszło, potrzebuje pomocy.

(IMG:http://img407.imageshack.us/img407/1288/menu.jpg) 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  (IMG:http://forum.php.pl/style_emoticons/default/blinksmiley.gif) . oraz trzeba by podnieść boki tego menu.

[HTML] pobierz, plaintext 
<hr class="podzial" />
<DIV id=menu>
<UL id=menuN>
  <li id="lewa"><p>Lewa strona</p>
  <li id="news"><a title="Newsy" 
<?php if($HTTP_GET_VARS['strona']=='news'){ ?>class="act" <?php } ?> 
  href="index.php?strona=news">Newsy</a>
  
  <li id="pozdro"><a title="Pozdrowienia" 
<?php if($HTTP_GET_VARS['strona']=='pozdrowienia'){ ?>class="act" <?php } ?> 
  href="index.php?strona=pozdrowienia">Pozdrowienia</a>
  
  <li id="forum"><a title="Forum" href="forum" target="_blank">Forum</a> 
  
  <li id="prezenterzy"><a title="Prezenterzy" 
<?php if($HTTP_GET_VARS['strona']=='prezenterzy'){ ?>class="act" <?php } ?> 
  href="index.php?strona=prezenterzy">Prezenterzy</a> 
  
  <li id="top_lista"><a title="Lista przebojów" 
<?php if($HTTP_GET_VARS['strona']=='top_lista'){ ?>class="act" <?php } ?> 
  href="index.php?strona=top_lista">Top Lista</a> 
  
  <li id="bajery"><a title="Bajery" 
<?php if($HTTP_GET_VARS['strona']=='bajery'){ ?>class="act" <?php } ?> 
  href="#">Bajery</a>
  
<?php if($HTTP_SESSION_VARS['user_online']) {?>
  <li id="profil"><a title=Profil  <?php if($HTTP_GET_VARS['strona']=='profil'){ ?>class="act" <?php } ?> 
  href="index.php?strona=profil">Profil</a>
<?php }
else {?>
  <li id="rejestracja"><a title="Rejestracja" 
<?php if($HTTP_GET_VARS['strona']=='rejestracja'){ ?>class="act" <?php } ?> 
  href="index.php?strona=rejestracja">Rejestracja</a>
<?php } ?>
  <li id="prawa"><p>Prawa strona</p>
</LI></UL></DIV>
<hr class="podzial" />
[HTML] pobierz, plaintext 

i CSS

[HTML] pobierz, plaintext 
hr.podzial {
 color: white;
 width: 0;
 height: 0;
 position: inherit;
}
 
#menu {
 MARGIN: 0px; WIDTH: 980px; POSITION: relative; HEIGHT: 50px
}
#menu #menuN {
 padding: 0; 
 margin: 0 auto;
}
#menu #menuN LI {
 DISPLAY: inline
}
 
#menu #menuN LI A {
 FLOAT: left; OVERFLOW: hidden; MARGIN-RIGHT: 0px; PADDING-TOP: 40px; HEIGHT: 0px
}
#menu #menuN LI P {
 FLOAT: left; OVERFLOW: hidden; MARGIN-RIGHT: 0px; PADDING-TOP: 40px; HEIGHT: 0px
}
 
#menu #menuN LI#lewa P {
 BACKGROUND: url(gfx/menu/lewa.png) no-repeat 0px -120px; 
 WIDTH: 17px;
}
#menu #menuN LI#prawa P {
 BACKGROUND: url(gfx/menu/prawa.png) no-repeat 0px -120px; 
 WIDTH: 22px;
}
 
#menu #menuN LI#news A {
 BACKGROUND: url(gfx/menu/newsy.png) no-repeat 0px -120px; 
 WIDTH: 61px;
}
#menu #menuN LI#forum A {
 BACKGROUND: url(gfx/menu/forum.png) no-repeat 0px -120px; 
 WIDTH: 94px;
}
#menu #menuN LI#pozdro A {
 BACKGROUND: url(gfx/menu/pozdro.png) no-repeat 0px -120px; 
 WIDTH: 144px;
}
#menu #menuN LI#prezenterzy A {
 BACKGROUND: url(gfx/menu/prezenterzy.png) no-repeat 0px -120px; 
 WIDTH: 124px;
}
#menu #menuN LI#top_lista A {
 BACKGROUND: url(gfx/menu/top_lista.png) no-repeat 0px -120px; 
 WIDTH: 102px;
}
#menu #menuN LI#bajery A {
 BACKGROUND: url(gfx/menu/bajery.png) no-repeat 0px -120px; 
 WIDTH: 71px;
}
#menu #menuN LI#profil A {
 BACKGROUND: url(gfx/menu/profil.png) no-repeat 0px -120px; 
 WIDTH: 60px
}
#menu #menuN LI#rejestracja A {
 BACKGROUND: url(gfx/menu/rejestracja.png) no-repeat 0px -120px; 
 WIDTH: 119px
}
#menu #menuN LI#forum A:hover {
 BACKGROUND-POSITION: 0px -80px
}
#menu #menuN LI#pozdro A:hover {
 BACKGROUND-POSITION: 0px -80px
}
#menu #menuN LI#prezenterzy A:hover {
 BACKGROUND-POSITION: 0px -80px
}
#menu #menuN LI#top_lista A:hover {
 BACKGROUND-POSITION: 0px -80px
}
#menu #menuN LI#bajery A:hover {
 BACKGROUND-POSITION: 0px -80px
}
#menu #menuN LI#profil A:hover {
 BACKGROUND-POSITION: 0px -80px
}
#menu #menuN LI#news A:hover {
 BACKGROUND-POSITION: 0px -80px
}
#menu #menuN LI#rejestracja A:hover {
 BACKGROUND-POSITION: 0px -80px
}
#menu #menuN LI#forum A:active {
 BACKGROUND-POSITION: 0px -50px
}
#menu #menuN LI#pozdro A:active {
 BACKGROUND-POSITION: 0px -40px
}
#menu #menuN LI#prezenterzy A:active {
 BACKGROUND-POSITION: 0px -40px
}
#menu #menuN LI#top_lista A:active {
 BACKGROUND-POSITION: 0px -40px
}
#menu #menuN LI#bajery A:active {
 BACKGROUND-POSITION: 0px -40px
}
#menu #menuN LI#profil A:active {
 BACKGROUND-POSITION: 0px -40px
}
#menu #menuN LI#news A:active {
 BACKGROUND-POSITION: 0px -40px
}
#menu #menuN LI#rejestracja A:active {
 BACKGROUND-POSITION: 0px -40px
}
#menu #menuN LI#forum A.act {
 BACKGROUND-POSITION: 0px 0px
}
#menu #menuN LI#pozdro A.act {
 BACKGROUND-POSITION: 0px 0px
}
#menu #menuN LI#prezenterzy A.act {
 BACKGROUND-POSITION: 0px 0px
}
#menu #menuN LI#top_lista A.act {
 BACKGROUND-POSITION: 0px 0px
}
#menu #menuN LI#bajery A.act {
 BACKGROUND-POSITION: 0px 0px
}
#menu #menuN LI#profil A.act {
 BACKGROUND-POSITION: 0px 0px
}
#menu #menuN LI#news A.act {
 BACKGROUND-POSITION: 0px 0px
}
#menu #menuN LI#rejestracja A.act {
 BACKGROUND-POSITION: 0px 0px
}
[HTML] pobierz, plaintext 

Ten post edytował smagul 21.02.2009, 14:28:32

[erix]

Używaj bbcode, bo nie da się czytać...