sobota, 4 maja 2013

Rozwijane menu - robienie "własnoręcznie"

Witajcie :)
Dłuuugo nie sprawdzałam e-maila, aż w końcu postanowiłam na niego tak z ciekawości zerknąć, a tam co?
- 20 maili z treścią: "Jak zrobić rozwijane MENU?".
Wstawienie rozwijanego menu jest strasznie kłopotliwe! Na swoim pierwszym blogu długo pracowałam, aby wszystko dobrze wstawić. Jeżeli ktoś zna się dobrze na kodach HTML, to będzie to dla niego proste, a wręcz banalne.
Jeżeli ktoś ma kłopoty z HTML, niech się za menu nie bierze, zepsuje to tylko bloga.

Rodzaje Menu.

1. CSS 3 Multi Level Drop Down Menu
2. CSS3 Multi Level Drop Down Menu 2
Kod pod linkiem
3. Facebook Style CSS Multi Level Menu
Kod pod linkiem
4. CSS Menu Drop Down
Kod pod linkiem
5. Multi Drop Down Menu
Kod pod linkiem
6. CSS3 Multi Menu
Kod pod linkiem
7. CSS3 Multi Drop Down Menu V3
Kod pod linkiem
8. CSS3 Drop Down Menus
Kod pod linkiem
9. CSS Multi Levels Menu
Kod pod linkiem
10. Multi Level Drop Down Menu IE
Kod pod linkiem
11. CSS Drop Down Menus #
Kod pod linkiem
12. CSS3 Multi LEV Menu
Kod pod linkiem
13. CSS3 DropLine Menu
Kod pod linkiem
14. CSS DropLine Menu
Kod pod linkiem
15. CSS3 Drop Down Menu
Kod pod linkiem
16. CSS3 Mega Levels Menu V2
Kod pod linkiem
17. CSS3 Mega Dropdown Menu V2
Kod pod linkiem
18. CSS Blue Menus Multi Level
Kod pod linkiem
19. CSS Mega Menu
Kod pod linkiem
20. CSS3 Multi Menu Levels
Kod pod linkiem
21. CSS3 Multi Column Menu
Kod pod linkiem
22. Vertical CSS3 Menu
Kod pod linkiem
23. CSS Menu Multi Levels
Kod pod linkiem
24. Opera Style Menu
Kod pod linkiem
25. Button CSS3 drop-down Menu
Kod pod linkami
W przypadku tego Menu, oprócz kodu, który wstawiamy standardowo nad </header>
Wstawiamy jeszcze kod JS pod znacznikiem <head>
26. GOLD Dropline Menu
Kod pod linkiem

UWAGA!!!
Podane Menu są kompatybilne z Mozilla Firefox, Google Chrome, Opera, Safari. W innych przypadkach np. Internet Explorer daje sobie radę. Niewykluczone jest, iż inne przeglądarki także dają sobie radę z tymi menu.

Sposób dodawania MENU na bloga/WAŻNE(!)

1. Wchodzimy w zakładkę Szablon i Edytuj kod HTML
2. Wyszukujemy znacznik </header> (w niektórych przypadkach <header>) i tuż nad nim wklejamy kod Menu.
Aby ułatwić sobie wyszukiwanie, należy nacisnąć F3 lub jednocześnie CTRL + F.
3. Teraz należy pozamieniać linki i nazwy na swoje (np. link do swojej notki, a nazwa (główna) np. Ciekawostki, (prowadzące do notki) np. Modne stylizacje).

Każde Menu możemy dostosować do swoich wymagań... O ile dobrze znamy się na CSS.

UWAGA!!! Zaleca się, aby kod danego menu pobrać i go skopiować z pliku, a nie bezpośrednio z serwisu, ze względu na to, iż na stronie Chomikuj.pl nie zawsze pokazuje się cały kod!

Perspektywa...
Jeżeli ktoś sądzi, iż wykona takie Menu "na szybko" to niech od razu poczeka do chwili, w której będzie miał czas mniej - więcej około godziny wzwyż, ponieważ "główkowanie" nad Menu jest strasznie czasochłonne, zarówno tak samo jak jego wstawienie. Dla tych co znają dobrze CSS i lubią sobie czasami w nim "poszperać" to będzie na pewno łatwizna, mi bynajmniej, wstawianie takiego Menu zajęło 10 minut (mam wykorzystane to Menu na swoim blogu o The Sims 3, link znajdziecie, w którejś notce na TYM blogu). Menu czasami niestety nie jest wyśrodkowane, nigdy nie spotkałam się z taką sytuacją, ale wiele osób się skarżyło. Jeżeli znajdę na to sposób, od razu wstawię to na bloga.

Pozdrawiam!
Wszelkie pytania składajcie na e-mail maabasz@gmail.com

2 komentarze:

nie mam ani header ani <header

Ponieważ najwyraźniej źle wpisałeś. Chodziło mi o (tu dostępne 2 możliwości) - albo , albo . :)

Prześlij komentarz