Układ poziomego menu na css i html | Tworzenie stron internetowych na CMS Wordpress, układ strony (HTML, CSS, jQuery) i SEO - optymalizacja.

  1. Utwórz znacznik dla menu
  2. Piszemy style naszego poziomego menu

Witajcie, drodzy czytelnicy mojego bloga! Dzisiejszy artykuł będzie bardzo przydatny dla początkujących projektantów stron internetowych. Od dziś będziemy z tobą narzucać proste menu poziome. Zanim przejdziemy bezpośrednio do layoutu, chcę powiedzieć kilka słów o tym, dlaczego zdecydowałem się wybrać ten konkretny temat do artykułu.

W rzeczywistości wszystko jest dość proste, kiedy pomyślałem o temacie następnej lekcji na stronie, zacząłem przywoływać i analizować moje doświadczenie w badaniu składu, a potem to, z czym musiałem się zmierzyć na początkowym etapie stawania się zecerem, którego nie rozumiałem przede wszystkim podczas studiowania tego pola i tak dalej Zadałem sobie wszystkie te pytania, aby lepiej zrozumieć, co może zainteresować osobę, która zaczyna swoją drogę jako koder. I osobiście, jak tylko zacząłem studiować układ, miałem przede wszystkim pytania dotyczące układu różnych menu, zwłaszcza jeśli chodzi o menu wielopoziomowe. I tak dzisiaj porozmawiamy o menu, a dokładniej o menu poziomym. Więc zaczynamy!

Przede wszystkim, jak można się domyślić, musimy utworzyć samicę html ze standardowym znacznikiem i dołączyć do niej plik stylu. Nie będę się rozwodził nad tym krokiem szczegółowo, ponieważ wciąż mam nadzieję, że nie jesteś aż tak początkujący, aby szczegółowo opisać, czym są ciało i głowa oraz jak są połączone style. Powiem tylko, że oprócz stylów dla naszego menu w pliku css, napiszę najprostszy reset, aby zresetować style i uzyskać takie samo wyświetlanie wcięć we wszystkich przeglądarkach. Dokładnie tak wygląda mój najprostszy reset:

* {padding: 0; margines: 0; }

Jeśli chodzi o zerowanie stylów, nie powiem jeszcze nic szczegółowego, ponieważ jest to zasadniczo temat innego artykułu, jedyne, co musisz wiedzieć o powyższym kodzie, to to, że dzięki temu kodowi wszystkie elementy strony, które będziemy pisać, będą wciskać margines i padding, należy to zrobić, aby nasza strona wyglądała tak samo we wszystkich przeglądarkach.

Więc co jest w nas na tym etapie? Mamy stronę HTML ze standardowym znacznikiem:

<! DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title> Menu poziome </ title> <link rel = "arkusz stylów" href = "style.css"> </ head> < body> </ body> </ html>

I mamy plik stylu połączony z tą stroną (mam style.css), o następującej treści:

* {padding: 0; margines: 0; }

Następnym krokiem jest utworzenie znaczników HTML dla naszego menu.

Utwórz znacznik dla menu

W naszym znaczniku użyjemy nowego tagu <nav>, który pojawił się w HTML5. Zdecydowałem się natychmiast nauczyć cię nowych tagów, aby podążać za trendem i standardem, że tak powiem. Pomimo faktu, że nowe znaczniki HTML 5 nie są obsługiwane przez starsze przeglądarki, nadal Zdecydowanie zalecam używanie ich w składzie, ponieważ prędzej czy później będziesz musiał przejść na nie tak samo, ponieważ projektanci stron internetowych przełączali się jednocześnie z układu tabelarycznego na układ blokowy, to jest rzeczywistość, lepiej podążać za trendem!

A ponieważ zaczęliśmy już mówić o obsłudze nowych tagów html 5, więc nie mamy z tym problemów w starszych przeglądarkach, musimy dołączyć specjalną bibliotekę do naszego dokumentu - html5shiv. Odbywa się to poprzez wstawienie
W sekcji głównej na stronie znajduje się następujący kod:

<! - [jeśli lt IE 9]> <script type = "text / javascript" src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </ script> <! [endif ] ->

Wszystko po tym tagu <nav> (i inne znaczniki związane z HTML5) będą zazwyczaj postrzegane przez stare przeglądarki.

Wróćmy bezpośrednio do naszego znacznika. Następnie musimy wstawić listę punktowaną do naszego tagu <nav>, dla mnie wygląda to tak:

<nav class = "menu"> <ul> <li> <a href="#"> Strona główna </a> </ li> <li> <a href="#"> O nas </a> </ li> <li> <a href="#"> Portfolio </a> </ li> <li> <a href="#"> Blog </a> </ li> <li> <a href = " # "> Kontakty </a> </ li> </ ul> </ nav>

Jak widać, dodałem menu .menu do naszego menu <nav>, zrobiłem to, aby nagle użyć jednego znacznika <Nav> na naszej stronie, nie będziemy mieć problemów ze stylami.

