[Web]经典下拉菜单

原创 2007年09月29日 16:48:00



效果如图:

 

实现代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
<title>工具条上的弹出式菜单</title>
    
<style type="text/css">...


.MenuItem
{...}{
    display
:block;
    width
:60px;
    height
:20px;
    font-size
: 12px;
    float
:left;
    text-align
:center;
    cursor
: hand;
    padding
:2px 0px 0px 0px;
}


</style>

    
<script type="text/javascript">...

    
var popup = window.createPopup();
    
var width;
    
var height;
    
    
function Pop_menu(divMenuList,width,height,toolbarMenuItem)
    
...{
        popup.document.body.innerHTML 
= divMenuList.innerHTML;
        
        popup.show(
0,22,width,height,toolbarMenuItem);  
        
        
// 0 和 23 是相对于toolbarMenuItem元素左上角的坐标点(x,y)
        // width 显示菜单的宽度
        // height 显示菜单的高度
        // toolbarMenuItem 要弹出菜单的对象
        
    }


    
</script>

</head>
<body>
    
<!--菜单条-->
    
<div id="toolbar_menu" style="width: 100%; height: 20px; background-color: #ece9d8;
        border: darkgray 1px solid;"
>
        
<!--菜单元素-->
        
<div id="MenuItem1" class="MenuItem" 
            onmousemove
="this.style.color='#FFFFFF'; this.style.background='#4169e1';Pop_menu(filMenuList,120,122,MenuItem1)"
            onfocus
="this.style.color='#FFFFFF'; this.style.background='#4169e1';Pop_menu(filMenuList,120,122,MenuItem1)"
            onmouseout
="this.style.color='black';this.style.background='#ece9d8'"
            onfocusout
="this.style.color='black';this.style.background='#ece9d8'" 
            accesskey
="F">文件(<u>F</u>)</div>
        
        
        
<div id="MenuItem2" class="MenuItem"
            onmousemove
="this.style.color='#FFFFFF'; this.style.background='#4169e1';Pop_menu(filMenuList,120,122,MenuItem2)"
            onfocus
="this.style.color='#FFFFFF'; this.style.background='#4169e1';Pop_menu(filMenuList,120,122,MenuItem2)"
            onmouseout
="this.style.color='black';this.style.background='#ece9d8'"
            onfocusout
="this.style.color='black';this.style.background='#ece9d8'" 
            accesskey
="E">编辑(<u>E</u>)</div>
        
        
        
<div id="MenuItem3" class="MenuItem"
            onmousemove
="this.style.color='#FFFFFF'; this.style.background='#4169e1';Pop_menu(filMenuList,120,122,MenuItem3)"
            onfocus
="this.style.color='#FFFFFF'; this.style.background='#4169e1';Pop_menu(filMenuList,120,122,MenuItem3)"
            onmouseout
="this.style.color='black';this.style.background='#ece9d8'"
            onfocusout
="this.style.color='black';this.style.background='#ece9d8'" 
            accesskey
="V">视图(<u>V</u>)</div>
        
        
        
<div id="MenuItem4" class="MenuItem"
            onmousemove
="this.style.color='#FFFFFF'; this.style.background='#4169e1';Pop_menu(filMenuList,120,122,MenuItem4)"
            onfocus
="this.style.color='#FFFFFF'; this.style.background='#4169e1';Pop_menu(filMenuList,120,122,MenuItem4)"
            onmouseout
="this.style.color='black';this.style.background='#ece9d8'"
            onfocusout
="this.style.color='black';this.style.background='#ece9d8'" 
            accesskey
="S">网站(<u>S</u>)</div>
        
<div style="clear: both;">
        
</div>
    
</div>
    
    
    
    
<div style="width: 100%; height: 200px; background-color: #cccc99;"></div>
    
    
    
    
<!--文件菜单-->
    
<div id="filMenuList" style="display: none;">
    
    
        
<!--菜单列表元素-->
        
<div style="width: 120px; height: auto; background-color: #eee; border: darkgray 1px solid;">
            
            
            
<div onmousemove="this.style.color='white'; this.style.background='#4169e1';" onmouseout="this.style.color='black';this.style.background='#eee'">
                
<span onclick="parent.location.href='http://blog.csdn.net/qghboy'" style="cursor: hand;
                    height: 20px; font-size: 12px; padding: 5px;"
>我的CSDN博客</span>
            
</div>
            
<div onmousemove="this.style.color='white'; this.style.background='#4169e1';" onmouseout="this.style.color='black';this.style.background='#eee'">
                
