PHP BLOG: jQuery ile Açılır Kapanır Menü Yapımı

Merhaba arkadaşlar bu dersimizde sizinle beraber jQuery ile son model bir menü yapıcağız.

Memünüzden Bir Görüntü :

Arasına alttaki kodları ekleyiniz

1

2

3

&lt;link type=&quot;text/css&quot; href=&quot;/ornek2/jquery_acilir_menu_style/menu.css&quot; rel=&quot;stylesheet&quot; /&gt;

    &lt;script type=&quot;text/javascript&quot; src=&quot;/ornek2/jquery_acilir_menu_style/jquery.js&quot;&gt;&lt;/script&gt;

    &lt;script type=&quot;text/javascript&quot; src=&quot;/ornek2/jquery_acilir_menu_style/menu.js&quot;&gt;&lt;/script&gt;

<body> </body> Arasına ise Şu Kodları Ekleyiniz..

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

&lt;/pre&gt;

&lt;div id=&quot;menu&quot;&gt;

 &lt;ul class=&quot;menu&quot;&gt;

 &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;parent&quot;&gt;&lt;span&gt;Ana Sayfa&lt;/span&gt;&lt;/a&gt;

 &lt;div&gt;&lt;ul&gt;

 &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;parent&quot;&gt;&lt;span&gt;Menü&lt;/span&gt;&lt;/a&gt;

 &lt;div&gt;&lt;ul&gt;

 &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;parent&quot;&gt;&lt;span&gt;Alt Menü&lt;/span&gt;&lt;/a&gt;

 &lt;div&gt;&lt;ul&gt;

 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;Alt Menü&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;Alt Menü&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

 &lt;/ul&gt;&lt;/div&gt;

 &lt;/li&gt;

 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;Alt Menü&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;Alt Menü&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;Alt Menü&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;Alt Menü&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;Alt Menü&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

 &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;parent&quot;&gt;&lt;span&gt;Alt Menü&lt;/span&gt;&lt;/a&gt;

 &lt;div&gt;&lt;ul&gt;

 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;Alt Menü&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;Alt Menü&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

 &lt;/ul&gt;&lt;/div&gt;

 &lt;/li&gt;

 &lt;/ul&gt;&lt;/div&gt;

 &lt;/li&gt;

 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;Menü&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;Menü&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

 &lt;/ul&gt;&lt;/div&gt;

 &lt;/li&gt;

 &lt;li&gt;&lt;a href=&quot;http://www.savascanaltun.com/&quot; class=&quot;parent&quot;&gt;&lt;span&gt;Savas Can Altun&lt;/span&gt;&lt;/a&gt;

 &lt;div&gt;&lt;ul&gt;

 &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;parent&quot;&gt;&lt;span&gt;C#&lt;/span&gt;&lt;/a&gt;

 &lt;div&gt;&lt;ul&gt;

 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;Form&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;Consol&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

 &lt;/ul&gt;&lt;/div&gt;

 &lt;/li&gt;

 &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;parent&quot;&gt;&lt;span&gt;HTML &lt;/span&gt;&lt;/a&gt;

 &lt;div&gt;&lt;ul&gt;

 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;HTML&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;CSS&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

 &lt;/ul&gt;&lt;/div&gt;

 &lt;/li&gt;

 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;Webmaster&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;Teknoloji&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;Jquery&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;PHP / MYSQL&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

 &lt;/ul&gt;&lt;/div&gt;

 &lt;/li&gt;

 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;Yardim&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

 &lt;li class=&quot;last&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;Ulaşım&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

 &lt;/ul&gt;

&lt;/div&gt;

Kodlar caps’taki ile aynı olsun diye komple verdim uzata veya kısalta bilirsiniz..

Uygulamayı indir : TIKLA İNDİR

Rar Pas : www.savascanaltun.com

PHP BLOG

7 Şubat 2014 Cuma

jQuery ile Açılır Kapanır Menü Yapımı

Hiç yorum yok:

Yorum Gönder