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_contentMamy taki kod (może nie do końca poprawny HTML'owo) :
<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 :
<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.<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>
<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>
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 :
<a id="menu_1">Pokaż menu</a>
zamieniamy go na :
<a id="menu_1" OnMouseOver="show_menu(1);" OnMouseOut="hide_menu(1);">Pokaż menu</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
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 zanikanieCz. 1 :
$('#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 :
$('#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 :
<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>
Pokaż wiadomości
Hover'y
