menu html - Kurs HTML i CSS
Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanegoJeżeli nie odpowiada nam podstawowy wygląd menu, można go zmienić wykorzystując polecenia CSS. W tym celu w pliku menu.css należy wkleić np.: #menu0 { width: 200px; margin: 10px; padding: 0; } #menu0 dt { background-color: #888; color: #fff; font-weight: bold; text-align: center; cursor: pointer; margin: 10px 0 0 0; padding: 2px; } #menu0 dd { background-color: #eee; color: #000; border-width: 0 1px 1px 1px; border-style: solid; border-color: #888...
- Menu rozwijane, otwierane, wysuwane / Skrypt menu rozwijanego, otwieranego, wysuwanego
Spis treści Wymagana wiedza Skrypt menu rozwijanego, otwieranego, wysuwanego Wymagana wiedza Listy definicyjne <dl>...</dl> Podstawy odsyłaczy Podstawy stylów CSS (m.in. arkusze stylów, klasy selektorów i pozycjonowanie absolutne) Skrypt menu rozwijanego, otwieranego, wysuwanego Aby wstawić na swoją stronę menu rozwijane, postępuj według poniższych instrukcji: Utwórz w swoim edytorze HTML nowy dokument. Wklej do niego poniższy kod i zapisz w pliku menu.js: /** * @author...
Szablon strony na DIV-ach / Płynny szablon...jakieś szerokie elementy, które mogą nie zmieścić się w ustalonej szerokości dla stałego szablonu (czyli zwykle 780px minus szerokość kolumny menu i ewentualnie dodatkowych informacji). W płynnych szablonach najczęściej tylko blok treści strony dopasowuje się do rozmiarów okna przeglądarki, a pozostałe kolumny zawsze pozostają stałe. Dla kolumny menu zmiana szerokości zwykle nie miałaby większego sensu, gdyż często zawiera ustalone wąskie elementy (odnośniki nawigacyjne). Poza tym...
- Menu rozwijane, otwierane, wysuwane / Pozycja absolutna
Spis treści Pozycja absolutna Inicjalizacja Menu otwierane Szczególnie dla menu otwieranego dość nieprzyjemną właściwością jest fakt, że przy jego rozwijaniu elementy poniżej są przesuwane w dół. Można temu zapobiec określając odpowiednią pozycję absolutną bloku. Oczywiście można to zrobić bezpośrednio dodając odpowiednie deklaracje CSS. Jednak trzeba przewidzieć, co się stanie, jeśli przeglądarka użytkownika nie będzie obsługiwać JavaScript. Samo menu nadal będzie funkcjonalne pod...
- Szablon strony na DIV-ach / Stały szablon
...taki szablon, to również użytkownicy 800x600 będą w stanie w miarę wygodnie przeglądać serwis. Nie można przecież jednocześnie korzystać z menu nawigacyjnego oraz czytać treści artykułu na stronie (chyba, że ktoś ma bardzo podzielną uwagę i dużego zeza rozbieżnego 😉). Zatem przy odpowiednio dobranej szerokości bloku treści, użytkownicy niższych rozdzielczości nie będą musieli używać poziomego paska przewijania podczas czytania artykułu, a jedynie w momencie przejścia do widoku menu...
- Menu drzewiaste / Skrypt menu drzewiastego
Spis treści Wymagana wiedza Skrypt menu drzewiastego Kolekcje dokumentów Wyrażenia regularne Wymagana wiedza Zagnieżdżanie wykazów <ul>...</ul> Podstawy odsyłaczy Podstawy stylów CSS (m.in. arkusze stylów i klasy selektorów) Skrypt menu drzewiastego Aby uzyskać menu drzewiaste, utwórz plik tree.css w tym samym katalogu co strona i zapisz w nim: ul.tree { display: block; margin-left: 0; padding-left: 0; } ul.tree ul { display: block; margin-left: 0; padding-left: 0...
- Szablon strony na DIV-ach / Semantyczny szablon strony
...stylizacji elementów stron internetowych. Wiesz już zapewne, dlaczego rozwiązanie oparte o CSS jest najkorzystniejszym wyborem przy tworzeniu menu nawigacyjnego. Dlaczego zatem ograniczać się tylko do menu, kiedy można przecież zyskać jeszcze więcej, projektując całą stronę w ten sam sposób: Wyobraź sobie, że po roku działalności strony zechcesz całkowicie odmienić jej wygląd, np. przenosząc kolumnę menu z lewej na prawą stronę. Dzięki CSS to tylko jedna linijka w arkuszu stylów...
- Dobre praktyki / Przykazania webmastera
...Jeśli wykorzystasz je do budowy szkieletu strony, mocno ograniczysz sobie możliwości późniejszej zmiany wyglądu serwisu (np. przeniesienie kolumny menu z lewej na prawą stronę itp.). Są lepsze alternatywy: Szablon strony na DIV-ach. Nawigacja musi być intuicyjna i wygodna Linki stanowiące menu nawigacyjne serwisu muszą być odpowiednio wyeksponowane. Niedopuszczalne jest, aby użytkownik szukał ich gdzieś w treści obszernego artykułu. Dobre miejsce na nawigację to nagłówek serwisu...
- Szablon strony na DIV-ach / Responsywny szablon
...tego typu zabiegów można zaliczyć: Usunięcie elementów strony, które mogą być mało przydatne użytkownikom mobilnym Przesunięcie kolumny menu na początek lub koniec treści bądź umieszczenie jej w otwieranym menu Dopasowanie rozmiaru czcionki Przygotowanie fizycznie pomniejszonych zdjęć i innych multimediów Zapewnienie większej przestrzeni wokół klikalnych elementów menu, tak aby łatwiej je było wskazać palcem na ekranie dotykowym urządzenia bez przypadkowej aktywacji sąsiednich...
- Menu rozwijane, otwierane, wysuwane / Menu otwierane
Spis treści Menu otwierane Opóźnienie przy otwieraniu/zamykaniu Menu otwierane Czasem przydatne jest wstawienie menu, które otwiera się po wskazaniu nagłówka myszką, a chowa automatycznie po usunięciu wskaźnika myszki z obrębu wybranego fragmentu menu. <script> new Menu('menu0', '', true); </script> Przykład Wskaż poniższe nagłówki menu myszką: HTML Dla zielonych BODY i META Tekst Odsyłacze Tabele Multimedia Ramki Formularze CSS Kaskadowe Arkusze Stylów Definicje...