Drukuj stronę - Tworzymy rozsuwane menu !

Hej. W tym poradniku pokażę jak stworzyć własne rozsuwane menu. Mamy 2 opcje :
1. Część rozwijana pokazuje nam się po prawej/lewej stronie rozwijacza
2. Część rozwijana pokazuje nam się pod rozwijaczem
Na początku należy dołączyć bibliotekę JavaScript - JQuery.
Następnie zrobić 2 elementy - 1 z Id - menu_x, a 2 z Id - menu_x_content
x - numer menu. Można zacząć od 1 tak jak ja to zrobię
2 element musi być div'em !
2 div'owi warto nadać klasę - potem dowiecie się czemu. Ja dam menu_content
Mamy taki kod (może nie do końca poprawny HTML'owo) :

Kod:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<a id="menu_1">Pokaż menu</a>
<div class="menu_content" id="menu_1_content">
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
</div>

Nijak jest to podobne do jakiegokolwiek menu. Dlatego teraz użyjemy stylu CSS.
A więc co należy zrobić - treść menu należy odpowiednio ukryć ,ale tak by nie przeszkadzała na stronie ;). Należy też jej nadać pozycję określoną, a linki w nim niech będą stawiane jako blok więc :

Kod:

<style type="text/css">
.menu_content {
position: absolute;
top: -1000px;
}
.menu_content a {
display: block;
}
</style>

Kod CSS umieszczamy na górze strony ;)
Super ! Linki zniknęły ,ale dalej nie rozwija się ;). Dlatego przechodzimy do strony JavaScript.
Niestety jestem nowy na forum i nie wiem jaki jest poziom waszych umiejętności kodowania dlatego napiszę cały skrypt wraz z komentarzami gdyby ktoś chciał się pouczyć :
Jeszcze zależy jaką chcecie wersje menu: Jeśli ma się pojawiać obok (po prawej stronie to ten kod jest poprawny.

Kod:

<script type="text/javascript">
function show_menu(number) {
//Dobra lecim. Zobaczmy gdzie to jest ten link ,na który najeżdżamy :
var a = $("#menu_"+number).offset();
//Okej mamy dokładną pozycję. Ale trzeba okreslić jak długi jest ten link :)
var b = $("#menu_"+number).innerWidth() + a.left;
//Mamy już ile od lewej powinno być to menu. Ustaw więc odpowiednio atrybuty ;)
$('#menu_'+number+'_content').css({
top: a.top,
left: b
});
}
function hide_menu(number) {
//Ukryjmy - wywal go w pissssssstuuuuu !
$('#menu_'+number+'_content').css({
top: -1000+'px',
left: 0+'px'
});
}
</script>

Jeśli zaś chcecie by menu było pod to zastosujcie ten kod :

Kod:

<script type="text/javascript">
function show_menu(number) {
//Dobra lecim. Zobaczmy gdzie to jest ten link ,na który najeżdżamy :
var a = $("#menu_"+number).offset();
//Okej mamy dokładną pozycję. Ale trzeba okreslić jak wysoki jest ten link :)
var b = $("#menu_"+number).innerHeight() + a.top;
//Mamy już ile od lewej powinno być to menu. Ustaw więc odpowiednio atrybuty ;)
$('#menu_'+number+'_content').css({
top: b,
left: a.left
});
}
function hide_menu(number) {
//Ukryjmy - wywal go w pissssssstuuuuu !
$('#menu_'+number+'_content').css({
top: -1000+'px',
left: 0+'px'
});
}
</script>

Super ! W końcu mamy napisaną funkcję. No ,ale na kij mi to skoro mi to nic nie daje ?
A no nie daje bo nie wywołujemy funkcji więc do linku ,który odpowiada za pokazanie menu trzeba dać 2 nasłuchy - mouseOver i mouseOut więc mając kod :

Kod:

<a id="menu_1">Pokaż menu</a>

zamieniamy go na :

Kod:

<a id="menu_1" OnMouseOver="show_menu(1);" OnMouseOut="hide_menu(1);">Pokaż menu</a>

Cud, działa !
No ,ale części z was może nie nie usatysfakcjonować takie menu. W takim razie przedstawiam parę efektów.
Część 1 efektu wrzucamy na koniec funkcji show_menu czyli tuż pod

Kod:

top: a.top,
left: b
});

Natomiast część 2 dajemy na koniec funkcji hide_menu ;)
w CZAS_TRWANIA należy dać jak długo ma się pojawiać (podajemy w milisekundach czyli 1000 = 1 sekunda )
Teraz efekty :
1. Pojawianie i zanikanie
Cz. 1 :

Kod:

$('#menu_'+number+'_content').css({ opacity: '0.0' });
$('#menu_'+number+'_content').animate({ opacity: 1.0 }, CZAS_TRWANIA);

Cz. 2 :
Tutaj już trzeba zamienić cały kod funkcji. Wykasujcie kod użyty w tej funkcji i zastąpcie go tym :

Kod:

$('#menu_'+number+'_content').animate({ opacity: .0 }, { duration: CZAS_TRWANIA, complete: function(){
$('#menu_'+number+'_content').css({
top: -1000+'px',
left: 0+'px'
});
}});

Tutaj też trzeba napisać jak długo ma zanikać ;)

Jeśli będziecie chcieli inne efekty - piszcie ,a dopiszę ;)
PS: Nie wiem czy właśnie takie poradniki powinno się tu umieszczać ;)

PS2: Jeśli ktoś nie do końca wie jak to ma wyglądać to tu ma kod :

Kod:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style type="text/css">
.menu_content {
position: absolute;
top: -1000px;
}
.menu_content a {
display: block;
}
</style>
<a id="menu_1" OnMouseOver="show_menu(1);" OnMouseOut="hide_menu(1);">Pokaż menu</a>
<div class="menu_content" id="menu_1_content">
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
</div>
<script type="text/javascript">
function show_menu(number) {
//Dobra lecim. Zobaczmy gdzie to jest ten link ,na który najeżdżamy :
var a = $("#menu_"+number).offset();
//Okej mamy dokładną pozycję. Ale trzeba okreslić jak długi jest ten link :)
var b = $("#menu_"+number).innerWidth() + a.left;
//Mamy już ile od lewej powinno być to menu. Ustaw więc odpowiednio atrybuty ;)
$('#menu_'+number+'_content').css({
top: a.top,
left: b
});
}
function hide_menu(number) {
//Ukryjmy - wywal go w pissssssstuuuuu !
$('#menu_'+number+'_content').css({
top: -1000+'px',
left: 0+'px'
});
}
</script>

Polskie Forum Użytkowników GIMP-a

Tutoriale => Pozostałe => Wątek zaczęty przez: Kongo on 23.12.2012, 16:52:08