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

CSS jQuery Opublikowano: 22/12/2009

O autorze

Jestem webmasterem/webdeveloperem
z pasji. Lubię to co robię i chcę dzielić się wiedzą z innymi osobami.
Specjalizuję się w technologiach związanymi z CSS, JS, PHP.

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.

7 komentarze/y

Krystian
23/12/2009 o 00:17
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
Piotr Nalepa
23/12/2009 o 00:48
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
23/12/2009 o 01:39
No ja nie wątpię W takim razie czekam do następnego wpisu )
Hester
02/09/2010 o 18:21
co mam zmienić żeby pasek był zawsze na dole okna ?
Piotr Nalepa
12/09/2010 o 16:33
w #nawigacja musisz zamiast top: 0; dać bottom: 0;
Jakub
16/04/2011 o 00:39
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
Piotr Nalepa
16/04/2011 o 17:02
Możesz też dopisać funkcję dodającą animację dla listy ul – w jQuery jest metoda animate. Poczytaj o niej