Wykryto działanie AdBlocka!

Prawdopodobnie masz właczonego Adblocka. Korzystanie z bloga jest całkowicie darmowe. Jeśli jednak chcesz docenić prace autora, wyłacz blokowanie reklam dla tej witryny, aby jeszcze bardziej zmotywowac autora do dalszej pracy oraz częstszej publikacji artykułów.

Dziękuje :)

Treść główna bloga

Artykuły

Menu reagujące na pozycje strony w Twitter Bootstrap


Ikona Menu
Dzięki Twitter Bootstrap można robić przejrzyste i nowoczesne witryny internetowe. Ponad to wyświetlają się one poprawnie w takich urządzeniach jak tablety czy telefony. Ja jednak dziś przedstawię jak zrobić menu oparte na Twitter Bootstrap, które reaguje na aktualną pozycję na stronie. Pomysł na ten artykuł zawdzięczam gearvamoi, który zaproponował taki tutorial w jednym z komentarzy.

Tutorial będzie oparty na stronie http://twitter.github.com/bootstrap/getting-started.html. Zaprezentowany przeze mnie kod to odchudzona do minimum wersja powyższej strony.

Wystarczy utworzyć tylko jeden plik,np. z rozszerzeniem *.html:

Jak to działa?
W linkach w menu dajemy odnośniki do poszczególnych sekcji na stronie, np:

oraz sekcja:

Aby skrypt działał musimy dołączyć 3 pliki javascript, można z serwera Twittera lub pobrać na własny dysk. (bootstrap-scrollspy.js, application.js oraz bootstrap-affix.js). O jQuery nie wspominam.
Aby nasze menu wyglądało efektownie trzeba w

Dołączyć 2 pliki css: bootstrap.css oraz docs.css.

Te linijki zostały dodane przeze mnie aby efekt był bardziej widoczny.

  • Lechus

    Hej,
    Chyba masz mały monitorek, bo przy większej rozdzielczości lewe menu najeżdża na treść strony.

    A zabezpieczenie przed onmouseover=alert()?

    Na monitorze 1920×1080 nie widać tego bajera bez zmiany rozmiaru przeglądarki.

    // Zmieniłem 3 komentarze w jeden

    • Kwestia odpowiedniego ustawienia menu.

  • Witam,
    Fajnie art. Cieszę się że nas bootstrapowców jest w polsce wiecej:) Czekamy na więcej.