目录式导航菜单

网页菜单悬停显示效果
最新推荐文章于 2023-12-05 16:58:48 发布
最新推荐文章于 2023-12-05 16:58:48 发布
阅读量513 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 脚本页面导航 文章标签： menu border javascript 游戏 脚本 div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hailang123_love/article/details/5778158
本文介绍了一种使用JavaScript和HTML实现的网页菜单效果。当鼠标悬停在特定区域时，隐藏的菜单会显示出来；当鼠标移开时，菜单再次隐藏。此效果通过两个独立的菜单实例展示。

脚本说明:
第一步:把如下代码加入<head>区域中
<SCRIPT language=javascript><!--
function out()
{
if(window.event.toElement.id!="menu"        &&       window.event.toElement.id!="link")
  menu.style.visibility="hidden";
}
//-->

function out1()
{
if(window.event.toElement.id!="menu1"        &&       window.event.toElement.id!="link")
  menu1.style.visibility="hidden";
}
//-->
</SCRIPT>

第二步:把如下代码加入<body>区域中
<div id="back" onmouseout="out()"style="position:absolute;top:180;left:310;width:160;height:40;z-index:1;visibility:visible;">
<span id="menubar"  onmouseover="menu.style.visibility='visible'">
<font  color=red size=2>菜单</span>
<div border=1  id="menu" style="position:absolute;top:15;left:0;width:50;height:10;z-index:2;visibility:hidden;">
<a id="link" href="rjxz.htm">软件下载</a>
<a id="link" href="yxxz.htm">游戏下载</a>
<a id="link" href="hjsj.htm">黄金书籍</a>
<a id="link" href="mntk.htm">美女图库</a>
<a id="link" href="mp3.htm">MP3金曲</a>
<a id="link" href="flash.htm">FLASH</a>
</div>
</div>
<div id="back" onmouseout="out1()"style="position:absolute;top:180;left:370;width:160;height:40;z-index:3;visibility:visible;">
<span id="menubar"  onmouseover="menu1.style.visibility='visible'">
<font  color=red size=2>菜单</span>
<div border=1  id="menu1" style="position:absolute;top:15;left:0;width:50;height:10;z-index:4;visibility:hidden;">
<a id="link" href="rjxz.htm">软件下载</a>
<a id="link" href="yxxz.htm">游戏下载</a>
<a id="link" href="hjsj.htm">黄金书籍</a>
<a id="link" href="mntk.htm">美女图库</a>
<a id="link" href="mp3.htm">MP3金曲</a>
<a id="link" href="flash.htm">FLASH</a>
</div>
</div>

