+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Jak zostało zrobione to menu? (/thread-jak-zostalo-zrobione-to-menu)
Strony:
1
2
Jak zostało zrobione to menu? - Moody - 11-05-2012
http://browsershots.org/
Na tej stronie zastanawia mnie technika wykonania górnego menu. Widzę, że to jest lista ul itd.
Czy span jest dozwolone w elemencie <a>?
I jak zrobili to, że tło przycisku jest dostosowane pod tekst. A nie, że każdy ma taką samą szerokość.
RE: Jak zostało zrobione to menu? - Heyek - 11-05-2012
Cześć, przeanalizuj sobie ich CSS'a
Kod:
.menu ul li a:hover, .menu ul li.active a {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://browsershots.org/static/images/bg.png");
background-origin: padding-box;
background-position: 100% -142px;
background-repeat: no-repeat;
background-size: auto;
text-decoration: none;
}
.menu ul li a:hover, .menu ul li.active a {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://browsershots.org/static/images/bg.png");
background-origin: padding-box;
background-position: 100% -142px;
background-repeat: no-repeat;
background-size: auto;
text-decoration: none;
}
.menu ul li a {
display: inline-block;
padding-right: 4px;
}RE: Jak zostało zrobione to menu? - Moody - 11-05-2012
Myślisz,ze gdybym przeanalizował kod i by mi się udało dodałbym ten temat?
Próbowałem to rozgryźć,ale nie udało mi się.
Wiem,ze jest użyty tylko jeden plik graficzny do tego czyli tzw sprite.
Ale jak to zrobil,bo są jakby 3 części. Środkowa prostakątna oraz lewa i prawa która jakby nadpisuje lewa i prawa cześć prostokąta i przez to są zaokrąglenia.
RE: Jak zostało zrobione to menu? - Kartofelek - 11-05-2012
Przykład zastosowania:
Kod:
<a href="">
<span>
Lorem ipsum
</span>
</a>Link ma w tym przypadku tło zajmujące powiedzmy 100%, a span tło niepowtarzalne ustawione na prawo. Tło spanu jest tym końcowym zaokrągleniem
które jakby zakrywa tło A które jest pod spanem.UŻYWAJCIE FIREBUGA. Przecież badając elementy dokładnie widać co tam się dzieje. Nawet macie podświetlane paddingi itp.
Chociaż takie rzeczy spokojnie da się zrobić w css3
RE: Jak zostało zrobione to menu? - Moody - 11-05-2012
Użyłem Firebug'a ale jakoś nie mogłem tego zczaić. No dobra. A co z początkiem elementu? bo ja sądziłem, że na ten przycisk składa się z trzech elementów. Lewego, srodkowego, prawego. Tymczasem powiedziałem mi tylko o prawym i o środkowym.
W dodatku z tego co widzę w Firebug. To element span ma tło odpowiadające ze lewą krwędź. A link z srodek i prawą część? Tak?
RE: Jak zostało zrobione to menu? - Moody - 11-05-2012
Nie, nie interesuje mnie konkretny problem. Inaczej prosiłbym o wskazówki czy da się inaczej. Ale po prostu chcę nauczyć się jak najwięcej więc każdą metodę wolę znać, bo każda ma jakieś swoje wady i zalety.
Poza tym kod wyżej nie ma gradientu
(Choć pewnie da się to ustawić w css3 również - ciekawe jak z obsługą w przeglądarkach)Kartofelek, zauważyłem, że to menu na tej stronie ma wadę, ponieważ nie jest tak na prawdę dostosowujące się w 100%. Dla przycisków z napisem krótkim ok. Ale jak napiszemy zdanie z 3 wyrazów to już nie zadziała, bo obrazek jest za krótki (wiem, że w menu nikt nie będzie miał tak długiego przycisku, natomiast chcę to wszystko pojąć i wiedzieć co i jak działa)
RE: Jak zostało zrobione to menu? - Kartofelek - 11-05-2012
Ale tak to się robi. Musisz brać po prostu teoretyczny max z którego się nie wychodzi. Menu zrobione jest na bazie 2 elementów. Jeden lewy na tło, drugi jako zaokrąglenie na prawo.
Tutaj w połowie masz o tym:
http://doman.art.pl/kursjs/kurs/jquery/tabs.html
RE: Jak zostało zrobione to menu? - Moody - 11-05-2012
Nie no już zrozumiałem. Wiem o co chodzi. To nie lepsza jest metoda (pomijając CSS3) tak by składała się z 3 części? lewa, środkowa i prawa? Przez co możemy mieć jakkolwiek długi tekst w środku.
RE: Jak zostało zrobione to menu? - Kartofelek - 11-05-2012
Jak ci się tam chce. Jest wiele metod.
Już kiedyś było to poruszane. Osobiście np lubię metodę na position:relative i position:absolute (LI ma position:relative, a te boczne pierdołki position:absolute
RE: Jak zostało zrobione to menu? - Moody - 12-05-2012
Nie, że mi zależy. Po prostu chciałem dowiedzieć się jak tamto menu zostało wykonane. Po czym wymieniłem tylko jej wady i zalety.
Umiałbym zrobić takie menu, które wyżej podałeś. Także spokojnie. Ja nie zakładałem tematu by ktoś mi wklejał kod i próbował zrobić za mnie. Chciałem tylko poruszyć temat, wymienić zdania, spostrzeżenia.