Slashdot Menu
วันนี้ได้ลองทำ Slashdot Menu ดูครับ น่าสนุกเลยทีเดียว สำหรับเมนูนี้
ตัวอย่าง อยากได้ code ก็ โหลดจากหน้านั้นได้เลยครับ หรือ sdmenu.zip
สามารถเปลี่ยนแปลงค่าได้ โดยเปลี่ยนตามนี้ครับ
var myMenu = new SDMenu(”main_menu”); // ID of the menu element
// Default values…
myMenu.speed = 3; // Menu sliding speed (1 – 5 recomended)
myMenu.remember = true; // Store menu states (expanded or collapsed) in cookie and restore later
myMenu.oneSmOnly = false; // One expanded submenu at a time
myMenu.markCurrent = true; // Mark current link / page (link.href == location.href)
myMenu.init();
// Additional methods…
var firstSubmenu = myMenu.submenus[0];
myMenu.expandMenu(firstSubmenu); // Expand a submenu
myMenu.collapseMenu(firstSubmenu); // Collapse a menu
myMenu.toggleMenu(firstSubmenu); // Expand if collapsed and collapse if expanded
myMenu.expandAll(); // Expand all submenus
myMenu.collapseAll(); // Collapse all submenus
เวลาเรียกใช้ก็แบบนี้ครับ
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”sdmenu/sdmenu.css” />
<script type=”text/javascript” src=”sdmenu/sdmenu.js“>
/***********************************************
* Slashdot Menu script- By DimX
* Submitted to Dynamic Drive DHTML code library: http://www.dynamicdrive.com
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<script type=”text/javascript”>
// <![CDATA[
var myMenu;
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.init();
};
// ]]>
</script>
</head>
<body>
<div id=”my_menu” class=”sdmenu”>
<div>
<span>Online Tools</span>
<a href=”http://tools.dynamicdrive.com/imageoptimizer/”>Image Optimizer</a>
<a href=”http://tools.dynamicdrive.com/favicon/”>FavIcon Generator</a>
<a href=”http://www.dynamicdrive.com/emailriddler/”>Email Riddler</a>
<a href=”http://tools.dynamicdrive.com/password/”>htaccess Password</a>
<a href=”http://tools.dynamicdrive.com/gradient/”>Gradient Image</a>
<a href=”http://tools.dynamicdrive.com/button/”>Button Maker</a>
</div>
<div>
<span>Support Us</span>
<a href=”http://www.dynamicdrive.com/recommendit/”>Recommend Us</a>
<a href=”http://www.dynamicdrive.com/link.htm”>Link to Us</a>
<a href=”http://www.dynamicdrive.com/resources/”>Web Resources</a>
</div>
<div class=”collapsed”>
<span>Partners</span>
<a href=”http://www.javascriptkit.com”>JavaScript Kit</a>
<a href=”http://www.cssdrive.com”>CSS Drive</a>
<a href=”http://www.codingforums.com”>CodingForums</a>
<a href=”http://www.dynamicdrive.com/style/”>CSS Examples</a>
</div>
<div>
<span>Test Current</span>
<a href=”?foo=bar”>Current or not</a>
<a href=”./”>Current or not</a>
<a href=”index.html”>Current or not</a>
<a href=”index.html?query”>Current or not</a>
</div>
</div>
</body>
</html>
credit : http://www.dynamicdrive.com/dynamicindex1/slashdot.htm
Tags: CSS
June 19th, 2009 at 4:32 pm
Wow, this is very useful.. Thanks for sharing this and hoping I could implement it too.