Wysuwane boczne menu przy użyciu "onclick"

Question

Witam Wszystkich,

Chce zrobić na stronie menu wysuwane z lewego boku po kliknięciu na strzałkę i pokazanie okna imput po kliknięciu na lupę wyszukiwania. Czy to wszystko można zrobić przy użyciu onclick?

Comments

Mam jeszcze takie pytanie, gdzie zapisać informacje co ma zostać na stronie po użyciu:                                                             

$(document).ready(function(){
																																	$("#search").click(function(){
																																		$(".input").toggle("slow");
																																	});
																																});

 

Answer 1

Tak, proponowałbym skorzystać z biblioteki jquery.

1. Tworzysz element np. o id=lupa

2. Tworzysz diva w którym umieścisz cały formularz i nadajesz mu atrybut w css {display:none;} o id=login

3. W jquery robisz:

$('#lupa').on('click', function(){

 $('#login').slideToggle();

});

 

Przy użyciu tylko javascriptu mógłbyś zrobić onclicka, który wywoływałby funkcje która  podmieniałaby właściwość w css elementu o id=login z {display:none} na {display:block}, ale wtedy nie miałbyś animacji rozwijania

Comments

proponowałbym skorzystać z biblioteki jquery.

A ja nie proponowałbym do tak błahej rzeczy ładować całej libki :)

Answer 2

function showMe()

{

$("#tu_id_menu").stop().animate({marginRight:-100}, 500);
   

}

document.addEventListener("DOMContentLoaded", function() {

var element = document.getElementById('tu_id_menu');

element.addEventListener('click', showMe);

 

});

Answer 3

onclick -> addEventListener

Wystylizuj wszystko w CSS-esie, animacje wysuwanego elementu również można tam zrobić, a w JS jedynie dodaj nasłuchiwanie eventu click(addEventListener) i ustawiaj odpowiednią klasę dla bloku menu gdy klikniemy w strzałkę.