Flickr的横向下拉菜单效果实现教程

下面这个教程来自woork，将教你如何利用CSS和javascript实现像Flickr那样的横向下拉菜单。

一步一步的来：

1. 使用一个javascript函数showmenu()来显示和隐藏菜单。
   function showMenu(id_menu){
   var my_menu = document.getElementById(id_menu);
   if(my_menu.style.display==”none” || my_menu.style.display==”"){
   my_menu.style.display=”block”;
   } else {
   my_menu.style.display=”none”;
   }
   }

   我就不对这个函数进行详细的介绍了，如果你有兴趣，点这里 查看更多有关该Javascript函数的更多信息。

2. HTML代码及其菜单的结构写法

   

   使用<li>元素来显示横向下拉菜单，并包括个div层的子菜单，这个div层里面就包含着要隐藏和关闭的下拉菜单中的链接。默认，我们当然是要它为隐藏的。

   <ul>
   <li class=“menu” id=“profile”><span><a href=“index.html”>Profile</a> <img src=“arrow.png” name=“arrow_profile”></span>
   <!– Submenu –>
   <div class=“sub_menu” id=“id_menu_profile”>
   <a href=“index.html”>Modify Profile</a>
   <a href=“index.html”>Contact List</a>
   <a href=“index.html”>Add photo</a>
   <a href=“index.html”>class=“item_line”>Invite your Friends</a>
   <a href=“index.html”>Invite History</a>
   <a href=“index.html”>Guest Pass History</a>
   </div>
   

   </li>
   </ul>

3. 呃，还等什么，没有了，快看看效果。如果没有实现，那估计你得下载一下这个示例了。里面包含HTML示例和所需要调用的Javascript。你会明白的。

来源于 Flickr的横向下拉菜单效果实现教程 | 帕兰映像

标签: CSS, flickr, function, HTML, JavaScript, 菜单