Górne menu strony / Navbar
autor: Robert
24 lipca 2013
Większość stron internetowych posiada na górze menu. Jest to pewien standard i internauci są do niego przyzwyczajeni. W tym artykule pokażę jak wykonać menu z linkami, formularzem, i listą rozwijaną.
Całość menu
Najpierw pokażę cały kod menu stron, następnie będę opisywał jego elementy.
Po pierwsze jeśli chcemy by nasze menu nie było na całą szerokość strony to musimy je zamknąć w kontenerze (<div class="container">
W przeciwnym razie zaczynamy od otwarcia menu za pomocą:
<nav class="navbar navbar-default" role="navigation">
Następnie znów pojawiają się 2 rozwiązania:
1. Gdy chcemy by zawartość naszego menu rozciągała się po całej szerokości ekranu otwieramy znacznik:
<div class="container-fluid">
2. Gdy chcemy by zawartość menu była wyśrodkowana ale samo menu bylo całej szerokości strony:
<div class="container">
Kolejnym elementem który otwieramy jest
<div class="navbar-header">
w którym umieszczamy nasze logo i przycisk do rozwijania menu w wersji mobilnej. Po zawartość tego diva odsyłam do gista powyżej. Następnie div ten zamykamy.
Następny element to div w którym zamkniemy elementy menu jak linki, formularz, listy itp. Otwieramy go za pomocą:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
Wewnątrz w/w diva umieszczamy listę linków za pomocą znacznika
<ul class="nav navbar-nav">
gdy linki mają być po lewej stronie menu bądź
<ul class="nav navbar-nav navbar-right">
gdy mają być po prawej. Jeśli wewnątrz listy ma znaleźć się lista rozwijana otwieramy ją za pomocą znacznika
<li class="dropdown">
wewnątrz którego najpierw musi znaleźć się kod
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Lista rozwijana <span class="caret"></span></a>
odpowiadający za tytuł listy oraz wyświetlający symbol jej rozwijania. A następnie otwieramy nową listę za pomocą znacznika
<ul class="dropdown-menu" role="menu">
. Na koniec zamykamy obydwie listy.
Gdy chcemy wewnątrz menu umieścić formularz np. logowania lub wyszukiwania korzystamy z kodu jak w zwykłym formularzu dodając jedynie znacznikowi form klasy .navbar-form .navbar-left
Całość opisu wydaje się skomplikowana ale czytając go i analizując jednocześnie kod wszystko stanie się jasne i czytelne:)
Przyciski w menu
Jeśli chcemy dodać w naszym menu umieścić przycisk, który nie jest zamknięty wewnątrz formularza musimy dopisać mu dodatkową klasę .navbar-btn a całość wygląda tak:
<button type="button" class="btn btn-default navbar-btn">Zaloguj się</button>
Tekst w menu
Gdy w naszym menu chcemy umieścić sam tekst, bez linków, przycisków itp tworzymy paragraf z klasą .navbar-text a całość wygląda tak:
<p class="navbar-text">Lorem ipsum dorem</p>
Zwykłe linki w menu
Jak pewnie zauważyliście linki w menu zostają specyficznie ostylowane. W przypadku gdy chcieli byśmy stworzyć zwykły link to wewnątrz paragrafu z klasą .navbar-text umieszczamy znacznik a z klasą .navbar-link. Całość wygląda następująco:
<p class="navbar-text navbar-right">Paragraf, który zawiera zwykły <a href="#" class="navbar-link">LINK</a></p>
Ustawianie elementów po bokach
Aby wybrane elementy menu znajdowały się po jego lewej stronie nie musimy robić nic, lub gdy pojawią się jakieś problemy z wyświetlaniem nadać im klasę .navbar-left. Gdy chcemy przesunąć elementy menu na jego prawą stronę to korzystamy z klasy .navbar-right
Post się przydał? Oceń go proszę.
(13 głosów, średnia: 4,85 na 5)
Loading...Komentarze: 25 komentarzy
Kliknij tutaj, aby anulować odpowiadanie.Tajniak 23 listopada 2014 o 20:39
No fajnie, ale teraz: dlaczego mi to nie działa? To znaczy wszystko u mnie wygląda bardzo ładnie, podobnie jak na przykładzie (skopiowałem powyższy przykład). Tylko listy rozwijane są rozwinięte, przycisk z treścią „lista rozwijana” jest na całą szerokość podmenu rozwijanego i pomimo klikania nie zwijaja podmenu, a cały blok bs-example-navbar-collapse-1 rozciągnął się w pionie, zawierając w sobie te rozwijane listy.
Do nagłówka oczywiście dodałem link do boostrap.min.css, do stopki przed body linki do jquery.min.js i bootstrap.min.js, a potem dodałem jeszcze na dole także jakiegoś docs.min.js, a w nagłówku bottstrap-theme.min.css (wszystkie linki prawidłowo – pobierają zawartość, co widać w Firebugu) i dalej nic…
Nie mam blokad js, Adblok wyłączony, mam najnowszą wersję Xampp.
Czego nie wiem?
OdpowiedzRobert 24 listopada 2014 o 09:08
Hej, wklej proszę swój kod na http://www.bootply.com/new i podeślij. Zobaczymy co jest nie tak:)
OdpowiedzTajniak 25 listopada 2014 o 00:08
Dzięki serdecznie, już mam dobrze. Przeanalizowałem całość i znalazłem winnego – w tym kodzie była klasa identyczna, jak miałem poniżej, do której dodałem w css „position” kolidujące z menu górnym. Wcześniej przerobiłem kod strony pod bootstrapa używając podobnych klas w pełnym menu kategorii, ale z „accordion” a nie „dropdown”, a dopiero potem dodałem „to” menu na górze, gdzie są tylko główne kategorie,
Trudno znaleźć w Firebugu taki błąd, bo do każdego elementu należy przewinąć pół kilometra wszelkich odnośników do różnych miejsc w arkuszach css Bootstrapa. Używam czasem małego Pure, a zwykle tylko opierałem się po prostu na media-query. Muszę teraz pierwszy raz użyć Bootstrapa i przeraża mnie ilość kodu, którą widzę w Firebugu.
Przy okazji tego „buga” nauczyłem się, że powinienem dodawać w kodzie dodatkowe, własne klasy zamiast używać bootstrapowych w swoich arkuszach styli.
Nadal jednak nie wiem w jakiej sytuacji która klasa menu jest najlepsza. Co trafię na przykład, to jest inaczej. Oglądając różne menu, po bazowej klasie nav w nagłówku widać, że występują różne klasy zamiennie nawet, jeśli wyglądają i funkcjonują prawie identycznie. Nie zauważyłem jeszcze dokumentacji, która by omawiała różnice.
OdpowiedzMister Klikacz 19 grudnia 2014 o 14:17
Co zrobić, żeby logo było wyśrodkowane, a linki przylegały do niego z lewej i z prawej strony (tzn. niektóre do lewej, inne do prawej)?
OdpowiedzGaga 7 lutego 2015 o 21:38
Chcę mieć duży slider na całą szerokość i menu główne na nim na samej górze..lub coś w tym stylu: http://themeglaze.com/demo/sirius/sirius-slider/index.html
OdpowiedzRobert 9 lutego 2015 o 09:30
Tutaj masz kod tworzący slider na całą wysokość strony -> http://www.bootply.com/59900
Przed nim umieść sobie navbar i powinnaś uzyskać zamierzony efekt.
Robert 9 marca 2015 o 09:14
Bootstrap służy do stworzenia warstwy wizualnej strony (frontend) czyli tego jak wygląda ona dla użytkownika. Wszystkie skrypty jak np. wyszukiwarka, wysyłanie maili itp to już warstwa techniczna (backend) czyli skrypty napisane w odpowiednim języku programowania. Aby działała wyszukiwarka trzeba napisać skrypt, który będzie ją obsługiwał albo skorzystać z jakiegoś systemu zarządzania treścią (CMS) czyli np. WordPressa.
OdpowiedzRobert 12 marca 2015 o 14:03
Bootstrap jest zbiorem pewnych gotowych elementów, które mniej lub bardziej dają się modyfikować. Czasami lepiej i szybciej jest stworzyć własny element niż nadmiernie modyfikować Bootstrapa. Poszukaj sobie artykułów jak stworzyć responsywny navbar i poczytaj o media queries, pozwoli Ci to na stworzenie własnego i dopasowanego pod twoje wymagania rozwiązania.
OdpowiedzRobert 5 maja 2015 o 08:15
Do poziomego menu polecam zastosowanie Akordeonu -> http://kursbootstrap.pl/akordeon-collapse/
OdpowiedzIrek 2 lipca 2015 o 10:25
Przede wszystkim dzięki za fajny kurs, ale mam pytanie. Co oznaczają te atrybuty: data-toggle=”collapse” data-target=”#bs-example-navbar-collapse-1″>, albo krótko: do czego służy data-toggle i data-target. Szukałem w sieci, ale po polsku nic nie ma, na stackoverlow są odpowiedzi, ale jakoś nie potrafię tego zrozumieć do czego to tak naprawdę służy. Pozdrawiam!
OdpowiedzRobert 2 lipca 2015 o 10:44
Tak pokrótce chodzi o to, że do skryptów JS można przekazać parametry poprzez właśnie data-* czyli np data-toggle="dropdown" i wtedy piszemy funkcję, która pobiera owe parametry i je wykorzystuje. Lub piszemy sobie funkcję, która będzie dotyczyła tylko wybranego elementu $('.dropdown-toggle').dropdown() . Można je też wykorzystywać do stylowania za pomocą CSSa wybranych elementów itp.
Tutaj masz dokładniej opisane o co chodzi -> http://www.sitepoint.com/use-html5-data-attributes/
Szukaj sobie informacji o „html5 data attributes” :)
Armando 16 grudnia 2015 o 20:56
Mam pewien problem ponieważ nie działa u mnie rozwijanie menu. Jak z jakiegoś innego komputera skorzystam to wszystko działa prawidłowo. Z kolei u mnie, jak przepiszę kod na nowo to sprawę naprawia tylko usunięcie wartości „#” z atrybutu href. Tak więc czy zna ktoś może rozwiązanie mojego problemu?
OdpowiedzRobert 3 marca 2016 o 07:54
Aby navbar „zwijał się” na innej szerokości trzeba dopisać kilka linijek w wybranym przez siebie media-query. Pod linkiem masz przykład dla max-width:1200px -> http://www.bootply.com/120604
Odpowiedz- Bootstrap 3 (47)
- Bootstrap 4 (3)
- Breadcrumbs (1)
- Buttony (5)
- CSS (15)
- Etykiety (2)
- Formularze (4)
- Ikony (1)
- JavaScript (5)
- Karuzela / Slider (1)
- Klasy pomocnicze (1)
- Komponenty (20)
- Lista rozwijana / dropdown (2)
- Listy (1)
- Media (1)
- Menu (2)
- Modal (1)
- Obrazy (2)
- Panele (2)
- Paski postępu (1)
- Powiadomienia (1)
- Rusztowanie szablonu (3)
- Studnia (1)
- Tabele (1)
- Tworzenie strony www (2)
- Typografia (2)
- Uncategorized (1)
- Wprowadzenie (9)
- Zakładki (1)
