Zrób menu CSS, które wypada z głównego menu
Większość ludzi, którzy mają komputery, zawsze próbuje połączyć się z Internetem. Potem każdy może odwiedzać różne witryny jako użytkownik. Może to być wyszukiwanie informacji, rozrywka, szkolenia, gry, rozmowy na forach i inne.
Uzyskując dostęp do strony witryny, użytkownik widzi jej zawartość. To jest jak treść książki, którą zamierzasz przeczytać. Treść składa się z różnych zestawów linków, które tłumaczą użytkownika na inne strony zasobu lub nawet na inne strony. Takie linki pomagają użytkownikom poruszać się po Internecie. Łącza są pogrupowane w oddzielne bloki reprezentujące menu serwisu.
Funkcjonalność dowolnego zasobu zależy w dużej mierze od tego, które menu zostanie na nim użyte. Menu serwisu może mieć inną konstrukcję, orientację poziomą lub pionową, umieszczoną u dołu, u góry lub z boku, ukryć, otworzyć, upuścić i rozwinąć.
Poziome menu rozwijane CSS
Poziome menu rozwijane służy do organizowania nawigacji. struktura strony. Nie należy nadużywać liczby poziomów do zainwestowania, nie powinno być więcej niż dwa. Przy większej liczbie użytkowników znacznie trudniej będzie znaleźć potrzebne informacje. Następnie, bardziej szczegółowo rozważamy sposób tworzenia menu.
Wyobraź sobie menu CSS, które wypada z głównego bloku poziomego. Skomplikujmy to zadanie i utwórz menu rozwijane CSS po najechaniu myszą. Musi istnieć jakiś główny blok poziomy z linkami reprezentującymi pozycje menu. Po najechaniu myszą na te punkty, powinny zostać otwarte dodatkowe punkty nawigacyjne.
Aby utworzyć rozwijane menu CSS, potrzebujesz:
- Plik HTML;
- Plik CSS;
- obraz w tle.
Obraz w tle jest dodatkowym elementem poprawiającym wygląd i sprawiającym, że menu jest stylowe.
Utwórz plik html
Strony dowolnej witryny mogą być statyczne lub dynamiczne. Strona statyczna witryny wyświetlana w przeglądarce jest wyświetlana w formularzu, w którym została oryginalnie utworzona. Strona dynamiczna jest tworzona po otwarciu w przeglądarce z oddzielnych stron wtyczek i dodatkowych danych wyjściowych z bazy danych. Ale w każdym przypadku, jeśli otworzysz stronę z kodem źródłowym za pośrednictwem przeglądarki, wyświetlona zostanie strona HTML znacznika hipertekstu. Aby utworzyć menu, musisz opracować stronę HTML i zapisać ją w pliku HTML. Stwórz menu c, które w ten sposób wypada w inny sposób. Strony HTML można tworzyć w dowolnych edytorach tekstu, ale lepiej używać wyspecjalizowanych: Notepad ++ lub Adobe Dremweaver CSS. Otwórz pustą stronę w edytorze, wprowadź potrzebny kod i zapisz go pod nazwą myindex.html. Komentarze można dodawać bezpośrednio w kodzie, między specjalnymi znacznikami. które są używane w tym celu w HTML.
Układ strony podczas tworzenia rozwijalnego menu poziomego CSS będzie się różnić od zwykłego menu standardowego, ponieważ niezbędne elementy listy
- lub
- .
Kod HTML
Należy zauważyć, że w HTML wszystkie konstrukcje pomiędzy nawiasami <> są nazywane znacznikami. Tagi mogą być pojedyncze i pary. Znacznik pary musi zawierać dwie pary nawiasów <>, aw drugiej parze struktura wewnątrz zaczyna się od ukośnika /. W sparowanym tagu pierwszy tag jest otwierający, a drugi jest zamykający.
Utwórz kod:
Możesz więc stworzyć nieskończoną liczbę elementów i podmenu. Na samym końcu zamknij wszystkie sparowane tagi.
Tworzenie pliku CSS
Plik został podłączony do pliku HTML. style style.css niezbędne nie tylko do prawidłowego pozycjonowania menu na stronie internetowej, ale także do nadania menu pięknego wyglądu, tworząc niepowtarzalny projekt strony. Plik CSS jest tworzony w tym samym edytorze co plik HTML, ale w przeciwieństwie do strony HTML, użytkownik zobaczy tylko wynik pliku stylu na wyświetlanej stronie. Ponadto podczas dodawania komentarzy do CSS używany jest / * Comment ... * / construct.
Kod CSS
Utwórz kod:
/ * Menu rozwijane CSS * /
body {/ * Styl strony głównej treści * /
tło: # 0814da; / * Kolor tła * /
margin: 0; / * Wyściółka zewnętrzna * /
wypełnienie: 0; / * Wyściółka wewnętrzna * /
rodzina czcionek: "Trebuchet MS", Arial, Helvetica, sans-serif; / * Rodzina czcionek * /
}
.przykład {/ * całego bloku menu * /
pozycja: względna; / * Pozycjonowanie względem pochodzenia * /
background: # ebecf7 url (../ images / vanbackground.jpg); / * Tło z obrazem dla całego menu * /
szerokość: 525 pikseli; / * Szerokość całego bloku menu * /
wysokość: 384 pikseli; / * Wysokość całego bloku menu * /
granica: 1px # 000 ciało stałe; / * Grubość i styl obramowania całego bloku menu * /
margin: 21px auto;
dopełnienie: 16 pikseli;
}
/ * style menu * /
.navigator, .navigator ul {/ * Styl bloku z nienumerowaną listą * /
styl listy: brak; / * Anuluj znaczniki dla listy * /
margin: 0;
wypełnienie: 0;
}
.navigator {/ * Styl bloku nawigacji * /
pozycja: względna;
}
.navigator ul {/ * Nienumerowany styl listy * /
wysokość: 0; / * Wysokość * /
lewo: 0; / * Left * /
przepełnienie: ukryte; / * Część bloku jest ukryta, jeśli nie pasuje całkowicie do podanej przestrzeni * /
pozycja: absolutna; / * Wykonujemy pozycjonowanie absolutne * /
top: 47px; / * Powyżej * /
}
.navigator li {/ * Styl nienumerowanych przedmiotów * /
float: left; / * Zawijanie po lewej stronie * /
pozycja: względna;
}
.navigator li a {/ * Niepubliczny styl listy * /
kolor tła: # 7c75b7; / * Kolor tła * /
granica: 1px bryła # 7c75b7;
kolor: #fbfbff;
display: block; / * Pokaż po bloku. * /
rozmiar czcionki: 15 pikseli; / * Ustaw rozmiar czcionki * /
wysokość linii: 34 pikseli; / * Odstępy między wierszami * /
dopełnienie: 6px 21px;
dekoracja tekstowa: brak; / * Tekst bez projektu * /
przejście: 0,6 s;
}
.navigator li: hover> a {/ * Styl pozycji na nienumerowanej liście po najechaniu * /
tło: # 8fcb38;
border-color: # 7c75b7;
kolor: #fbfbff;
}
.navigator li: hover ul.vipadnoe {/ * Otwórz menu rozwijane stylu * /
height: auto;
szerokość: 181 pikseli;
}
.navigator ul li {/ * Lista stylów i przedmioty * /
-moz-transition: 0.7s;
}
.navigator li ul li {/ * Styl-lista-pozycji * /
-moz-transition-delay: 1s;
}
.navigator li: hover ul li {/ * Styl kursora myszy * /
}
.navigator ul li a {/ * Styl list-item-link * /
tło: # 7c75b7;
border-color: # 7c75b7;
kolor: #fbfbff;
wysokość linii: 2px;
-moz-transition: 1.7s;
-o-przejście: 1.7s;
-webkit-transition: 1.7s;
przejście: 1,7 s;
}
.navigator li: hover ul li a / / Unoszące się elementy-lista-pozycji-link * /
wysokość linii: 36 pikseli;
}
.navigator ul li a: hover {/ * Lista stylów-elementów plus link do hover * /
tło: # 8fcb39;
background-image: rgba (41, 137,216,0.5);}
Po utworzeniu plików myindex.html i style.css należy je umieścić w osobnym folderze. Dla wygody tworzymy w folderze "Moje dokumenty" oddzielny folder demo, a w nim folder CSS, w którym umieszczamy plik style.css, oraz folder obrazów, w którym umieszczamy obraz tła określony w pliku stylu. W przypadku pliku myindex.html nie tworzymy kolejnego osobnego folderu i umieszczamy go w oryginalnym folderze demonstracyjnym. Teraz, otwierając plik myindex.html w przeglądarce, można zobaczyć poziome menu CSS, które pojawia się po najechaniu myszą. To wszystko.
W ten sam sposób na CSS tworzone jest pionowe menu rozwijane, ale tylko w tym celu trzeba opracować nieco inny plik stylu.