search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

[CSS][jQuery] Przezroczysty pasek nawigacyjny będący zawsze u góry okna przeglądarki

Dzisiejszy artykuł będzie dotyczył możliwości uzyskania efektu przeźroczystego paska nawigacyjnego znajdującego się zawsze w górnej części okna przeglądanej strony. Dzięki temu, mozemy zapewnić nieustanny dostęp do menu, a jednocześnie pozwalając czytać informacje ukryte pod paskiem nawigacyjnym.
W tym przykładzie na pasku nawigacyjnym znajduje się lista rozwijana i przyciski do przewijania strony

Zaczniemy od kodu HTML:

<div id="nawigacja">
	<a href="#top">Początek strony</a>
	<a href="#bottom">Koniec strony</a>
	<ul id="lista">
    	<li>Jeden</li>
        <li>Dwa
        	<ul>
            	<li>Jeden</li>
                <li>Dwa</li>
                <li>Trzy</li>
            </ul>
        </li>
        <li>Trzy</li>
    </ul>
</div>

Teraz pora na trochę kodu CSS:

#nawigacja {
	border-bottom: 1px solid #eb7429;
	background: #b30000;
	padding: 10px 20px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
}

Zastosowanie position: fixed pozwala na poprawne zachowanie w IE6, czyli pozostawienie paska nawigacyjnego na górze okna przeglądarki.
Następnym punktem programu jest kod JavaScript oparty na bibliotece jQuery, który wygląda następująco:

$(document).ready(function() {
	(function() {
		var fadeSpeed = 200, fadeTo = 0.5, topDistance = 30;
		var topbarME = function() { $('#nawigacja').fadeTo(fadeSpeed,1); }, topbarML = function() { $('#nawigacja').fadeTo(fadeSpeed,fadeTo); };
		var inside = false;
 
		$(window).scroll(function() {
			position = $(window).scrollTop();
			if(position > topDistance && !inside) {
 
				topbarML();
				$('#nawigacja').bind('mouseenter',topbarME);
				$('#nawigacja').bind('mouseleave',topbarML);
				inside = true;
			}
			else if (position < topDistance){
				topbarME();
				$('#nawigacja').unbind('mouseenter',topbarME);
				$('#nawigacja').unbind('mouseleave',topbarML);
				inside = false;
			}
		});
	})();
});

Skrypt zostanie wykonany po całkowitym załadowaniu się strony.
To byłoby na tyle, jeśli chodzi o sposób uzyskania tego efektu. Od siebie mogę dodać, że efekt ten najprawdopodobniej znajdzie swoje zastosowanie w nowej wersji szablonu dla mojego bloga, który ulegnie gruntownej modernizacji. Lecz to dopiero po nowym roku.
Demo z tego artykułu można zobaczyć tutaj: przeźroczysty pasek nawigacyjny z wykorzystanie jQuery.

  • Krystian

    Tutorial jest ok, przejrzałem go tak ogólnie, nie wnikając w szczegóły, ale… Jak na mój gust do przykładów powinieneś dawać więcej elementów. Chodzi o to że mimo, iż to jest tutek na przeźroczyste menu możesz pokazać jak przy pomocy css’a można zrobić żeby wyglądał estetycznie a nie tylko działał. Nadal będę zaglądał na bloga 🙂 Ciekawie piszesz, pozdrawiam. Tak nawiasem, js i css koloruje składnie a dlaczego html nie ?:) Pozdrawiam

  • Założenie jest takie, aby pokazywać funkcjonalne tutoriale.
    Postaram się przy następnych artykułach się bardziej postarać jeżeli chodzi o estetykę porad.
    Myślę, że jestem w stanie o to zadbać 😉

  • Krystian

    No ja nie wątpię 😉 W takim razie czekam do następnego wpisu ;))

  • Hester

    co mam zmienić żeby pasek był zawsze na dole okna ?

  • w #nawigacja musisz zamiast top: 0; dać bottom: 0;

  • Jakub

    Czytam ostatnio Twojego bloga i na prawdę coraz bardziej mi się podoba. Mam tylko jedno pytanie do tego paska.
    Co należy dopisać żeby pojawienie menu było na jakiejś animacji, która poprawi jego „atrakcyjność” 😉
    Pozdrawiam JJ

  • Możesz też dopisać funkcję dodającą animację dla listy ul – w jQuery jest metoda animate. Poczytaj o niej 🙂

  • Daniel

    Witam panie Piotrze mam pytanie odnosnie skryptu, jak wykombinować aby odwrócić działanie otóż przy załadowaniu strony pasek był ukryty ?

  • Adam

    czy można tak zrobić w joomla. szukam po necie lecz bez efektu