Animowane menu CSS połączone ze sliderem

Dla specjalistów Webmastering
#1

Witam,

 

Mam pytanie, jak napisać skrypt takiego niby menu, niby galerii :

 

mam np.:

 

3 buttony :

 

  1. button1

  2. button2

  3. button3

 

i 3 karty w “galerii” :

 

  1. karta1

  2. karta2

  3. karta3

 

Jak się pewnie domyślacie działa to tak klikam w button2 wjeżdża karta2 itp. A teraz jak to napisać? Nie interesują mnie istniejące już galerie, gdyż tego nie mam jak zaimplementować.

#2

Najlepiej w jQuery:

$(document).ready(function(){
  $("#button1").click(function(){
    $("#karta1").animate({height: "200px"}, "1000");
  });
});

no i tym kartom musiałbyś dodać

position: absolute;
#3

jacko1998, dzięki za szybką pomoc, rozumiem co z tym drugim, ale tego pierwszego nie lapie…

#4

TheJacol2015 , zapoznaj się, proszę, z tym tematem i tą stroną, a następnie - korzystając z przycisku Edytuj (na dole pierwszego posta po prawej stronie) i opcji Użyj pełnego edytora - popraw tytuł wątku tak, by mówił konkretnie o problemie. Poprawnie zatytułowany wątek zwiększa szansę na uzyskanie szybkiej pomocy. Zignorowanie tej prośby będzie skutkować przeniesieniem tematu do kosza.

Pozdrawiam,

Dimatheus

#5

Dobrze dziękuję za info, już zmieniam.

#6

http://blog.poslinski.net/jquery-animate/, http://webhelp.pl/artykuly/jquery-animacje/

#7 
<html>
<head>
<style>
.buttony {

}

.karty {
position:absolute;
}

</style>
<script>
$(document).ready(function(){
  $("#button1").click(function(){
    $("#karta1").animate({height: "200px"}, "1000");
  });
});
</script>
</head>
<body>

<table class="buttony" border="1">
<tr>
<td><div class="button1">button1</div></td>
<td><div class="button2">button2</div></td>
<td><div class="button3">button3</div></td>
</tr>
</table>

<table class="karty" border="1">
<tr>
<td><div class="karta1">karta1</div></td>
<td><div class="karta2">karta2</div></td>
<td><div class="karta3">karta3</div></td>
</tr>
</table>

</body>
</html>

Dodaje mój skromny skrypt.

 

#8 
<html>
<head>
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<style>
.buttony {

}

.karty {
position:absolute;
}

</style>
<script>
$(document).ready(function(){
  $("#button1").click(function(){
    $("#karta1").animate({height: "200px"}, "1000");
  });
});
</script>
</head>
<body>

<table class="buttony" border="1">
<tr>
<td><div class="button1">button1</div></td>
<td><div class="button2">button2</div></td>
<td><div class="button3">button3</div></td>
</tr>
</table>

<table class="karty" border="1">
<tr>
<td><div class="karta1">karta1</div></td>
<td><div class="karta2">karta2</div></td>
<td><div class="karta3">karta3</div></td>
</tr>
</table>

</body>
</html>

https://mega.co.nz/#!5R81XLTD!GX2QXg-TIP3JGScdviQS_Eyt-xogufUMh-9A88f4ymU - pobierz i w folderze strony dodaj folder js i w nim umieść ten plik

#9

Mam pytanie do tego linku, jakie jest hasło o jakie tam proszą?

#10
  1. Klikasz download i się ściąga :stuck_out_tongue:
  2. Nadawanie klas dla pojedynczych elementów mija się z celem, sam fakt że pisanie tego samego kodu 20x dla 20buttonów mija się z celem. Nadajesz klasę potem id, funkcja dla klasy pracujesz na id. Poza tym, w js masz id a w html klasę więc nie ma prawa działać
  3. Sam js tylko zanimuje w jedną stronę, trzeba jeszcze powrócić i trzymać stan w jakim jest slider. 
#11
  1. To jest pewien problem, jak w CSS zrobić coś takiego : klikam/najeżdżam w button3 wyjeżdża karta3
#12

Robisz to w 3 krokach, naucz się czegoś ja ci mogę doradzić :stuck_out_tongue:

#13

Proszę więc o poradę jak to wpisać wujkowi żeby znalazł, w CSS jestem nowy…

#14

Może zbyt ciężkie zadanie sobie postawiłeś ? Naucz się css i html potem zacznij z czymś nowym.

PS.: kurs html i css możesz znaleźć np tu http://www.youtube.com/watch?v=HlQwmsiyad0&list=PLlkMsXmZPFXwskqEw3Q6A0qPuNxidhJom (mój kurs)