19 Kası m 2017, Pazar, 11:20
SON YAYINLANAN

Smooth Menü

Smooth Menü CSS tabanlı, jQuery destekli bir menüdür. Kullanımı ve düzenlenmesi gayet basittir. Yatay ve dikey olmak üzere iki çeşittir. Ajax tabanlı açılır özelliğe sabittir.

DEMOYU İNCELE
Kurulum:

Aşağıdaki kodları html dosyanızda <head> kodundan sonra ekleyin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
	<link href="ddsmoothmenu.css" rel="stylesheet" type="text/css" />
	<link href="ddsmoothmenu-v.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script><script type="text/javascript" src="ddsmoothmenu.js">// <![CDATA[
 
// ]]></script><script type="text/javascript">// <![CDATA[
ddsmoothmenu.init({
	mainmenuid: "smoothmenu1", //menu DIV id
	orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
	classname: 'ddsmoothmenu', //class added to menu's outer DIV
	//customtheme: ["#1c5a80", "#18374a"],
	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
 
ddsmoothmenu.init({
	mainmenuid: "smoothmenu2", //Menu DIV id
	orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
	classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
	method: 'toggle', // set to 'hover' (default) or 'toggle'
	arrowswap: true, // enable rollover effect on menu arrow images?
	//customtheme: ["#804000", "#482400"],
	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
// ]]></script>

Aşağıdaki kodları <body> kodundan sonra ekleyin

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<h2>YATAY MENÜ</h2>
 
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://www.ajaxkod.com">ANASAYFA</a></li>
<li><a href="http://www.ajaxkod.com">HAKKIMIZDA</a>
  <ul>
  <li><a href="http://www.ajaxkod.com">DENEME</a></li>
  <li><a href="http://www.ajaxkod.com">DENEME</a></li>
  <li><a href="http://www.ajaxkod.com">DENEME</a></li>
 <li><a href="http://www.ajaxkod.com">DENEME</a></li>
  <li><a href="http://www.ajaxkod.com">DENEME</a></li>
  <li><a href="http://www.ajaxkod.com">DENEME</a></li>
  </ul>
</li>
<li><a href="http://www.ajaxkod.com">REFERANSLAR</a></li>
<li><a href="http://www.ajaxkod.com">AÇILIR MENÜ</a>
  <ul>
  <li><a href="http://www.ajaxkod.com">DENEME</a></li>
  <li><a href="http://www.ajaxkod.com">AÇILIR MENÜ</a>
    <ul>
    <li><a href="http://www.ajaxkod.com">DENEME</a></li>
    <li><a href="http://www.ajaxkod.com">DENEME</a></li>
    <li><a href="http://www.ajaxkod.com">AÇILIR MENÜ</a>
		<ul>
    		<li><a href="http://www.ajaxkod.com">DENEME</a></li>
            <li><a href="http://www.ajaxkod.com">DENEME</a></li>
            <li><a href="http://www.ajaxkod.com">DENEME</a></li>
            <li><a href="http://www.ajaxkod.com">DENEME</a></li>
		</ul>
    </li>
    </ul>
  </li>
  </ul>
</li>
<li><a href="http://www.ajaxkod.com">İLETİŞİM</a></li>
</ul>
<br style="clear: left" />
</div>
 
 
<h2 style="margin-top:200px">KEY MENÜ</h2>
 
<div id="smoothmenu2" class="ddsmoothmenu-v">
<ul>
<li><a href="http://www.ajaxkod.com">ANASAYFA</a></li>
<li><a href="http://www.ajaxkod.com">HAKKIMIZDA</a>
  <ul>
  <li><a href="http://www.ajaxkod.com">DENEME</a></li>
  <li><a href="http://www.ajaxkod.com">DENEME</a></li>
  <li><a href="http://www.ajaxkod.com">DENEME</a></li>
 <li><a href="http://www.ajaxkod.com">DENEME</a></li>
  <li><a href="http://www.ajaxkod.com">DENEME</a></li>
  <li><a href="http://www.ajaxkod.com">DENEME</a></li>
  </ul>
</li>
<li><a href="http://www.ajaxkod.com">REFERANSLAR</a></li>
<li><a href="http://www.ajaxkod.com">AÇILIR MENÜ</a>
  <ul>
  <li><a href="http://www.ajaxkod.com">DENEME</a></li>
  <li><a href="http://www.ajaxkod.com">AÇILIR MENÜ</a>
    <ul>
    <li><a href="http://www.ajaxkod.com">DENEME</a></li>
    <li><a href="http://www.ajaxkod.com">DENEME</a></li>
    <li><a href="http://www.ajaxkod.com">AÇILIR MENÜ</a>
		<ul>
    		<li><a href="http://www.ajaxkod.com">DENEME</a></li>
            <li><a href="http://www.ajaxkod.com">DENEME</a></li>
            <li><a href="http://www.ajaxkod.com">DENEME</a></li>
            <li><a href="http://www.ajaxkod.com">DENEME</a></li>
		</ul>
    </li>
    </ul>
  </li>
  </ul>
</li>
<li><a href="http://www.ajaxkod.com">İLETİŞİM</a></li>
</ul>
 
<br style="clear: left" />
</div>

Son olarak aşağıdaki dosyaları indirin.

İNDİR
Rar şifresi: www.ajaxkod.com

İndirdiğiniz dosyaları oluşturduğunuz .html dosyası ile aynı dizine atmanız gerekmektedir.
Örneğin html dosyanız
www.ajaxkod.com/deneme.html
ise dosyaların konumu
www.ajaxkod.com/ddsmoothmenu.css
gibi olması gerekmektedir. Tüm dosyaları bu şekilde aynı dizine atınız!

Yorum Yaz

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current day month ye@r *

manset5
Hareketli Not Defteri

Çeşitli projelerinizde kullanabileceğiniz, jQuery tabanlı, kullanıcıların sayfa üzerinde not almalarını sağlayan bir not defteri. Fare ile not defterinin üzerine geldiğimiz...

Kapat