Archiwum tagu: menu w jQuery

Garagedoor menu w jQuery

Garagedoor menu to bardzo oryginalny sposób prezentacji swojego menu na stronie. Menu jest proste i łatwe w zastosowaniu. Zapraszam poniżej.

jquery_18

ZOBACZ DEMO

Po pierwsze, korzystamy z biblioteki jQuery, którą umieszczamy na naszym serwerze:

<script src="js/jquery-1.3.2.min.js" type="text/javascript">
</script>
<script src="js/garagedoorjQuery.js" type="text/javascript">
</script>
<link href='css/garagedoor.css' rel='stylesheet' type='text/css'/>

Następnie, tworzymy układ HTML:

<div class='garagedoor' id='garagedoor'>
   <div title='linktofile' class='item'>
      <div class='underlay'>
           Caption text
      </div>
      <img src='uritooverlayimage' class='overlay' />
      <div class='mouse'><img src='images/nothing.gif' />&nbsp;
</div>
   </div>
   <div title='linktofile' class='item'>
      <div class='underlay'>
          Caption text
      </div>
      <img src='uritooverlayimage' class='overlay' /
      <div class='mouse'><img src='images/nothing.gif' />&nbsp;
</div>
   </div>
</div>

Powyższy kod zawiera dwa 2 słowa kluczowe, a mianowicie linktofile oraz uritooverlayimage. Oba słowa muszą być dostosowane do siebie, aby garagedoor zadziałało. Linktofile to adres URL strony.

Elementy mają domyślny rozmiar: szerokość 100px i wysokość 80px. Obrazy nakładki muszą mieć zgodne wymiary. Jeżeli chcesz zmienić rozmiar, zajrzyj do pliku garagedoor.css i ustaw szerokość i wysokość  elemnetów.

Teraz, wszystko co jest do zrobienia to wywołać GarageDoor i włączyć efekt:

<script>
   GarageDoor.scrollY = -55;
   GarageDoor.scrollX = 0;
   GarageDoor.setBindings('garagedoor');
</script>

Prosto i szybko!

Źródło: www.gayadesign.com


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


Menu obraz w jQuery

Witam wszystkich w Nowym Roku!

A jak Nowy Rok to nowa dawka porad z zakresu jQuery. Dzisiaj przedstawię prosty sposób na obrazowe menu w jQuery.

jquery_8

ZOBACZ DEMO

Zacznijmy od kodu HTML,

<div class="jimgMenu">
  <ul>
    <li class="landscapes"><a href="#">Landscapes</a></li>
    <li class="people"><a href="#">People</a></li>
    <li class="nature"><a href="#">Nature</a></li>
    <li class="abstract"><a href="#">Abstract</a></li>
    <li class="urban"><a href="#">Urban</a></li>
  </ul>
</div>

Do tego oczywiście CSS:

.jimgMenu {
        position: relative;
        width: 670px;
        height: 200px;
        overflow: hidden; 
        margin: 25px 0px 0px;
}
.jimgMenu ul {
        list-style: none;
        margin: 0px;
        display: block;
        height: 200px;
        width: 1340px;
}
.jimgMenu ul li {
        float: left;
}
.jimgMenu ul li a {
        text-indent: -1000px;
        background:#FFFFFF none repeat scroll 0%;
        border-right: 2px solid #fff;
        cursor:pointer;
        display:block;
        overflow:hidden;
        width:78px;
        height: 200px;
}
.jimgMenu ul li.landscapes a {
        background: url(images/landscapes.jpg) repeat scroll 0%;
}
.jimgMenu ul li.people a {
        background: url(images/people.jpg) repeat scroll 0%;
}
.jimgMenu ul li.nature a {
        background: url(images/nature.jpg) repeat scroll 0%;
}
.jimgMenu ul li.abstract a {
        background: url(images/abstract.jpg) repeat scroll 0%;
}
.jimgMenu ul li.urban a {
        background: url(images/urban.jpg) repeat scroll 0%;
        min-width:310px;
}

Gotowe!

Powodzenia!

Źródło: Alohatechsupport.net