<span onclick="parent.location.href='http://blog.csdn.net/qghboy'" style="cursor: hand;
                    height: 20px; font-size: 12px; padding: 5px;"
>我的CSDN博客</span>
            
</div>
            
<div onmousemove="this.style.color='white'; this.style.background='#4169e1';" onmouseout="this.style.color='black';this.style.background='#eee'">
                
<span onclick="parent.location.href='http://blog.csdn.net/qghboy'" style="cursor: hand;
                    height: 20px; font-size: 12px; padding: 5px;"
>我的CSDN博客</span>
            
</div>
            
<div onmousemove="this.style.color='white'; this.style.background='#4169e1';" onmouseout="this.style.color='black';this.style.background='#eee'">
                
<span onclick="parent.location.href='http://hexun.com/qghboy'" style="cursor: hand;
                    height: 20px; font-size: 12px; padding: 5px;"
>我的和讯博客</span>
            
</div>
            
<div onmousemove="this.style.color='white'; this.style.background='#4169e1';" onmouseout="this.style.color='black';this.style.background='#eee'">
                
<span onclick="parent.location.href='http://hexun.com/qghboy'" style="cursor: hand;
                    height: 20px; font-size: 12px; padding: 5px;"
>我的和讯博客</span>
            
</div>
            
            
        
</div>
        
        
    
</div>
</body>
</html>

Web前端开发实战3:二级下拉式菜单之jQuery实现

大家都知道jQuery是一个框架,它对JS进行了封装,使其更方便使用。前面两篇博文分别是用CSS样式和JS实现 的,那么这篇就用jQuery来实现二级下拉式菜单。        使用JQuery实...
  • erlian1992
  • erlian1992
  • 2015年12月31日 19:42
  • 3273

30+ Web下拉菜单

30+ Web下拉菜单 原文:http://smashinghub.com/3-useful-drop-down-menu-scripts-to-enhance-header-nav...
  • woshirongshaolin
  • woshirongshaolin
  • 2012年12月14日 23:10
  • 1239

VBS脚本常用经典代码收集

VBS脚本用途很多:1. 计算2. 处理文件和文件夹3. 管理Windows4. 处理Word, Excel, PowerPoint等Office文档5. 嵌入网页,驱动dHTML6. 编写H...
  • benpaodewoniu2009
  • benpaodewoniu2009
  • 2010年12月26日 01:07
  • 1562

web前端-CSS 下拉菜单 -025

基本下拉菜单当鼠标移动到指定元素上时,会出现下拉菜单。 下拉菜单实例 .dropdown { position: relative; display: inline-block; } ...
  • helloMr_wo
  • helloMr_wo
  • 2016年10月11日 13:18
  • 610

10个设计最经典的web2.0网站

10个设计最经典的web2.0网站
  • cyp403
  • cyp403
  • 2006年08月14日 14:22
  • 1532

Web前端开发实战1:二级下拉式菜单之CSS实现

二级下拉式菜单在各大学校网站,电商类网站,新闻类网站等大型?网站很常见,那么它的实现原理是什么呢? 学习了Web前端开发的知识后,我们是可以实现这样的功能的。复杂的都是从基础效果上添加做出来的,原理和...
  • erlian1992
  • erlian1992
  • 2015年12月30日 20:47
  • 12279

css创建鼠标悬停下拉菜单样式

下拉菜单在网站中到处可见。 下面用css设置下拉菜单样式。 淘宝 我的淘宝 已买到的宝贝 我的足...
  • Ms_WY
  • Ms_WY
  • 2016年12月20日 14:52
  • 99

Java Web开发实战经典(基础篇)

Applet Applet是采用Java编程语言编写的小应用程序,该程序可以包含在 HTML(标准通用标记语言的一个应用)页中,与在页中包含图像的方式大致相同标题 MVC全名是Model ...
  • u010504185
  • u010504185
  • 2017年02月08日 15:02
  • 1365

经典下拉菜单

预览效果:http://www.kekecn.com/webtx/downmenu/ 下载文件:http://www.kekecn.com/blog/attachments/month_0501/41...
  • AppleBBS
  • AppleBBS
  • 2005年02月03日 16:57
  • 2652

CSS 多级纵向下拉菜单

下面代码直接COPY 就可以用了 //skin/style3.css/////////////////////////////@charset "utf-8";html,body,h1,h2,h3,h...
  • zanmaolin
  • zanmaolin
  • 2009年06月30日 19:28
  • 1706
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[Web]经典下拉菜单
举报原因:
原因补充:

(最多只允许输入30个字)