导航菜单动态显示下拉列表菜单

最新推荐文章于 2022-12-08 10:44:38 发布
最新推荐文章于 2022-12-08 10:44:38 发布
阅读量820 收藏
点赞数
分类专栏： css html 动态显示下拉列表 文章标签： css 菜单 html 动态显示下拉菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feiyue2008fei/article/details/12098149
版权

<!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" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS下拉菜单演示</title>
<style type="text/css">
<!--
*{margin:0;padding:0;border:0;}
body {
font-family: arial, 宋体, serif;
font-size:12px;
width:500px;
margin:auto;
}
#nav {
line-height: 24px; list-style-type: none; background:#666;
}
#nav a {
display: block; width: 80px; text-align:center;
}
#nav a:link {
color:#666; text-decoration:none;
}
#nav a:visited {
color:#666;text-decoration:none;
}
#nav a:hover {
color:#FFF;text-decoration:none;font-weight:bold;
}
#nav li {
float: left; width: 80px; background:#CCC;
}
#nav li a:hover{
background:#999;
}
#nav li ul {
line-height: 27px; list-style-type: none;text-align:left;
left: -999em; width: 180px; position: absolute;
}
#nav li ul li{
float: left; width: 180px;
background: #F6F6F6;
}
#nav li ul a{ wedisplay: block; width: 156px;text-align:left;padding-left:24px;
}
#nav li ul a:link {
color:#666; text-decoration:none;
}
#nav li ul a:visited {
color:#666;text-decoration:none;
}
#nav li ul a:hover {
color:#F3F3F3;text-decoration:none;font-weight:normal;
background:#C00;
}
#nav li:hover ul {
left: auto;
}
#nav li.sfhover ul {
left: auto;
}
#content {
clear: left;
}
-->
</style>
<script type="text/javascript">
<!--    //--><![CDATA[//><!--
    function menuFix() {
        var sfEls = document.getElementById("nav").getElementsByTagName("li");
        for (var i = 0; i < sfEls.length; i++) {
            sfEls[i].onmouseover = function () {
                this.className += (this.className.length > 0 ? " " : "") + "sfhover";
            }
            sfEls[i].onMouseDown = function () {
                this.className += (this.className.length > 0 ? " " : "") + "sfhover";
            }
            sfEls[i].onMouseUp = function () {
                this.className += (this.className.length > 0 ? " " : "") + "sfhover";
            }
            sfEls[i].onmouseout = function () {
                this.className = this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
            }
        }
    }
    window.onload = menuFix;
    //--><!]]>
</script>
</head>
<body>
<div class="mynav">
<ul id="nav">
<li><a href="#">产品介绍</a>
<ul>
<li><a href="#">详细产品</a></li>
<li><a href="#">产品图片</a></li>
<li><a href="#">产品流程</a></li>
</ul>
</li>
<li><a href="#">服务介绍</a>
<ul>
<li><a href="#">产品服务</a></li>
<li><a href="#">质量保证</a></li>
<li><a href="#">全国联保</a></li>
</ul>
</li>
<li><a href="#">成功案例</a>
<ul>
<li><a href="#">成功案例1</a></li>
<li><a href="#">成功案例2</a></li>
<li><a href="#">成功案例3</a></li>
</ul>
</li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四111</a></li>
</ul>
</li>
<li><a href="#">联系我们</a>
<ul>
<li><a href="#">售后服务</a></li>
<li><a href="#">售前咨询</a></li>
<li><a href="#">在线交流</a></li>
</ul>
</li>
</ul>
</div>

</body>
</html>