Tak więc w przypadku znaczników skończyliśmy, że czas zacząć pisać style bezpośrednio, ponieważ teraz nasze menu wygląda na łagodnie niezbyt:

Tak więc w przypadku znaczników skończyliśmy, że czas zacząć pisać style bezpośrednio, ponieważ teraz nasze menu wygląda na łagodnie niezbyt:

Piszemy style naszego poziomego menu

A więc pierwszą rzeczą w układzie menu jest usunięcie znaczników listy, oczywiście nie potrzebujemy ich, robi się to w ten sposób:

ul {style-list: none; }

Następnie nasze menu będzie wyglądało następująco:

Nie podoba mi się, że nasze menu jest przyklejone do krawędzi przeglądarki, naprawmy to:

.menu {szerokość: 960px; margin: 50px auto; }

Z tym kodem ustawiamy szerokość naszego menu, nadajemy wcięcia na górze i na dole przy 50px i wyśrodkowujemy. Kto nie wie, czy w elemencie bloku jest szerokość, aby umieścić ten element ściśle w środku, musimy ustawić go na wcięcie zewnętrzne (margines) po prawej i lewej wartości auto.

Następnym krokiem, który musimy zrobić, aby nasze menu było poziome, jest ustawienie elementów <li> float: left

.menu li {float: left; }

Wszystko jest teraz nasze menu stało się poziome.

Wszystko jest teraz nasze menu stało się poziome

Jeśli nie rozumiesz, co dokładnie się stało i co robi własność float, polecam poszukać informacji o tej właściwości i dokładnie ją przeanalizować, ponieważ
Żadna strona nie może się bez niej obejść, na pewno ci powiem. No dobrze, kontynuujemy!

Zajrzyjmy teraz do linków menu i przekonwertujmy je do normalnego widoku. Proponuję ustawić nasze linki do lewego i górnego wcięcia, usunąć podkreślenie, ustawić kolor tekstu i kolor tła:

.menu li i {display: block; / * Utwórz połączenie z elementem blokowym * / padding: 12px 20px; / * Ustaw wewnętrzne wcięcia * / text-decoration: none; / * usuń podkreślenie * / color: #fff; / * zmień kolor linku na biały * / background: # 444; / * zmień kolor tła na ciemny * / czcionka: 14px Verdana, sans-serif; / * ustaw rozmiar i nazwę czcionki * /}

Oto jedna z najważniejszych reguł - display: block;. Faktem jest, że domyślnie odsyłacze są małymi elementami, a wcięcia są stosowane do małych elementów w różnych przeglądarkach na różne sposoby, dlatego wskazane jest, aby link był elementem blokowym, a następnie stosował do niego tylko właściwości powiązane z wcięciami zewnętrznymi lub wewnętrznymi. Teraz nie chcesz ładować niepotrzebnych informacji z upływem czasu na prawdziwe przykłady, sam zrozumiesz, dlaczego taki nacisk kładzie się tutaj.

Zobaczmy, co zrobiliśmy, zaktualizuj stronę przeglądarki i taddam!:

:

Jak widać, nie wygląda źle, można powiedzieć, że w zasadzie nasze menu jest gotowe. Jedyne, co trzeba zrobić, to ustawić światło linków podczas unoszenia się, wydaje mi się, że menu będzie wyglądało lepiej z separatorami między punktami.

Zacznijmy od ograniczników:

.menu li {border-left: 1px solid # 666; } .menu li: first-child {border-left: none; }

Co tutaj zrobiliśmy? Tak, wszystko jest bardzo proste, ustawiamy dla naszych punktów (<li>) obramowanie po lewej o rozmiarze 1px i kolorze # 666; Jeśli chodzi o selektor .menu li: first-child, tutaj używamy specjalnej pseudoklasy, która pozwala wybrać pierwsze dziecko z listy. Polecam też bardziej szczegółowe czytanie o pseudoklasach w Internecie, dowiesz się wielu przydatnych rzeczy.

Ponownie widzimy, co się stało:

Ponownie widzimy, co się stało:

Moim zdaniem z ogranicznikami znacznie lepiej.

Więc możemy ustawić kolor linku tylko po najechaniu kursorem, wszystko jest tutaj bardzo proste:

.menu li a: hover {background: # 888; }

Ponownie, używając specjalnej pseudoklasy, tym razem - zatrzymaj się, ustawimy kolor linku po najechaniu na niego kursorem, wyglądamy:

W moim fajnym hope, mam nadzieję, że wyszedłeś z tego samego menu co ja.

Skończę tę lekcję na ten temat, mam nadzieję, że było to dla ciebie przydatne, a teraz wiesz, jak wypisać proste poziome menu na czystym html i css . Oczywiście stworzyliśmy menu jednopoziomowe, będzie to trochę trudniejsze z dwupoziomowym menu (z wbudowaną listą), ale to jest temat na kolejną lekcję, to wszystko, co mam. Przyjdź jeszcze raz, będę zadowolony !!!

Więc co jest w nas na tym etapie?