抽屉式（菜单）导航实例模板，设计师喜欢哪款？
awayaya1的博客
08-09 1260
抽屉式导航 抽屉式导航也叫汉堡式菜单，一般出现在APP页面的左右两侧。用户停留在可以唤出导航的页面时，用手指向左右侧滑动或点击左右上角的图标显示导航页面。 菜单 - 导航UI移动版模板 菜单 - 导航UI移动版模板 抽屉式导航的动画效果也有比较简单的，如点击小红书APP首页左上角的用户头像后，页面会从左向右浮出抽屉式导航，背景也会出现一层黑色透明的遮罩效果 菜单 - 导航UI移动版模板 抽屉式导航页面常见的表现形式有两种：一种是主页面缩小并浮动在抽屉式导航页面上，另一种是导航页面隐藏
树型目录菜单
rmzhang33的专栏
09-15 858
树型目录菜单 源作者：追风                   人气：31484 这段程序放在与之间NS4 = (document.layers) ? 1 : 0;IE4 = (document.all) ? 1 : 0;ver4 = (NS4 || IE4) ? 1 : 0;if (ver4) {  
若依vue-新建目录及菜单
最新发布
Anorry的博客
12-05 9334
前面我们把标题和logo换成了自己系统的标题和logo了接下来就是要建立自己需要的菜单和页面。
php静态树形目录的实现,基于递归实现的php树形菜单代码
weixin_31232021的博客
03-18 158
本文实例讲述了基于递归实现的php树形菜单代码。分享给大家供大家参考。具体实现方法如下：开发电子商务网站的时候，做了这个显示树形菜单的功能，用的递归实现的PHP树形菜单函数。具体代码如下：publicfunctionprocCategory($sid,$pid){$return=array();$key=0;static$arr=array();//分类级别参考数组$sql=...
css实现的目录树型导航菜单
iteye_10902的博客
03-20 838
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta h
处理菜单列表，生成符合前端的菜单结构
liao15083589721的博客
03-01 507
1、功能 在spring boot开发前后端分离项目时，前端要求菜单的结构如下 2、处理代码 import com.alibaba.fastjson.JSONObject; import java.util.Iterator; import java.util.LinkedList; import java.util.List; /** * 菜单树 * 只要调用 menuRoot 方法...
jQuery响应式导航菜单.zip
07-04
"jQuery响应式导航菜单"是一个专为实现这一目的而设计的解决方案。这个项目使用了两个核心JavaScript库：jQuery 1.8.3和pgwmenu.min.js，它们共同创建了一种动态、适应性强的菜单系统，尤其适用于现代网页设计，特别...
图标导航_html响应式导航菜单
06-04
"图标导航_html响应式导航菜单"是一个专为提升用户体验设计的网页元素，它结合了图标与文字，使得导航更加直观易用，并且具有响应式特性，能够适应不同设备的屏幕尺寸，无论是大屏的桌面电脑还是小屏的移动设备，都...
jQuery文章目录索引导航菜单代码
06-24
在网页设计中，目录索引导航菜单是一种非常实用的功能，特别是在长篇文章或教程中，它可以帮助用户快速定位和跳转到他们感兴趣的特定部分。"jQuery文章目录索引导航菜单代码"是一个实现这种功能的JavaScript库，它...
jQuery文章目录索引导航菜单代码.zip
07-04
"jQuery文章目录索引导航菜单代码"就是这样一个实用工具，通过jQuery库实现，能为文章创建一个动态的、响应式的目录导航，使用户可以轻松地跳转到文章的各个部分。本文将深入探讨这一代码的工作原理、实现方式以及其...
jQuery Sass响应式导航菜单代码
06-05
本文将深入探讨“jQuery Sass响应式导航菜单代码”的相关知识点，包括jQuery、Sass、响应式设计以及如何构建这样的菜单。 首先，jQuery是一个广泛使用的JavaScript库，它简化了JavaScript的DOM操作、事件处理、动画...
流式导航菜单
hexu_blog的博客
07-26 428
                  $(function(){    $("#menuBar li").click(function(){     var url=$(this).find("a").attr("href");     document.location.href=url;    })        $("#menuBar li").hover
6个Web前端值得收藏很实用的菜单模板（上）
dsgru的博客
08-05 1310
1.  CSS3实现黑色带图标导航   源码下载/  在线演示     2.  jquery商城红色分类导航   源码下载/  在线演示 3.商城左侧分类jquery菜单 jquery实现的，会在当鼠标光标移动到接近（或通过）视口（viewport）的顶部的时候触发。   源码下载 /   在线演示  ...
漂亮的CSS响应式导航菜单
ICode联盟
05-04 595
下载地址 漂亮的CSS响应式导航菜单，带二级下拉导航菜单和logo区域。通用的网站顶部导航样式，配合FontAwesome字体图标看起来不错。 dd:
简单的响应式导航菜单实现方法
ICode联盟
03-24 201
下载地址 很简单的响应式导航菜单实现方法，使用jQuery实现，可以缩放浏览器改变导航菜单的样式。 dd:
JavaScript 版文章自动创建目录导航菜单控件源代码，用来生成文章导航，可生成独立的侧边栏导航菜单
Python代码大全
12-14 936
可选，用来指定是否在文章标题位置生成锚点链接图标：true - 生成锚点链接图标，并给标题添加 ID 属性，false - 不生成锚点链接图标，仅给标题添加 ID 属性。可选，用来指定文章导读导航菜单的显示位置：outside - 生成侧边栏菜单，inside - 直接在文章正文区域的开始位置生成导航菜单。可选，用来指定是否文章导读导航菜单是否显示文章段落层次的索引编号：true - 显示编号，false - 不显示编号。可选，用来指定 article 节点下，要生成导航的标题标签的选择器。
用css制作网页目录,利用CSS制作树状目录（菜单）
weixin_33182798的博客
08-04 2112
通过对CSS边框属性(bottom-border)的样式定义来制作树状目录。1. HTML 代码设计 20灵感 32免费素材 242. CSS 代码.menu {width: 500px;list-style: none;margin: 0 0 2em;padding: 0;font: 150%/100% Arial, Helvetica, sans-serif;}.menu li {clear:...
菜单栏以及CMenu类
gateway6143的专栏
06-24 1500
鸡啄米在上一节中讲的是VS2010的菜单资源，本节主要讲菜单及CMenu类的使用。        CMenu类的主要成员函数        MFC为菜单的操作提供了CMenu类，下面鸡啄米就常用的几个成员函数进行简单的介绍。        BOOL LoadMenu(UINT nIDResource);        加载菜单资源，并将其附加到CMenu对象上。参数nIDR
RuoYi-Vue菜单添加多级目录
江黎
11-04 5049
配置多级目录需要先在代码放开组件路径标签（操作完后记得还原） 将红框代码先删除，我们需要给目录配置组件路径。form.menuType == 'C'是判断菜单。 路由地址first为例 确定后刷新可以看见新增的目录 在一级目录下再添加一个目录 在二级目录下添加菜单 手动在二级目录的根文件下添加一个<router-view> 刷新页面，效果完成 再添加一个 参考系统管理中的日志管理 参考资料 ...
实现折叠式导航菜单的设计与开发教程
压缩包子文件中的images目录表明，折叠式导航菜单还可能包含图像文件，这些图像文件被用作菜单项的图标或者分隔符。例如，使用箭头图标来表示折叠和展开状态，或者使用线条来分隔不同的菜单项。在CSS中，通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值