Css Menu Script
หลายคนคงเคยเห็น เมนูสวย
หลายคนคงเคยเห็น เมนูสวยๆ แบบนี้ ซึ่่ง Menu แบบนี้เค้าเรียกกันว่า Css Dock Menu โดยวันนี้ใครอยากทำ menu website สวยๆแบบ Dock ลองมาดูกันครับ
โดยต้นฉบับของเมนู Dock มากจากเว็บนี้ครับ( http://www.ndesign-studio.com) โดยเว็บไซต์ที่เห็นทั่วๆไปก็นำไปใช้กันเยอะแยะครับ ส่วนใครสนใจจะเอาไปใช้ก็เอาไปใช้ได้เลยนะครับ ใครอยากมี Menu เท่ห์ๆ แบบนี้ มาลองกันได้ครับไม่ยาก หรือจะดูตัวอย่างเมนู คลิกดูตัวอย่าง
ที่นี้ได้เลยครับ Css Menu Dockวิธีการนำเมนู Css Dock Menu ไปใช้
อย่างแรกไปดาวน์โหลด พวก ไฟล์ css js และก็ รูปภาพมาใช้ก่อนโดยดาวน์โหลด
ที่นี่ครับ
โดยในไฟล์จะมีไฟล์ html ตัวอย่างครับ หากอ่านไม่เข้าใจสามารถเปิดไฟล์ html ดูได้ครับ
นำโค๊ด เหล่านี้ไว้ตรงแท็ก head
1
2
3
4
5
6
7
8
9
|
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
< ![endif]--> |
2 ก๊อบ code พวกนี้ไว้ใน แท็ก body
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
|
<!--dock menu JS options -->
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
$('#dock2').Fisheye(
{
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script> |
และก็ส่วนนี้เป็นส่วนที่เอาเมนูไปแสดงผล
1
2
3
4
5
6
7
8
9
10
11
12
13
| <div id="dock" class="dock">
<div class="dock-container">
<a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="#"><img src="images/email.png" alt="contact" /><span>Contact</span></a>
<a class="dock-item" href="#"><img src="images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
<a class="dock-item" href="#"><img src="images/music.png" alt="music" /><span>Music</span></a>
<a class="dock-item" href="#"><img src="images/video.png" alt="video" /><span>Video</span></a>
<a class="dock-item" href="#"><img src="images/history.png" alt="history" /><span>History</span></a>
<a class="dock-item" href="#"><img src="images/calendar.png" alt="calendar" /><span>Calendar</span></a>
<a class="dock-item" href="#"><img src="images/rss.png" alt="rss" /><span>RSS</span></a>
<a class="dock-item" href="#"><img src="images/rss.png" alt="rss" /><span>RSS</span></a>
<a class="dock-item" href="#"><img src="images/rss2.png" alt="rss" /><span>RSS2</span></a></div>
</div> |
เสร็จแล้วดูผลนะครับ หากใครรันดูผลไม่ได้ หน้าตาเป็นแบบนี้
Css Menu Script
ให้คลิกขวาตรงแถบสีเหลืองๆแล้วเลือก Allow Blocked Content… ครับ ถ้าเอาไปใช้ในHost ก็ใช้ได้เลยครับ ไม่ต้อง ไปคลิกขวาเลือก Allow Blocked Content… ครับ
0 ความคิดเห็น :
แสดงความคิดเห็น