Bootstrap tutorial logo

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:)

Przykładowa strona z menu


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

Przykładowa strona z menu
 


Post się przydał? Oceń go proszę.
1 Gwiazdka2 Gwiazdki3 Gwiazdki4 Gwiazdki5 Gwiazdek (11 głosów, średnia: 4,82 na 5)
Loading...

Komentarze: 23 komentarze

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?

Odpowiedz
    Robert 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:)

    Odpowiedz
      Tajniak 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.

      Odpowiedz
Mister 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)?

Odpowiedz
Gaga 6 lutego 2015 o 16:12

Witam,

jak zrobić menu na sliderze?

Odpowiedz
Dzienny 6 marca 2015 o 18:45

Hejka, mógłbyś dokładniej wytłumaczyć jak działa wyszukiwarka (search)? Mi nic niestety nie wyszukuje.

Odpowiedz
    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.

    Odpowiedz
Tomek 12 marca 2015 o 13:56

Witam,
Mam pytanie na które odpowiedzi nie mogę znaleźć w żadnym manualu Bootstrapa. Jak zrobić by do pewnej rozdzielczości linki wyświetlały się poziomo (obok siebie), a poniżej pewnej rozdzielczości część(!) linków wyświetlała się jako rozwijany „dropdown” ?

Odpowiedz
    Robert 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.

    Odpowiedz
łukasz 4 maja 2015 o 23:51

Fajny przykłady tylko czy da się zrobić menu poziomo, jak tak to jak ?

Odpowiedz
Irek 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!

Odpowiedz
    Robert 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” :)

    Odpowiedz
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?

Odpowiedz
    Armando 19 grudnia 2015 o 04:03

    Dobra, nie musisz już odpowiadać na to pytanko; poradziłem sobie sam z tym problemem :)

    Odpowiedz
jola 2 marca 2016 o 15:00

a czy mógłbyś wyjaśnić jak zmienić moment zmiany pełnego menu na zwinięte?
tak aby ten przycisk rozwijający pojawiał się na niestandardowej szerokości strony?

Odpowiedz
    Robert 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
henryk 22 sierpnia 2016 o 06:47

Witam ja mam inny problem jak powiększyć wielkość hamburgera lub zmienić go na napis MENU w obramowaniu

Odpowiedz