Thaimisc.com : แสดงและซ่อนเมนูแบบ Filp
ThaiMisc.Com : Free Webboard | Free GuestBook | Free Poll | Free Ecard Server | Free Java Chat Room | Advertising | Contact Us | Colocation | Web Hosting | เปิดร้านค้าฟรี


Category : Today's Tips Print Article Only Print Aticle With Comment
แสดงและซ่อนเมนูแบบ Filp
เขียนโดย Poj , 07-08-2007
ทำเมนุแบบ Flip เมื่อคลิกที่เมนูก็จะแสดงเมนูที่ซ่อนไว้ และเมื่อคลิกอีกครั้งก็จะซ่อนเมนู ดูตัวอย่างได้จากที่นี่ ครับ

1.นำโค้ดส่วนนี้ไปใส่ไว้ใน <head>....</head> ครับ

<script type="text/javascript" language="JavaScript" src="flipmenu.js">

/***********************************************
* Flip Menu- by Osem Websystems (http://www.osem.nl/)
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/

</script>



2. คลิกขวาแล้วเซฟไฟล์และรูปภาพเหล่านี้แล้วนำไปไว้ที่เดียวกับไฟล์ที่จะใช้

flipmenu.js


3.นำโค้ดส่วนนี้ไปใส่ไว้ใน <body>....</body> ครับ

<ul class="flipMenu">
<li>JavaScript Resources
<ul>
<li><a href="http://www.javascriptkit.com/">JavaScript Kit</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript Tutorials</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com/dhtmltutors/cssreference.shtml">CSS Reference</a></li>
</ul>
</li>
<li>Web Resources
<ul>
<li><a href="http://www.dynamicdrive.com">Dynamic HTML</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Generator</a></li>
<li>Search Engines
<ul>
<li style="list-style-image: url(flip_google.gif)"><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.yahoo.com">Yahoo</a></li>
<li><a href="http://www.altavista.com">Altavista</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="javascript:closeAllFlips()">Hide All</a></li>
<li><a href="javascript:openAllFlips()">Show All</a></li>
</ul>


Credit - javascriptkit

<- Back | Next ->

ThaiMisc.Com : Free Webboard | Free GuestBook | Free Poll | Free Ecard Server | Free Java Chat Room | Advertising | Contact Us
Copyright 1999-2006 Thailand Miscellaneous. Allrights reserved. webmaster@thaimisc.com