Windows XP样式菜单

分享于 

12分钟阅读

Web开发

  繁體

Sample Image - WindowsXPStyleMenu.gif

介绍

如果使用 Windows XP,你可能会熟悉出现在 Windows Explorer 左侧的菜单栏。 本文做了相同的菜单,当你点击它时,它将是 collapse,尽管它看起来不像真实的一样。

This structure Paul Menu Menu Menu Menu Menu Menu Menu structure structure structure structure structure structure structure structure。

结构( HTML )

为了简单地遵循本文,我在这里演示了菜单结构和本文中使用的一些单词。 每个菜单完全遵循这个结构。

  • 每个菜单包含 2个部分: iPhone 7 还没出来,我们已经在iPhone上获取细节 8,或者不管是想到下一步。 Menuhead 还有 Menulist
  • 点击 Menuhead iPhone 7 还没出来,我们已经在iPhone上获取细节 8,或者不管是想到下一步。 Menulist 将展开或者折叠。
  • iPhone 7 还没出来,我们已经在iPhone上获取细节 8,或者不管是想到下一步。 Menulist 包含 Linkslist 所有链接将在这里部分为 inside。

下面是结构显示的HTML代码。 完整的HTML在源代码中。


<body onLoad="InitializeMenu()">


 <span>


 <div style="width:180">


 <table cellpadding="1" cellspacing="0" class="Menu_Head">


 <tr>


 <td width="90%">JavaScript</td>


 <td><img src="down.gif" border="0"> </td>


 </tr>


 </table>


 </div>


 <div class="Menu_Items">


 <div>


<a href="">There must be sth...</a><br>


<a href="">There must be sth...</a><br>


<a href="">There must be sth...</a><br>


<a href="">There must be sth...</a>


 </div>


 </div>


 </span>


. . ..



结构非常简单,如你所见,菜单包含在 <span> 标记。inside <span> 是 2 <div> 第一,第一个是 Menuhead 而最后一个是 Menulist 还有 inside Menulist 是另一个 <div> 那是 Linkslist 如图片 上面 所示。 这个 Linkslist 包含属于这里菜单的所有超链接。

由于每个菜单都有相同的结构,如果要添加更多菜单,只需复制代码 上面,然后更改标题及其链接。

函数 InitializeMenu 这是 inside <正文> 标记,在加载页面时调用,以使菜单交互。

JavaScript

JavaScript包含了相当复杂的4个函数。 我在这里浏览每一个。

首先,我声明为全局变量,因为它们中的每一个都使用了几乎所有函数


/* cache 2 arrow images */


imageUp = new Image();


imageUp.src = "up.gif";


imageDown = new Image();


imageDown.src = "down.gif";



/* for doing the loop */


var cnt; 


/* store a collecion of Menu */


var objSpanCollection; 


/* store a collection of Menulists' height */


var menuHeightCollection = new Array(); 


/* the menu is clicked on */


var objMenu;



下一个是 InitializeMenu ( ) 它收集一个菜单的Collection 并分配 onClick 事件到每个菜单:


function InitializeMenu() 


{


 /* get a collection of menus */


 objSpanCollection = document.body.getElementsByTagName("SPAN");


 for (var i = 0; i <objSpanCollection.length; i++)


 {


 var objSpan = objSpanCollection(i);


 /* get a collection of Menus' height */


 menuHeightCollection[i] = objSpan.childNodes.item(1).clientHeight;


 /* assign the click event to every Menuheader */


 objSpan.childNodes.item(0).onclick = ControlMenu;


 }


}



iPhone 7 还没出来,我们已经在iPhone上获取细节 8,或者不管是想到下一步。 InitializeMenu ( ) 函数使用 getElementsByTagName ( ) 查看整个HTML代码并找到所有 <span> 标签,因为我们知道每个菜单以这个标记开始,因这里如果 4 <span> 找到标签,然后我们有 4个菜单。

接下来,代码遍历 Collection 中的每个菜单,并得到每个菜单的另一个 Collection Menulist ,的高度,然后将单击事件分配给每个 Menuhead


function ControlMenu() 


