Bootstrap tutorial logo

Opcje wyświetlania menu / Navbar fixed

autor: Robert

25 lipca 2013

Nasze menu może trzymać się góry lub dołu strony mimo jej przewijania, może też mieć szerokość całej strony niezależnie od wymiarów okna. Dodatkowo pokażę jak zrobić menu które zmienia swój wygląd i „upakowuje” swoje opcje w widoku mobilnym.

Przyklejone górne menu

Aby górne menu było zawsze widoczne na górze strony pomimo jej przewijania, do diva z klasą .navbar należy dołożyć klasę .navbar-fixed-top. Należy pamiętać by do sekcji body naszej strony dodać w stylach CSS padding o wartości minimum 70px gdyż inaczej treść naszej strony będzie się chowała pod paskiem menu.

Przykładowa strona z menu

Przyklejone dolne menu

Tutaj zasada jest identyczna jak w przypadku górnego menu, jedyna zmiana to klasa .navbar-fixed-bottom zamiast .navbar-fixed-top. No i oczywiście tym razem robimy wpis dla body w css padding-bottom: 70px;

Przykładowa strona z menu

Czarny pasek menu

Oczywiście kolor menu można zmieniać za pomocą arkusza CSS ale bootstrap oferuje zmianę koloru paska menu na czarny po zastosowaniu klasy .navbar-inverse

Poniżej przykład z przyklejonym górnym i dolnym a na dodatek czarnym menu.

Przykładowa strona z menu

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

Komentarze: 12 komentarzy

Kliknij tutaj, aby anulować odpowiadanie.

shi 28 maja 2014 o 12:03

Przyklejone górne menu nie działa… można prosić o korektę kodu? Ew o podanie przyczyn dla których to nie działa

Odpowiedz
    Robert 28 maja 2014 o 19:29

    Jestem w trakcie przepisywania postów dotyczących Bootstrap 2 na Bootstrap 3, lada dzień wszystko będzie działać poprawnie.

    Odpowiedz
yhs 5 lipca 2014 o 11:20

Męczę się z tym menu i nie wiem czemu mi nie działa, gdy kliknę w lista rozwijana nic się nie rozwija a powinno.
Z góry dzięki za pomoc.

Odpowiedz
Marcin 13 lipca 2015 o 12:56

Witam
mam problem z menu mobilnym, nie zwija sie po kliknięciu w konkretną pozycję. Przerzuca do odpowiedniego miejsca na stronie, ale żeby sie zwinęło to musze kliknąc w ten przycisk. Pomożesz?

Odpowiedz
    Robert 13 lipca 2015 o 13:14

    dodaj sobie ten kawałek JSa:

    $(document).ready(function () {
  $(".navbar-nav li a").click(function(event) {
    $(".navbar-collapse").collapse('hide');
  });
});
    Odpowiedz
Mariusz 4 sierpnia 2015 o 18:06

Cześć :) Nie wiem jak zrobić efekt z menu. Na stronie startowej tło menu jest przezroczyste, a po scrollowaniu w dół pojawia się jego tło. Tak jak tu: http://ironsummitmedia.github.io/startbootstrap-agency/

Z góry dzięki za pomoc! :D

Odpowiedz
gron 24 lutego 2016 o 12:10

Cześć, menu wszystko fajnie śmiga na głównej, przechodząc poprzez menu rozwijane do innej podstrony gdzie także wpakowałem to samo menu nie rozwija się, jedynie . W kodzie nic nie było zmieniane. CSS oczywiście załączony. Prosiłbym o ewentualną podpowiedź

Odpowiedz
    Robert 24 lutego 2016 o 12:46

    Do rozwijanego menu potrzebny jest jeszcze Bootstrapowy JS, jego również załączyłeś?:)

    Odpowiedz
      gron 24 lutego 2016 o 14:02

      tak tak załączyłem, błąd znaleziony temat do zamknięcia ;)

      Odpowiedz
Kamil 2 września 2016 o 10:54

Witam, jest możliwość zrobienia tak, aby przyciski rozciągneły się na cała szerokość menu, a nie tylko były rozciągnięte do lewej bądź prawej?

Odpowiedz
Kategorie
Tutoriale wideo Bootstrap
Kurs Bootstrap 3 - responsywne strony Kurs Bootstrap 4 - od podstaw Kurs Bootstrap 4 - praktyczny projekt
Reklamy