[Web]最简单的方法实现工具条菜单上的弹出式菜单

最新推荐文章于 2022-12-12 09:20:07 发布
原创 最新推荐文章于 2022-12-12 09:20:07 发布 · 1.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#工具 #web #div #menu #class #function

本文介绍了一种使用HTML和JavaScript实现工具栏弹出菜单的方法。通过window.createPopup().show()展示菜单，并详细展示了如何设置菜单项的样式及交互逻辑。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >




显示效果如下：



实现代码如下：PopupMenu.htm

<!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">
a:link
{
    color: #000;
    text-decoration: none;
    font-weight: normal;
    padding: 0px 0px 2px 0px;
    font-size: 12px;
    display: block;
}
a:visited
{
    color: #000;
    text-decoration: none;
    font-weight: normal;
    padding: 2px 0px 0px 0px;
    font-size: 12px;
    display: block;
}
a:hover
{
        color: #000;
        text-decoration: none;
        padding: 0px 0px 2px 0px;
        font-size: 12px;
        display: block;
}
a:active
{
    color: #000;
    text-decoration: none;
    padding: 2px 0px 0px 0px;
    font-size: 12px;
    display: block;
    display: block;
}

.MenuItem
{
    display:block;
    width:60px;
    height:20px;
    font-size: 12px;
    float:left;
    text-align:center;
    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,24,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">
            <a href="#" onfocus="Pop_menu(filMenuList,120,125,MenuItem1)" accesskey="F">文件(<u>F</u>)</a></div>
        <div id="MenuItem2" class="MenuItem">
            <a href="#" onfocus="Pop_menu(filMenuList,120,125,MenuItem2)" accesskey="E">编辑(<u>E</u>)</a></div>
        <div id="MenuItem3" class="MenuItem">
            <a href="#" onfocus="Pop_menu(filMenuList,120,125,MenuItem3)" accesskey="V">视图(<u>V</u>)</a></div>
        <div id="MenuItem4" class="MenuItem">
            <a href="#" onfocus="Pop_menu(filMenuList,120,125,MenuItem4)" accesskey="S">网站(<u>S</u>)</a></div>
        <div style="clear: both;">
        </div>
    </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.youkuaiyun.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://blog.youkuaiyun.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://blog.youkuaiyun.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://blog.youkuaiyun.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://blog.youkuaiyun.com/qghboy'" style="cursor: hand; height:20px;font-size:12px; padding:5px;">我的优快云博客</span>
            </div>
            
        </div>
    </div>
</body>
</html>



提示：最为重要的就是

<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,24,width,height,toolbarMenuItem); 
  
  // 0 和 23 是相对于toolbarMenuItem元素左上角的坐标点(x,y)
  // width 显示菜单的宽度
  // height 显示菜单的高度
  // toolbarMenuItem 要弹出菜单的对象
 }

    </script>
++++++++++++++++++++++++++++++++++

还有就是：通过 window.createPopup().show () 弹出来的菜单实际上脱离了父页面,所以父页面上的样式表对 弹出来的菜单界面是不起作用的。