飞粤黄河
关注
专栏目录
解决jira4.0.1和confluence3.1集成后下拉菜单不可用的问题
付增斌的专栏
01-27 1966
这段时间在研究jira和confluence集成的问题，发现最新版本的两个软件集成到一块后，confluence软件的下拉菜单不可用，并且会报js错误，后台在报如下错误：2009-12-04 11:29:34,696 FelixStartLevel ERROR     [extender.internal.activator.ContextLoaderListener] Unable to p
菜单的动态显示
weixin_33963594的博客
03-07 163
设计表结构 　　　　models中创建类：五个类，七张表　　　　角色表：　　　　用户表：　　　　权限表： 　　　　权限组表： 　　　　菜单表： 　　　　角色表和权限表是多对多的关系（一个角色可以有多个权限，一个权限可以对应多个角色）　　　　用户表和角色表是多对多的关系（一个用户可以有多个角色，一个角色有多个用户） 　　　　所以有会多生成两张关系表 　　　　一个菜单下面有多个组 　　...
动态配置菜单列表
wangjilin1的博客
09-13 435
2020-9-13总结 动态显示菜单列表 // 菜单列表 const menuList = [ { title: "首页", key: "/main", }, { title: "商品", key: "/products", children: [ { title: "品类管理", key: "/category", }, { title: "商品管理",
【div+css+js实现一个下拉导航栏的功能】
谢先生的日记
03-28 984
首先设计页面的基本布局 设计div里面的样式 设计js脚本 1.设计基本的div页面样式 <%-- nav start --%> <section class="wrapper"> <div class="header">用户信息</div> <div class="nav"> <ul> <li ...
导航栏,菜单栏下拉简单实现
热门推荐
Jachin的博客
09-21 2万+
导航栏,菜单栏下拉简单实现兼容ie
实现导航菜单的动态下拉列表
09-27
在网页设计中，动态下拉列表的实现是一个关键部分，特别是在构建导航菜单时。这种功能增强了用户体验，使得用户能够更方便地浏览网站的多层次结构。本文将深入探讨如何使用CSS来实现导航菜单的动态下拉列表。 首先...
jQuery三级下拉列表导航菜单代码分享
11-24
总的来说，通过这个实例，我们了解了如何利用jQuery的事件处理和DOM操作功能，结合CSS样式和HTML结构，创建一个动态的、响应式的三级下拉列表导航菜单。这不仅增强了用户体验，也使得网站的层级结构更加直观易用。
jQuery多级下拉菜单支持多级下拉列表菜单.zip
07-11
这个名为"jQuery多级下拉菜单支持多级下拉列表菜单"的资源，就是专门为商城网站或企业网站设计的一种实现方式。 jQuery多级下拉菜单的核心在于利用CSS样式定义菜单结构，然后通过jQuery的事件监听和DOM操作来控制...
js蓝色通用滑动导航菜单显示下拉菜单效果
11-19
"js蓝色通用滑动导航菜单显示下拉菜单效果"是一个专为网页开发设计的JavaScript功能，旨在提供美观且用户友好的导航体验。这个功能通常会用在各种类型的网站上，因为它的通用性和蓝色主题使其能够适应不同的网页设计...
超出页面宽度部分的菜单栏转为下拉列表.zip
05-12
然后，针对小屏幕设备应用媒体查询，隐藏主菜单中超出的部分，并显示下拉列表。 ```css .menu { display: flex; flex-wrap: nowrap; /* 不换行 */ } .menu li { flex: 1; /* 等分空间 */ } .submenu { ...
Confluence 宏选项（parameters）
OSSEZTEC 专栏
02-03 167
宏参数的定义为，你可以使用这些参数在宏输出的内容和格式上进行定义。   Confluence 使用的存储格式或者 wikimarkup 格式中使用的参数和在宏浏览器中使用的标签是不同的，这些将会在下面在括号内容中列出(example)。   参数名称 默认值 参数说明 锚点名称（Anchor Name） ...
得到下拉列选的select的值
quxiuer
04-26 1183
全12333 全12321 全123123 通过得到optt的名字 得到 select的值2如果是用JSTL标签来实现，遇到下拉菜单时，需要动态的保持住下拉菜单的值，可以通过以下语句来实现： selected>按照通话次数排序 这里的option是写死的，可以通过标签来循环输出。 其中reportForm需要在action类里设置到request.SetAttribute()
Confluence使用教程-不古出品
不古的博客
08-14 7899
Confluence支持在一个地方创建、协作和组织所有工作。Confluence是一个团队工作区，知识和协作在此交汇。动态页面为您的团队提供了创建、捕获和协作任何项。
企业知识分享+团队协作神器之Confluence
最新发布
Java搜索工程技术栈
12-08 2998
一、Confluence简介二、知识库软件对比三、快速安装confluence 7.4.6版本四、confluence基本操作简介4.1、创建空间（Space）4.2、配置空间权限4.3、新建页面或“文档”4.4、移动文档4.5、空间管理4.6、插入Markdown文档+目录4.7、邀请团队成员开通账号confluence是一个专业的企业知识管理与协同软件，可以用于构建企业wiki。通过它可以实现团队成员之间的协作和知识共享。关键词：信息共享、协同编辑以下几个基本概念需要了解一下： 空间（Space） 空间
Android 动态可设置下拉状态栏和虚拟导航栏
wang 恒 的博客
01-21 2658
通常情况下，android系统都会自带状态栏下拉控制和虚拟导航栏，这样可以方便使用操作，但在某些特殊使用情况下，我们需要去掉或者禁止这两个功能模块，例如基于android系统的工控机，广告机等，废话不多说，进入主题... 本文基于qcom msm8909 android5.1,msm8953 android7.1两个平台。 修改的地方位于frameworks 基本知识点： 大家都知道and...
纯CSS实现导航栏下拉动画效果
pig_pig32的博客
08-11 6255
实现思路 导航栏的下拉效果通过在ul的li里再嵌套一个ul，再通过animation属性改变第二导航栏ul的高度来实现导航栏下拉动画效果。老铁没毛病。 实现效果： HTML代码 <div class="nav"> <ul> <li> <a href="#">奥利给</a> <ul class="son"> <li><a href="#">雷霆嘎巴</a>
几种常用的下拉列表的动态加载和选中写法
9527KX的博客
04-28 1万+
前端开发中，常用的几种下拉框方式，包括：easyui中的combobox，combo，html中的select标签,struts2标签：。下面是我总结的这几种下拉框的动态加载和动态选中的写法，以防后面再遇到。 一、combobox，combobox:使用easyui插件远程请求数据方式    combobox，combobox:使用easyui插件远程请求数据方式     先定义input标
导航栏中加入自动弹出下拉菜单
weixin_34302798的博客
11-16 375
有什么问题请到评论中发表&lt;br&gt;&lt;!-- http://www.mb5u.com/jscode --&gt;&lt;!-- bbs http://www.mb5u.com/bbs--&gt; &lt;!-- 把下列代码加入到head区内 --&gt;&lt;style type="text/css"&gt; #cssdropdown, #cssdropdown ul {pad...
Bootstrap导航栏选中状态动态改变、设置Bootstrap导航栏的动态选中
baoyu_G的博客
02-04 1万+
自己做一个Bootstrap前端页面,发现如果把导航栏某一栏的&lt;li&gt;标签的class设置成avtive的话，每次点击其他的导航链接都是那个设置的链接为选中状态。为了解决这个问题，在网上看到了类似这样的做法： 思路是获取页面的元素，将原来的active移除，将被点击的&lt;li&gt;标签添加上class属性； 这种方式并没有奏效。 因为页面导航栏的&lt;a&gt;标签有hr......
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值