[Tutorial] Ciekawe menu w CSS


(system) #1

Może by tak tutorial w webmastering? :mrgreen:

Pokażę Wam jak zrobić bardzo fajne menu za pomocą CSS.

Na początek robimy liste w html:

To jest nasze menu.

Oczywiście bez styli wyglada źle :wink:

Teraz robimy style.

Trochę tego jest... ale efekt tego mi się bardzo podoba :mrgreen:

są to komentarze w css, które nie spowodują błędów.

Wynik: http://cyg.ovh.org/tutoriale/css_menu.htm

* Niestety w IE nie podświetla się prostokąt... // poprawione

Być może jest gdzieś błąd, to postaram się go poprawić.


(Piotrek Płatek) #2

Ale fajnie, ale fajnie !!


(Li0n) #3

Miodzio :mrgreen:


(SER) #4

Witam :slight_smile:

Dopiero zaczynam się uczyć webmasteringu, a bardzo zaciekawił mnie ten tutorial :wink:

Jednak mam pewien problem :

Dotarłem do tego momentu i nie wiem, co robić dalej :frowning:

Za pomoc będę wdzięczny :stuck_out_tongue:


(system) #5

Strona Główna

Download

Kontakt

Forum


(SER) #6

Dzięki, działa :slight_smile:

Błąd polegał na tym, że w dokumencie HTML nie wpisałem linijki :

Ale dopisałem i wszystko pięknie wygląda :slight_smile:


Bardzo fajny tutorialek. Na pewno dużo osób z niego skorzysta :slight_smile:


(adam9870) #7

tutaj ma byc logo

tutaj ma byc menu gorne

tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc

Copyright © 2005-2006 by Adam. All rights reserved.

(system) #8

Nie mam zielonego pojęcia jak Ty chcesz to zrobić… :mrgreen:

Zobacz: http://cyg.ovh.org/poza-planem/

albo może ja już dzisiaj mam dość :wink: i nie wiem o co chodzi :]


(adam9870) #9

Dzięki :slight_smile:

Wszystko działa bjutifull :spoko:

http://adam9870.ovh.org/rozne_pierdoly/test.php


(Lstanczak) #10

Witam

Wszystko fajnie i ładnie tylko znowu jak zwykle w MSIE 6.x wygląda inaczej niestety. Nie miało by to jeszcze takiego znaczenia gdyby nie to że menu zmienia wielkość podczas wybierania przycisków.

Pozdrawiam.


(system) #11

Tak to już jest w IE… :?

Ale znalazłem błąd.

W: #menu a, zamiast

margin-bottom: 1px;

powinno być

margin-top: 1px;

Raczej teraz powinno działać. A co do tego błędu, że w IE nie podświetlają się prostokąty, zdajde mi się, że jestem bliski naprawienia tego :lol:


(Plutex) #12

a jak zrobić żeby ten prostokąt świecił sie po najechaniu na inny kolor??


(system) #13

No tak, troche dziurawy tutorial zrobiłem :wink: Ale to w końcu mój pierwszy.

Musisz zmienić #9CD3D3 w #menu li:hover


(Szymcia 94) #14

Dzieki te menu jest fajne thx :smiley:


(system) #15

Cygan , doskonała robota :mrgreen:

widziałem wiele razy, jak taki efekt był robiony za pomocą grafik, nie przyspieszało to ładowania strony…


(system) #16

Ehhh… miałem trochę czasu, to napisałem poprawkę i zrobiłem, aby prostokąty podświetlały się pod IE… może komuś się przyda…


(Filipsko) #17

Cygan, jak poprawiłeś to aby działało w IE? Bo ja mma problem z elementem DIV w menu. W IE się nie podświetla http://www.filips.ovh.org/dp/ mógłbyś wskazać błąd? Byłbym wdzięczny :]


(system) #18

Zrób menu na listach ul, li i umieść to wszystko w jednym divie, a nie tak, że każdy link w divie o clasie “menu”.

Potem zrobisz tak jak na moim przykładzie:

i #menu a:hover będzie działać.

Teraz jakoś nie mam głowy, aby to na tacy Ci podać, ale jeszcze spróbuje…

Ogólnie, problem z podświetlaniem jest taki, że element (div, li - czyli w Twoim przypadku menu:hover odpada) w IE się nie podświetli, więc musisz zrobić to poprzez: a:hover


(Bartlomiejmalysz) #19

Witam.

Chciałem podziękować za ciekawy pomysł. Na pewno zmodyfikowany będzie często gościł na moich www.

Przez przypadek odkryłem ciekawą rzecz. Mianowicie nie wpisałem background-color w stylu #menu i stało się coś o czym nie miałem pojęcia. Menu stało się przeźroczyste!


(Pavobe Reg) #20

Ostatnio prostota jest w cenie, bardzo przyjemne menu. Prosimy więcej ;).