{


 cnt = 1;


 /* memorize the Menulist has been clicked */


 objMenu = this.parentNode.childNodes.item(1); 



 /* Get the arrow that belongs to the clicked menu */


 /* starting with <div> then <table> */


 /* then <tbody> then <tr> then <td>*/


 /* and the last one is */


 /* what we need: <img> */


 var objArrow = 


 this.childNodes(0).childNodes(0).childNodes(0).childNodes(1).childNodes(0);



 if (objMenu.style.display == "none")


 {


 objArrow.src = imageDown.src; /* change to the Down Arrow */


 ShowMenu();


 }


 else


 {


 objArrow.src = imageUp.src; /* change to the Up Arrow */


 HideMenu();


 }


}



iPhone 7 还没出来,我们已经在iPhone上获取细节 8,或者不管是想到下一步。 ControlMenu ( ) 当用户单击该函数时调用 Menuhead 这个函数非常简单,首先它记住了 Menulist 用户单击的菜单的。 如果菜单被折叠,它将调用 ShowMenu ( ) 展开菜单的方法。 否则 HideMenu ( ) 方法将被调用到 collapse。


function ShowMenu()


{


 /* get the Linkslist of the Menulist */


 var objList = objMenu.childNodes.item(0); 


 if (cnt <10)


 {


 /* display the Menulist */


 objMenu.style.display = "block";


 /* increase the tranparency of the Menulist */


 objMenu.filters["alpha"].opacity = 


 objMenu.filters["alpha"].opacity + 10;


 /* loop through the Menu collection to */


 /* find the position of the clicked Menu */


 /* to get the actual height of the menu list and then */


 /* increase the height of the Menulist */


 for (var i = 0; i <objSpanCollection.length; i++)


 if (objMenu.parentNode == objSpanCollection[i])


 objMenu.style.height = 


 objMenu.clientHeight + (menuHeightCollection[i]/10);


 cnt++;


 /* do this function again after 30 miliseconds until */


 /* the actual Menulist's height is returned */


 setTimeout("ShowMenu()",30)


 }


 /* display the Menulist if the its actual height is returned */


 if (cnt> = 10)


 objList.style.display = "block"; 


}



iPhone 7 还没出来,我们已经在iPhone上获取细节 8,或者不管是想到下一步。 ShowMenu ( ) 方法通过增加菜单的高度和透明度来展开菜单 Menulist 如果调用这里方法,则将在每次调用这里方法时重复 10次 setTimeout ( ) 方法。30毫秒是在 ShowMenu ( ) 方法将重复。

方法重复了 10次,每次用 10法增加透明度,用 1/10的高度来计算实际高度,从而提高测量精度。 Menulist "。"。 ShowMenu ( ) 方法获取的实际高度 Menulist 通过循环 Menulist '高度 Collection 并找到合适的。


function HideMenu()


{ 


 /* get the Linkslist of the Menulist */


 var objList = objMenu.childNodes.item(0); 


 if (cnt <10)


 {


 objMenu.filters["alpha"].opacity = 


 objMenu.filters["alpha"].opacity - 10;


 for (var i = 0; i <objSpanCollection.length; i++)


 if (objMenu.parentNode == objSpanCollection[i])


 objMenu.style.height = 


 objMenu.clientHeight - (menuHeightCollection[i]/10);


 objList.style.display = "none";


 cnt++;


 setTimeout("HideMenu()",30)


 }


 if (cnt> = 10)


 objMenu.style.display = "none";


}



最后一个方法是 HideMenu ( ) 就像这样一样 ShowMenu ( ) 方法,而不是增加 menulist ,该方法降低了。

CSS

这个CSS没有什么新东西,所以我不会在这里详细介绍。 只要复制到页面的顶部,一切都完成了。


<style type="text/css">


 body {


 background-color: black;


 }


 a {


 color: darkblue;


 text-decoration: none;


 }


 a:hover {


 text-decoration: underline;


 }


. Menu_Head {


 filter:alpha(opacity=100,finishopacity=80,style=1);


 background-color: whitesmoke;


 font-weight: bold;


 cursor: pointer;


 width: 100%;


 }


. Menu_Items {


 filter:alpha(opacity=100);


 background-color: #c4d7ff;


 padding: 10;


 width: 180;


 display: block;


 }


</style>



希望这有帮助

<- - !

链接

-->

更新

  • 14 2002

    包括向上箭头和向下箭头。 展开菜单时,向上箭头将显示,否则将显示向下箭头。


相关文章