首页>>教学>>网页技巧>>CSS>>正文

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函数的更多信息。

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

   

   使用

2. 元素来显示横向下拉菜单，并包括个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>
  
  

  
  

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