Jak zrobić takie MENU?

Witam. Nie wiem jak zrobić takie menu jakie znajduje się na stronie codjumper.pl

Chodzi mi o to, że przycisk ma jakieś tło, które po najechaniu się zmienia, a na tym przycisku jest jakiś napis :slight_smile:

Wiem w jaki sposób zrobić menu, w którym po najechaniu zmienia się obrazek, ale napis znajduje się na grafice (tekst nie jest napisany w html), przez co każdy inny odnośnik w menu ma inny obrazek i strona ładuje się dłużej…

Strasznie pogmatwałem, ale jeśli ktoś zrozumiał to z góry wielkie dzięki za pomoc :wink:

Proste:

.menu a {

 background: [color tla] url([adres obrazka normalnego]) no-repeat;

}

.menu a:hover {

 background: [color tła] url([adres obrazka po najechaniu]) no-repeat;

}

potem w kodzie:

Home
[/code]

Warto się przyjrzeć małej modyfikacji - mamy jedną grafikę z dwoma/trzema tłami, a w hoverach itp modyfikujemy tylko background-position. W ten sposób tło załaduje nam się do cache od razu - inaczej po najechaniu kursorem trzeba poczekać na załadowanie tego tła.

OK dałem sobie rade :smiley: . Umieściłem ten kod, który podał Crop z tym, że obrazek, który zrobiłem(150x30px) nie jest wyświetlony w całości tylko w takim rozmiarze, że obejmuje napis “Home”… :expressionless:

Dla wyjaśnienia:

Powinno wyglądać tak (+ napis Home)

c64e4bb3ad1775f1.jpg

a wygląda tak:

f6f0f98ff4f9c913.jpg

są to przykladowe obrazki ;]

To jest kod arkusza CSS.

Dodaj rozmiary.

.menu a {

background: [color tla] url([adres obrazka normalnego]) no-repeat;

width: 150px;

height: 30px;

}

.menu a:hover {

background: [color tła] url([adres obrazka po najechaniu]) no-repeat;

}

Nie wiem jak umieścić teraz tekst np w tym miejscu:

8352f70eeeaaa29d.jpg

teraz jest w tym :expressionless: :

949807206c47650d.jpg

Edit:

Dałem sobie rade :smiley:

Ale mam kolejny problem :expressionless:

zlikwidowałem podkreślenie odnośnika komendą:

text-decoration:none;

i tego podkreślenia nie ma we wszystkich przeglądarkach oprócz Opery i nie wiem co z tym zrobić…

Wkurzające jest to, że w jednej przeglądarce jest dobrze, a w drugiej żle:/. Tez sie “męcze” z moja stronka i pojawiaja sie takie problemy.

Może ktoś coś doradzi :slight_smile:

Może pokaż kod. Tak będzie łatwiej.

a.n_menu {

   text-decoration: none;

}

.n_menu {

   background: url(1.png) no-repeat;

   height: 30px;

   width: 150px;

}


.n_menu:hover {

   background-image: url(2.png);

   background-repeat: no-repeat;

   height: 30px;

   width: 150px;

}

Spróbuj tak.

Nic nie dało… ;/ to a przed n_menu co oznacza bo nie bardzo rozumiem…?

W dniu 25.06.2008 , o godzinie 23:24 został dopisany post przez AdZiU

Dałem rade… :smiley:

W ustawieniach Dreamweaver we właściwościach strony trzeba było ustawić Styl podkreślania na Nigdy nie podkreślaj

Mam jeszcze jedno pytanie: co zrobić aby obrazki z menu załadowały się już w trakcie ładowania strony internetowej, a nie w momencie najechania na nie kursorem?

Poczytaj o background-position.

Na temat background-position wszędzie piszą tylko o pozycjonowaniu tła… przejrzałem z 20 stron i na żadnej nie ma mowy o ładowaniu menu podczas wczytywania strony. ;/

Witam.

AdZiU , chodzi o to że wczytujesz całą grafikę i w momencie najechania myszką ta grafiką się przesuwa.

Chodzi mi o to, że grafika (1.png) wczytuje się podczas ładowania strony, co jest oczywiste z tym, że obrazek, który pojawia się po najechaniu na przycisk myszką (2.png) nie wczytuje się razem ze stroną, tylko dopiero po najechaniu na niego kursorem co małą chwilę trwa i nie za ciekawie wygląda (zamiana z 1.png na 2.png).

Po wczytaniu TEJ strony najedź na któryś przycisk z menu i zobacz, że zamiana z podstawowego obrazka (1.png) na obrazek po najechaniu (2.png) chwilę trwa, bo 2.png musi się w tym momencie wczytać…

Teraz już rozumiecie? :slight_smile:

Dwie sztuczki:

  • załaduj obrazki jako tło do np div’a o display:none; - raczej nie polecane.

.menu_home{

background:url(../images/menu/homef.png) top no-repeat;

}

.menu_home:hover{

background-position: 10px -66px;

}

Home

W drugim sposobie oby dwie części przycisku to jeden plik. Np u góry hover, na dole normalny stan. Po najechaniu myszką na obrazkek (którego wyświetlasz fragment dzięki width i height) tło przesuwa się o ile tam chcesz pikseli chowając jedną część, a odsłaniając drugą.