[jQuery][HTML][CSS] "Jeżdżące" logowanie Opcje

[Krychu1]

Witam. Tworzę stronę do tzw. "OTS" za pewien grosz, z tego względu troche głupio mi zapytać. Dużo już poszperałem w internecie ale ciężko znaleźć odpowiedź akurat na mój mały problem. Zapewne jego rozwiązanie to przełożenie kilku kodów w inne miejsce i to wszystko, ale od 10 przy tym siedze i jednak nerwy mi puszczają - niby proste, a jednak trudne. (IMG:style_emoticons/default/tongue.gif)

Tak, więc wstawiłem na stronę tzw. jeżdżące menu. Wszystko działa w nim tak jak należy, jednak jest mała niedogodność. Chce aby menu przy otwarciu strony było "zasunięte", a nie "rozsunięte".
Myślałem także nad tym aby forma w jakiej użytkownik zostawił te menu (czyli np. zasunięte) pozostawała taka sama przy przeskakiwaniu po działach, jednak musiałbym wprowadzić zbyt dużo zmian w całym kodzie strony - na co nie mam czasu.

Kod wygląda następująco:

[HTML] pobierz, plaintext 
<div id="menu">
        <div id="panel">
            <h2>Logowanie</h2>
            <form>
		Nazwa: <input type="text" />
		Hasło: <input type="text" />
		<input type="submit" value="Zaloguj"/>
            </form>
        <div id="wsun">
            <a href="#">? schowaj okno logowania</a></div>
        </div>
    </div>
    <div id="wysun">
    	<span>?</span>
    </div>
[HTML] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
jQuery(document).ready(function(){
 $("#wsun").click(function(){
 $("#wysun").show("normal").animate({width:"28px", opacity:1}, 200);
 $("#menu").animate({width:"0px", opacity:0}, 400 );
 $("#panel").animate({marginLeft:"-250px"}, 400 );
 });
 
 $("#wysun").click(function(){
 $("#menu").animate({width:"250px", opacity:1}, 400 );
 $("#panel").animate({marginLeft:"0px"}, 400 );
 $("#wysun").animate({width:"0px", opacity:0}, 600).hide("slow");
 });
});
[JAVASCRIPT] pobierz, plaintext 

[CSS] pobierz, plaintext 
#menu { 
	width: 250px; 
	margin-top: 10px; 
	float: left; 
	overflow: hidden; 
	color: #FFFFFF;
	background-image: url(images/js_menu_bg.png);
	background-repeat: repeat-y repeat-x;
}
#menu h2 {
	text-align: center;
}
#wysun { 
	position: inherit; 
	z-index: 2; 
	left: 0; 
	float: left; 
	padding-top: 40px; 
	display: none; 
	width: 0px; 
	height: 100px; 
	cursor: pointer;
}
#wysun span {
	display: block; 
	font-size: 24px; 
	height: 30px; 
	margin-top: 20px; 
	padding: 10px 0 10px 10px; 
	width: 20px; 
	background: #333;
	filter: alpha(opacity=50);
	-khtml-opacity: 0.5;
	-moz-opacity: 0.5;
	opacity: 0.5;
}
#wysun span:hover {
	display: block; 
	font-size: 24px; 
	height: 30px; 
	margin-top: 20px; 
	padding: 10px 0 10px 10px; 
	width: 20px; 
	background: #333;
	filter: alpha(opacity=70);
	-khtml-opacity: 0.7;
	-moz-opacity: 0.7;
	opacity: 0.7;
}
[CSS] pobierz, plaintext 

Jeśli chodzi o odnośnik do stronki, jak to wygląda na te chwilę - http://www.lnls.pl/mysttest/index.php

PS lnls.pl to także moja strona, po prostu chwilowo projektuje sobie nową stronę na tym FTP.


Z góry dzięki; czekam na odp. (IMG:style_emoticons/default/winksmiley.jpg)
Pozdrawiam.

Ten post edytował Krychu1 3.10.2009, 15:35:33

[vokiel]

To zmień css, wartości na jakie zamienić masz podane po kliknięciu na #wsun. Czyli taki stan powinien być na starcie.

Do tego jedna uwaga, nie pobieraj drugi raz tego samego elementu jeśli nie musisz

[JAVASCRIPT] pobierz, plaintext 
jQuery(document).ready(function(){
 $("#wsun").click(function(){
 $(this).show("normal").animate({width:"28px", opacity:1}, 200);
 $("#menu").animate({width:"0px", opacity:0}, 400 );
 $("#panel").animate({marginLeft:"-250px"}, 400 );
 });
 
 $("#wysun").click(function(){
 $("#menu").animate({width:"250px", opacity:1}, 400 );
 $("#panel").animate({marginLeft:"0px"}, 400 );
 $(this).animate({width:"0px", opacity:0}, 600).hide("slow");
 });
});
[JAVASCRIPT] pobierz, plaintext 

[Krychu1]

Chyba jednak do końca Ciebie nie zrozumiałem. Jakbyś mógł to rozwiń te pierwsze zdanie bo nie wiem czy dobrze je kapuje.

[vokiel]

Prześledź po kolei co się dzieje po kliknięciu #wsuń (wynikiem będzie to, że formularz logowania będzie ukryty, czyli tak jak chcesz).
1. $(this).show("normal").animate({width:"28px", opacity:1}, 200);

[CSS] pobierz, plaintext 
#wsun {display: block; width: 28px; opacity: 1}
[CSS] pobierz, plaintext 

2. $("#menu").animate({width:"0px", opacity:0}, 400 );

[CSS] pobierz, plaintext 
#menu {width: 0px; opacity: 0;}
[CSS] pobierz, plaintext 

3. $("#panel").animate({marginLeft:"-250px"}, 400 );

[CSS] pobierz, plaintext 
#panel {marginLeft: -250px;}
[CSS] pobierz, plaintext 

Tam gdzie występuje opacity, to możesz dodać visibility, bo różnie przeglądarki reagują na samo opacity.