Web弹出下拉菜单
04-25
是模仿淘宝右上角的那种的下拉菜单，挺好用的，有详细说明，都能看懂，欢迎大家下载！
符合web标准的弹出菜单集(div+css+js)
xiaoyi20的专栏
06-08 1081
水平方向的PopMenu-弹出菜单（DIV+CSS+JS）此POPMENU根据alistapart的articles改编，比DW中用显示、隐藏层的方法要简单。在IE6.0 IE5.X Firefox NS都能正确显示，只用到很少的JS代码，使用时只要把部分插入需要的地方即可，不会因分辨率不同而发生错位的现象。菜单演示>>CSS代码 li
弹出式菜单
05-31
完整的弹出式菜单 包含css和js样式 运行页面会弹出一个圆形菜单 鼠标拖动可调节位置 鼠标悬浮可唤出子菜单 点击子菜单可跳转至相对应页面 特效比较炫酷 欢迎下载
js弹出式菜单--经典Menu
02-12
一个关于Menu的javascript类库:1.实现静态菜单(页面载入时生成菜单内容);2.可以使用Ajax动态加载菜单内容;
CSS弹出式菜单范例
yavobo的专栏
02-22 1358
网页文件(PHP文件)：公路工程管理系统
jQuery会弹钢琴的菜单导航
11-20
在这个设计中，菜单导航条不仅作为传统的导航工具，还扮演着“钢琴键盘”的角色，用户在浏览时可以触发音符，仿佛真的在弹奏钢琴。 首先，我们来了解一下jQuery的核心特性。jQuery提供了丰富的选择器，用于选取DOM...
兼容性突破！css菜单生成器使用教程
它可能是一个简单或复杂的菜单生成工具，能够通过参数配置生成适应不同设备和分辨率的响应式菜单。 综上所述，一个CSS菜单生成器工具，通过集成到ASP.NET项目中，可以利用其生成各种样式的菜单，并与Flash等技术...
对话框扩展功能实现：菜单、工具栏与状态栏集成技术精讲
文章首先介绍对话框扩展功能的概念与重要性，然后详细讨论了菜单栏和工具栏的设计、创建和管理方法，以及如何通过用户体验设计和动态更新技术来增强应用的交互性。进一步，本文探讨了状态栏的功能布局、动态更新以及...
自定义区域的jQuery右键菜单实现
资源摘要信息:"超实用jQuery右键菜单 可自定义菜单弹出区域" 知识点： 1. jQuery基础：jQuery是一个快速、小巧、功能丰富的JavaScript库。它通过简化HTML文档遍历、事件处理、动画和Ajax交互，使得Web开发变得更加...
构建Web项目简单样式指南的样板工具
- 功能模块：如模态窗口、弹出层、滑动菜单等。 - JavaScript：交互逻辑和行为。 6. 如何使用web-style-manual-boilerplate创建样式指南 使用web-style-manual-boilerplate时，开发者首先需要获取该项目的源代码。...
向上弹出式菜单（css+js）
05-09
一个简单的向上弹出式菜单！ 当鼠标移到上面后显示菜单， 当鼠标移开后不显示菜单！ 达到一个隐藏的效果！
Web自动化——下拉选择框&弹出框&滚动条操作
WildGrass、的博客
12-21 1872
1 下拉选择框（元素）操作 step1: 导入Select类： from selenium.webdriver.support.select import Select step2: 实例化Select类：select = Select(element) step3: 调用方法： 根据索引定位（从0开始）：select_by_index(index) 根据属性值定位：select_by_value(value) 根据显示的文本定位：select_by_visible_text(text) 2
Web页面中在窗口顶部出现白色横条
cithegod的博客
12-17 7717
在刚开始编辑窗口的时候，使用body { height:100% } div { height:100% } 希望可以保证div中的背景图片填满整个窗口，在未设置HTML5严格模式的时候，图片可以占满整个窗口，但是后来再加上 标签的时候，发现页面上出现了这样的白条，也就是背景并未占满窗口。 就像左边和上边这样的空白，后来通过firebug查看元素后发现，这个空白是
陈表达学html-弹出显示下拉菜单-窗口案例
陈表达的博客
12-12 1007
【代码】陈表达学html-弹出显示下拉菜单-窗口案例。
纯html+css实现点击弹出式导航栏菜单（采用：target和display：none）
热门推荐
lurenxie的博客
05-08 2万+
纯html+css实现点击弹出式导航栏菜单（采用：target和display：none）搜索了很久，发现都没有纯html+css的点击式导航栏，要么是采用：hover的划过式导航栏，要么使用Javascript实现的点击式导航栏，遂着手研究了一下。这个导航栏是点击出二级导航，鼠标移走不缩回，直到点击别的一级导航栏，而且无法创建三级或以后级导航栏，而且点击别处也不缩回。暂且到此为止，有空再进一步强...
3.写一个简单的弹出菜单
banchixiang9107的博客
07-18 145
效果图 首先来看一下html结构，很简单 <div class="pop-con"> hover <ul class="pop"> <li><a href="#">公告</a></li> <li><a href="#">投诉&...
html 菜单图标弹出框,Flutter | 超实用简单菜单弹出框 PopupMenuButton
weixin_39656686的博客
06-04 424
相信在实际开发过程中，确定少不了这样的功能：html 点击 AppBar 右上角的按钮，弹出一个菜单供用户选择。git幸运的是，Flutter 提供给咱们了一个 Widget，直接就能实现如上的效果。githubPopupMenuButton仍是老规矩，先看官方的说明：apiDisplays a menu when pressed and calls onSelected when the men...
弹出式导航html,基于JS代码实现导航条弹出式悬浮菜单
weixin_35871519的博客
06-08 1603
1.概述采用弹出式悬浮菜单，不但可以使网站的导航内容更加清晰，而且不影响页面的整体效果。运行本实例，如图1所示，当鼠标移动到一级导航菜单的标题上时，将弹出悬浮菜单显示该菜单对应的子菜单，鼠标移出时，将隐藏悬浮菜单。2.技术要点本实例主要是在JavaScript中，动态改变标签对象的style属性的display属性值来实现动态显示和隐藏二级导航菜单。其实，每一个一级菜单下的二级菜单内容是已经添加在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值