Wysuwany panel boczny w CSS3

panel
Na ogromnej ilości stron używane są panele z niebieską zakładką, które po najechaniu na nie myszką pokazują ostatnie posty opublikowane na FB lub zdjęcia osób, które lubią jakiś fanpage. Przedstawię Wam teraz sposób, dzięki któremu uzyskamy podobny efekt bez korzystania z jQuery czy innych skryptów JavaScript. Stworzymy wysuwany pasek z dowolną zawartością HTML.

Do wypozycjonowania i nadania animowanego efektu wykorzystamy wyłącznie właściwości CSS obsługiwane przez najnowsze przeglądarki. Zapewniam, że efekt końcowy jest estetyczny, a sam pasek bardzo funkcjonalny.

Zaczniemy od kodu HTML. Nasz panel będzie składał się ze zbiorczego elementu blokowego panel, a wewnątrz niego będą znajdowały się dwa inne divy – content, zawierający treść, a także title, wewnątrz którego jak sama nazwa wskazuje umieścimy widoczny tytuł. Wyglądać będzie to tak:

<div id="panel">

	<div id="title">
		Panel
	</div>
	
	<div id="content">
		Jakaś zawartość
	</div>

</div>

Prawda, że bardzo prosto się to prezentuje? Dlatego więc będzie trzeba użyć stylu CSS, by odpowiednio ustawić te trzy boksy. Aby uzmysłowić, do czego dążymy, posłużę się przygotowanym schematem.

wysuwany-panel

Jak widać, musimy doprowadzić do sytuacji, aby na stałe widoczny był tylko div o identyfikatorze title. W moim przypadku zachodzi on lekko na content, a właściwie chowa się za nim. Na granicy tych dwóch elementów zaznaczyłem linię, która pokazuje, że w tym właśnie miejscu będzie prawa krawędź okna przeglądarki. Oczywiście tylko w “spoczynku”, gdy kursor myszy nie najedzie na zakładkę. Gdy to się stanie, wysunie się całość.

W moim przykładzie, wysuwane okienko będzie miało szerokość 250px. Tak więc, jego domyślna odległość od ekranu względem prawej strony musi wynosić -272px. Dlaczego 272 a nie 250? Otóż zastosowałem 10-pikselowy obustronny margines wewnętrzny oraz obramowanie z lewej strony o szerokości 2px. Razem daje to więc 272px (250+2*10+2). Oczywiście, wymiary te można dowolnie zmieniać, zaznaczam tylko że przy każdej zmianie należy poprawić pozycję całości.

Tak wygląda zastosowany przeze mnie styl:

#panel {
	position: fixed;
	top: 50px;
	right: -272px;
	z-index: 99999;
	transition: right 0.5s ease-out 0s;
}

#panel:hover {
	right: 0;
}

#panel #content {
	width: 250px;
	height: 300px;
	padding: 10px;
	border-top: 2px solid #C30011;
	border-right: none;
	border-bottom: 2px solid #C30011;
	border-left: 2px solid #C30011;
	z-index: 20;
	background: #FFFFFF;
	position: relative;
	border-radius: 10px 0 0 10px;
}

#panel #title {
	width: 150px;
	border: 2px solid #C30011;
	background: #E61B2D;
	color: #FFFFFF;
	font-weight: bold;
	border-radius: 10px;
	padding: 5px 5px 25px 5px;
	text-align: center;
	position: relative;
	top: 140px;
	left: -90px;
	transform: rotate(-90deg);
	z-index: 1;
}

Przykładowy pasek będzie miał czerwony kolor, oczywiście wszystko jest kwestią odpowiedniego stylu. Dowolnie można edytować tło, obramowanie, zaokrąglenie czy dodać cień.

Trzeba zwrócić uwagę na użyte przeze mnie własności transition, border-radiustransform. Aby zapewnić kompatybilność naszego panelu ze wszystkim przeglądarkami, może okazać się niezbędne dodanie do nich przedrostków takich jak -moz- czy -webkit-.

Zobacz demo

DEMO

Tak właśnie będzie wyglądał panel, który wykonasz z użyciem tego kodu 🙂

Jeśli masz problem lub pytanie – zostaw komentarz.

Oczywiście zachęcam do zapoznania się z innymi moimi poradnikami.

komentarzy 75 do “Wysuwany panel boczny w CSS3”

Skomentuj

CommentLuv