Sprawdź najnowsze wpisy:
[jQuery] Wysuwany boczny panel menu

W tym tutorialu pokażę Ci jak zrobić płynnie wysuwany panel z menu strony. Użyjemy do tego minimum xHTML i klika linijek Javascriptu. Dla uproszczenia sprawy użyjemy mojej ulubionej biblioteki jQuery. Panel dla lepszej użyteczności będzie przyklejony z lewej strony okna przeglądarki i nawet przy przewijaniu treści pozostanie w tym samym miejscu. Dodatkowo menu będzie widoczne dla użytkowników z wyłączonym Javascriptem.


Demo | Pobierz (.zip)

Co będzie potrzebne?

Podstawy XHTML, średnia znajomość CSS i jeden plik graficzny widoczny poniżej oraz jakaś podstawowa wiedza co to jest jQuery.

przycisk

Na pierwszy rzut oka to tutorial wygląda dość skomplikowanie, ale starałem się wyjaśnić wszystko dokładnie i stąd tyle treści.

Do roboty

Pracę zaczynamy od podstaw czyli pustego szablonu w xHTML. Dodajemy link do najnowszej wersji jQuery (zdalny plik z ajax.googleapis.com) , arkusza stylów CSS. Żeby było prościej nasz kod Javascript umieścimy w znacznikach <script> . Jednak w swoim prawdziwym projekcie lepiej pisać go w osobnym pliku np. skrypt.js .

Na samym końcu <head> dodałem mój ulubiony „rozwiązywacz problemów” dla Internet Explorera, ale o tym kiedy indziej. Na ten moment wystarczy, że tam jest i robi swoje.

Czyli mamy coś takiego:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
	<meta http-equiv="Content-type" content="application/xhtml+xml; charset=utf-8" />
	<title>Wysuwany panel menu w jQuery</title>
 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 
	<link rel="stylesheet" href="panel.css" type="text/css" />
 
	<script type="text/javascript">
	<!-- skrypt jQuery -->
	</script>
 
 
	<!--[if lt IE 8]>
	<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
	<![endif]-->
</head>
<body>
 
 
<!-- treść strony -->
 
</body>
</html>

Teraz zróbmy nasz panel. Będzie to <div> z listą <ul> jako menu i przyciskiem do otwierania i zamykania. Do body wklejamy kod:

<div id="panel">
 
	<ul id="main_menu">
      		<li><a href="#">Strona główna</a></li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">Kontakt</a></li>
   	</ul>
 
	<a href="#" class="slide_button" >Menu</a>
 
</div>

Wygląda to tak:

panel001

To tyle jak chodzi o kod xHTML przechodzimy do arkusza styli CSS.
Tło panelu zrobimy niebieskoszare (#223344), do tego białe linki menu z podkreśleniem po najechaniu (:hover). A lista <ul> bez tych „świetnych” kropek.
Pozycje panelu względem strony ustawiłem na fixed(czyli, że nawet przy przewijaniu strony zawsze jest w tym samym miejscu). Panel znajduje się na 50% wysokości okna po lewej.

#panel
{
	background: #223344;
	padding: 10px;
	width: 200px;
 
	position: fixed;
	margin-top: -100px; /*połowa wysokości panelu w górę */	
	left: 0px;
	top: 50%;
 
}
 
ul#main_menu
{
	list-style: none;
}
 
#main_menu a
{
	color: #ffffff;
	text-decoration: none;
}
 
#main_menu a:hover
{
	text-decoration: underline;
}

panel002

Przycisk do otwierania zrobimy tym samym sposobem, który opisałem w Obrazek z efektem hover (rollover) w CSS. Z tą różnicą, że podmiana obrazka nie nastąpi po najechaniu tylko po kliknięciu. Używając position-absolute wystawiam go poza nasz panel. Dodatkowa klasa zamknij przesunie tło po kliknięciu i przycisk będzie oznaczać zamknięcie panelu.

.slide_button
{
	background: url(przycisk.gif);
	display: block;
	height: 60px;
	text-indent: -9999px;
	width: 20px;
 
	position: absolute;
	right: -20px;
	top: 0px;
}
 
.zamknij
{
	background-position: -20px 0px;
}
 
a:focus { 
outline:none; //usuwanie niebieskiej obwódki w FF
}

panel003

Teraz przejdźmy do animowania panelu czyli Javascriptu i jQuery. W sekcji <head> w miejscu na skrypt wpisujemy:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(function(){
 
	$("#panel").css("left","-220px");
 
	$(".slide_button").toggle(function(){
 
		$("#panel").animate({left: "0px"}, 500 );
		$(this).addClass("zamknij"); 
		return false;
	},
	function(){	
		$("#panel").animate({left: "-220px"}, 500 );
		$(this).removeClass("zamknij"); 
		return false;
	});
 
});

Skrypt działa tak:
Linia1: Początek jQuery
Linia3: Chowamy panel jest to potrzebne, gdyż menu mają widzieć także użytkownicy z wyłączonym Javascriptem. Dlatego nie możemy zrobić tego w CSS.
Linia5: Dla przycisku z klasą slide_button ustawiamy funkcję toggle. Jest to funkcja, która uruchamia po kliknięciu raz funkcje otwierania drugi raz zamykania.
Linia7: Po kliknięciu animujemy wysunięcie panelu. 500 oznacza szybkość wysuwania w milisekundach.
Linia8: Dodajemy przyciskowi klasę zamknij. Zmienia ona wygląd przycisku na „zamykający”
Linia9: Oznacza że nie ma przechodzić pod adres z href w klikanym linku
Linia12: Chowamy panel
Linia13: Usuwamy klasę zamknij, żeby przycisk wyglądał jak na początku

No i gotowe demo panelu. Mam nadzieję, że wszytko jest jasne. Działanie testowałem w Operze, FF, Safari i IE7.

Pytania i problemy z działeniem umieszaj w komentarzach do tego wpisu w miarę możliwości postaram się pomóc.

Edit:
—-
Jeśli chcesz, żeby panel wysuwał się po najechaniu (rollover, hover) wystraczy zamienić linię:

$(".slide_button").toggle(function(){

na:

$("#panel").hover(function(){

oraz jedno i drugie „500″ na:

{queue:false,duration:500}

zapobiegnie to dziwnemu zachowaniu z hover, o którym pisało już kilka osób.


Zapisz się na newsletter

Nienawidzę spamu tak samo jak Ty, dlatego obiecuję, że nigdy nie sprzedam, ani nie udostępnię nikomu Twojego adresu e-mail.

(W każdej chwili możesz się wypisać, klikając link na końcu każdego maila.)

Tagi: , , ,