JS 实现折叠式菜单

最新推荐文章于 2022-03-16 13:43:45 发布
最新推荐文章于 2022-03-16 13:43:45 发布
阅读量1.9k 收藏 1
点赞数
文章标签： menu class div 百度 function 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JAVAZHICHIZHE/article/details/6468002
版权

     最近在做一个网站系统， 参考网站上面有一个折叠式的菜单， 觉得好玩查看了一下它的源代码学习了一个。

    以下是我的源代码： 

     <html>

<head>

<title>折叠式菜单</title>
   <style type="text/css">
      <!--
      /*设置菜单样式*/
      .menuHead{font-weight: bold; font-size : larger ; background-color : #9999ff ;}
      .menuChoices{background-color:#cc99ff; width : 180px ;}
      .menu a{color:#000000; text-decoration : none ;}
      .munu a:hover{text-decoration:underline;}
      /*菜单定位*/
      #menu1 {position:absolute; top : 80px ; left : 10px ; width : 200px ;}
      #menu2 {position:absolute; top : 80px ; left : 230px ; width : 200px ;}
      #menu3 {position:absolute; top : 80px ; left : 450px ; width : 180px ;}
      -->
   </style>
   <script type="text/javascript">
      <!--
      (document.getElementById ? DOMCapable=true :DOMCapable=false);
      function hide(menuName){
         if(DOMCapable){  //仅对DOM浏览器隐藏菜单
         var theMenu = document.getElementById(menuName+"choices");
         theMenu.style.visibility='hidden';
         }
      }
      function show(menuName){
         if(DOMCapable){
            var theMenu = document.getElementById(menuName+"choices");
            theMenu.style.visibility='visible';
         }
      }
      //-->
   </script>
</head>

<body>
   <center><h1>折叠式下拉菜单</h1></center>
   <!-- 使用onmouseover和mouseout来控制菜单显示和隐藏-->
   <div id="menu1" class="menu" οnmοuseοver="show('menu1');" οnmοuseοut="hide('menu1');">
      <!--显示菜单-->
      <div class="menuHead" >搜索引擎站点</div>
      <div id="menu1choices" class="menuChoices">
      <a href="http://www.sina.com">新浪<br>
      <a href="http://www.sina.com">新浪<br>
      <a href="http://www.sina.com">新浪<br>
      <a href="http://www.sina.com">新浪<br>
      <a href="http://www.sina.com">新浪<br>
      </div>
   </div>
   <!--使用onmouseover和mouseout来控制菜单显示和隐藏-->
   <div id="menu2" class="menu" οnmοuseοver="show('menu2');" οnmοuseοut="hide('menu2');">
    <div class="menuHead" >电子商务站点</div>
      <div id="menu2choices" class="menuChoices">
      <a href="http://www.baidu.com">百度<br>
      <a href="http://www.sina.com">百度<br>
      <a href="http://www.sina.com">百度<br>
      <a href="http://www.sina.com">百度<br>
      <a href="http://www.sina.com">百度<br>
      </div>
   </div>
  
   <!--使用onmouseover和mouseout来控制菜单显示和隐藏-->
   <div id="menu3" class="menu" οnmοuseοver="show('menu3');" οnmοuseοut="hide('menu3');">
    <div class="menuHead" >教务站点</div>
      <div id="menu3choices" class="menuChoices">
      <a href="http://www.baidu.com">雅虎<br>
      <a href="http://www.sina.com">雅虎<br>
      <a href="http://www.sina.com">雅虎<br>
      <a href="http://www.sina.com">雅虎<br>
      <a href="http://www.sina.com">雅虎<br>
      </div>
   </div>
  
   <script type="text/javascript">
      <!--
      if(DOMCapable){   //不对JS以及旧版本浏览器隐藏菜单
         hide("menu1");
         hide("menu2");
         hide("menu3");
      }
      //-->
   </script>
</body>

</html>
 

JAVAZHICHIZHE
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript实现折叠式菜单
07-13
实现JavaScript折叠式菜单的基本步骤如下： 1. **HTML结构**：首先，我们需要创建一个HTML结构，包含各级菜单项。使用`<ul>`和`<li>`元素来表示菜单列表，同时添加额外的类或属性，如`data-toggle`，以便JavaScript...
纯html5折叠式导航菜单
06-05
折叠式菜单的核心在于JavaScript或CSS的交互效果，但在HTML5中，我们可以通过数据属性（data-*）来添加自定义信息，这些信息可以被JavaScript轻松读取和操作。例如，我们可以为每个折叠菜单项添加"data-expanded...
java 实现折叠菜单栏,多级菜单栏的折叠收起
weixin_35068077的博客
03-10 662
Document* { margin: 0; padding: 0; }.tree {margin: 0;padding: 0;background-color:#f2f2f2;overflow: hidden;}/*隐藏input*/.tree li input{position: absolute;left: 0;opacity: 0;z-index: 2;cursor: pointer;he...
C# winform以最精简的方式实现折叠式菜单
huang233229920的博客
03-04 7960
今天在网上查了下折叠式菜单，资源倒是不少，但是实现过程极为繁琐，看到都怕怕，ctrl+c的勇气都没有，于是自己尝试着弄一下，没想到还真的给整出来了，最终效果还蛮不错的。 需要借助panel控件，先搭出一个框架来才能进行后续操作，就以button+panel举个例子： 1.在开始UI设计时，先按一个button上来，修改button控件Dock属性为"Top"(最上面那个框) 2.再按上来一个panel，注意此后点上来的控件都不能与其他控件发生重叠，拖到窗体空档处，修改panel控件Dock属性为"Top"
JS实现折叠式导航菜单.pdf
09-27
JS实现折叠式导航菜单.pdf
CSS 折叠的菜单实现代码
09-25
总的来说，这个CSS折叠菜单的实现是一个简洁而有效的解决方案，适用于那些希望在不依赖JavaScript的情况下创建交互式菜单的设计者。通过调整颜色、字体和布局，可以轻松地将其融入任何网站设计中，以提供优雅的导航...
JavaScript制作的可折叠弹出式菜单示例
10-26
弹出式菜单想必大家在浏览网页时都有见过吧，本文要为大家介绍的是可折叠的弹出式菜单，你若感兴趣可以参考下
jquery折叠式菜单实现
07-31
该资源主要实现两点 1. jquery实现菜单折叠 2.css自动增长圆角背景的实现 个人能力有限，代码有诸多不足之处，仅作参考使用。
折叠菜单(点击展开层)
07-13
折叠菜单(js实现点击展开层适用于文字）
Jsp三级折叠菜单
11-24
Jsp三级折叠菜单
JS实现网页动态折叠菜单
李阳阳的博客
09-12 1万+
最近做了一个多级菜单列表动态展示的功能，其中用到了vue.js渐进式框架、aui.css等，在此记录一下，也便于自己日后总结。 说明：vue.js不是必须要用的，因为我们项目中页面用的都是vue，因此我才用的vue方式进行数据绑定，也可以用其他方式实现。
折叠式的菜单
sinat_36841379的博客
02-27 1368
关于折叠式的菜单，网上有挺多的源代码，但是我搜了一下，关于jQuery方面还有css方面上有些看不懂，所以干脆用其他我觉得较为简单的方式来创建折叠式的菜单，知识比较少，所以看不大懂。下面是我改动过的代码。 折叠式的导航 $(document).ready(function(){ $('.link').click(function(){ $(this).next().
WEB HTML 二级菜单 折叠展开菜单
小西瓜吖的博客
03-16 1万+
WEB，HTML，二级菜单，折叠展开 一、效果图： 二、完整代码： 直接复制 浏览器打开即可。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>菜单</title> <!-- JS --> <script language="javascript"&g
折叠菜单功能的实现
weixin_44694201的博客
12-03 1423
折叠菜单功能的实现 在日常生活中，我们经常会遇到折叠菜单，今天一起来看看它的实现原理吧！ 实现效果 实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>折叠菜单<
html简单的折叠菜单
zhuxian2009的专栏
08-01 1万+
大道至简。html+css+一个简单的JavaScript函数，实现的折叠菜单。 功能： 1.鼠标放置在菜单选项，具有变化； 2.实现一级菜单，二级菜单； 3.一级菜单收起来时，前面是“+”，展开时，前面是“-”； 效果图： 直接贴贴贴代码： zhedie_menu.html <html> <head> <meta http-equiv="C...
使用jQuery创建折叠式菜单（手风琴效果）
热门推荐
hanhf的专栏
07-18 1万+
使用jQuery创建折叠式菜单（手风琴效果） 　　今天给大家介绍如何使用jQuery创建折叠式菜单，即通常所说的手风琴效果（accordion [əˈkɔ:rdiən]）。 　　实现效果如下： 一、HTML代码结构 　　要实现折叠式菜单，代码相当简单，如下所示： &lt;ul class="accordion"&gt; &lt;li class="selec...
js折叠式菜单下拉列表
最新发布
05-17
你可以使用 HTML、CSS 和 JavaScript 来创建折叠式菜单下拉列表。下面是一个基本的示例： HTML 代码： ``` <div class="menu"> <button class="menu-btn">菜单</button> <ul class="menu-list"> <li><a href="#">链接1</a></li> <li><a href="#">链接2</a></li> <li><a href="#">链接3</a></li> </ul> </div> ``` CSS 代码： ``` .menu-btn { display: block; background-color: #ccc; border: none; padding: 10px; cursor: pointer; } .menu-list { display: none; list-style: none; padding: 0; margin: 0; } .menu-list li { margin-bottom: 5px; } .menu-list li a { display: block; padding: 5px; background-color: #f0f0f0; text-decoration: none; color: #333; } ``` JavaScript 代码： ``` var menuBtn = document.querySelector('.menu-btn'); var menuList = document.querySelector('.menu-list'); menuBtn.addEventListener('click', function() { if (menuList.style.display === 'none') { menuList.style.display = 'block'; } else { menuList.style.display = 'none'; } }); ``` 在这个示例中，通过使用 CSS 的 `display` 属性来控制下拉菜单的显示和隐藏。在 JavaScript 中，我们添加了一个事件监听器来处理按钮的点击事件，并根据下拉菜单的当前状态来切换菜单的显示和隐藏。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值