Archiwum tagu: rozwijane menu

Boczny/wysuwany panel menu w jQuery

Dzisiaj proponuję kolejny bardzo pożyteczny model menu, a mianowicie boczny/wysuwany panel menu.

Boczny i płynnie wysuwany panel menu będzie przyklejony z lewej strony okna przeglądarki i nawet przy przewijaniu treści pozostanie on w tym samym miejscu. Dodatkowym atutem tego menu jest to,  że będzie widoczne dla użytkowników z wyłączonym Javascriptem.

jquery_14

ZOBACZ DEMO

Pracę zaczynamy od podstawowego kodu w xHTML:

<!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>

Następnie należy przygotować panel jako menu z przyciskiem do otwierania i zamykania. A więc,

<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>

Koniecznie należy przygotować arkusz styli CSS. Proponuję tło panelu w kolorze niebieskoszarym (#223344), do tego białe linki menu z podkreśleniem po najechaniu. Pozycja panelu względem strony to 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;
}

Podmiana obrazka otwórz/zamknij nastąpi 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
}

Teraz możemy przejść do animowania panelu. W sekcji <head> w miejscu na skrypt wpisujemy:

$(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;
	});

});

Powodzenia!

Źródło: websta.pl


Animowane/rozwijane menu

W jQuery można stworzyć całkiem fajne efekty animacji. Dzisiaj przedstawiam animowane/rozwijane menu.

jquery_43

ZOBACZ ANIMOWANE/ROZWIJANE MENU

Korzystając z jQuery możemy użyć elementów <h3> i <p> do ukrywania i pokazywania paragrafów poniżej znaczników pozycji.

<script type="text/javascript">
$(document).ready(function(){
  $(".accordion p").hide();
  $(".accordion h3").click(function(){
    $(this).next("p").slideToggle("slow")
     .siblings("p:visible").slideUp("slow");
    $(this).toggleClass("active");
    $(this).siblings("h3").removeClass("active");
  });
});
</script>

Oczywiście, jeżeli chcesz, aby animacja była szybsza, musisz zmodyfikować slideToggle i slideUp, czyli wprowadzasz 'normal' lub 'fast'. Możesz również po prostu użyć liczby całkowitej w milisekundach, czyli .slideUp(500) dla pół sekundy na przejście.

Teraz musimy użyć poniższego kodu HTML. To całkiem proste, musimy mieć wszystkie elementy div.accordion i pary <h3>/<p> w środku.

<div class="accordion">
  <h3>Item One</h3>
  <p>Lorem ipsum dolor sit amet.</p>
  <h3>Item Number Two</h3>
  <p>Lorem ipsum dolor sit amet.</p>
  <h3>Here is Item Three</h3>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

Więcej na: WebDesignerWall