HTML 菜单

最新推荐文章于 2024-05-06 21:05:10 发布
最新推荐文章于 2024-05-06 21:05:10 发布
阅读量685 收藏
点赞数
文章标签： javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baxp/article/details/121142315
版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级菜单</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .head{
            font-size: 30px;
            text-align: center;
            margin:20px auto;
        }
        ul{
            list-style: none;
        }
        li{
            display: inline-block;
            padding:0 50px;
        }
        .nav{
            width: 600px;
            height: 60px;
            margin:20px auto 0;
            background-color: #ccc;
            box-sizing:border-box;
            box-shadow: inset -1px -1px 3px 1px rgba(0,0,0,0.6);
        }
        .nav_list li{
            text-align: center;
            float: left;
            box-shadow: inset -1px -1px 3px 1px rgba(0,0,0,0.6);    
        }
        a{
            text-decoration: none;
            color: #6D00D9;
        }
        ul{
            display: inline-block;
            height:60px;
            line-height:60px;
            text-align: center;
            cursor: pointer;
            padding: 0px;
        }
        .active{
            background-color: #666;
            border: 1px solid #333;
        }
        .clearfix:after{
            content: "";
            clear: both;
            display: block;
        }
        .clearfix{
            zoom: 1;
        }
        .list{
            position: relative;
        }
        .nav_list{
            position: absolute;
            top:100%;
            left: 0;
            display: none;
        }
        .nav_list li{
            padding: 10px;
            line-height: 36px;
            height: 36px;
            width: 140px;
            text-align: center;
            background-color: #6eb;
        }
        .diyi{
            position: relative;
        }
        ol{
            position: absolute;
            top: 0;
            left: 100%;
            display: none;
        }
        .diyi ol li{
            width: 140px;
            height:36px;
            line-height:36px;
            text-align: center;
            background-color:#BFFFFF;
        }
        li:hover,ol li:hover{
            background-color: orange;
        }
        h4{}
    </style>
    <script>
        window.οnlοad=function(){
            var oLi=document.getElementsByTagName("li");
            var ol=document.getElementsByTagName("ol");
            for (var i = 0; i < oLi.length; i++) {
                oLi[i].οnmοuseοver=function(){
                    if (this.className=="list") {
                        var oUl=this.getElementsByTagName("ul")[0];
                        oUl.style.display="block";
                    }else if(this.className=="diyi"){
                        var ol=this.getElementsByTagName("ol")[0];
                        ol.style.display="block";
                    }
                }
                oLi[i].οnmοuseοut=function(){
                    if (this.className=="list") {
                        var oUl=this.getElementsByTagName("ul")[0];
                        var h4=this.getElementsByTagName("h4")[0];
                        oUl.style.display="none";
                    }else if(this.className=="diyi"){
                        var ol=this.getElementsByTagName("ol")[0];
                        ol.style.display="none";
                    }
                }
            }
        }
            
    </script>
</head>
<body>
    <div class="head">领哥在线</div>
    <div class="nav">
        <ul>
            <li class="list"><h4><a href="#">领哥金融</a></h4>
                <ul class="nav_list claerfix" id="nav_list">
                    <li class="diyi"><a href="#">投资</a>
                        <ol>
                            <li><a href="#">房产</a></li>
                            <li><a href="#">黄金</a></li>
                            <li><a href="#">水产品</a></li>
                        </ol>
                    </li>
                    <li class="diyi"><a href="#">股市</a>
                        <ol>
                            <li><a href="#">新闻</a></li>
                            <li><a href="#">昨日涨幅</a></li>
                            <li><a href="#">今日开盘价</a></li>
                        </ol>
                    </li>
                    <li  class="diyi"><a href="">市场</a>
                        <ol>
                            <li><a href="#">蔬菜行情</a></li>
                            <li><a href="#">猪肉价格</a></li>
                            <li><a href="#">蛋类</a></li>
                            <li><a href="#">月饼</a></li>
                        </ol>
                    </li>
                    <li  class="diyi"><a href="#">走势</a>
                        <ol>
                            <li><a href="#">今日走势</a></li>
                            <li><a href="#">昨日走势</a></li>
                            <li><a href="#">预计</a></li>
                        </ol>
                    </li>
                </ul>
            </li>
            <li class="list"><h4><a href="#">领哥教育</a></h4>
                <ul class="nav_list">
                    <li class="diyi"><a href="#">幼儿教育</a>
                        <ol>
                            <li><a href="#">儿歌</a></li>
                            <li><a href="#">拼音</a></li>
                            <li><a href="#">跳舞</a></li>
                        </ol>
                    </li>
                    <li class="diyi"><a href="#">小学教育</a>
                        <ol>
                            <li><a href="#">语文</a></li>
                            <li><a href="#">数学</a></li>
                            <li><a href="#">英语</a></li>
                        </ol>
                    </li>
                    <li  class="diyi"><a href="#">初中教育</a>
                        <ol>
                            <li><a href="#">语文</a></li>
                            <li><a href="#">数学</a></li>
                            <li><a href="#">英语</a></li>
                            <li><a href="#">历史</a></li>
                            <li><a href="#">政治</a></li>
                        </ol>
                    </li>
                    <li  class="diyi"><a href="#">高中教育</a>
                        <ol>
                            <li><a href="#">语文</a></li>
                            <li><a href="#">数学</a></li>
                            <li><a href="#">英语</a></li>
                            <li><a href="#">生物</a></li>
                            <li><a href="#">化学</a></li>
                            <li><a href="#">物理</a></li>
                        </ol>
                    </li>
                </ul>
            </li>
            <li class="list"><h4><a href="#">医疗保障</a></h4>
                <ul class="nav_list">
                    <li class="diyi"><a href="#">医保</a>
                        <ol>
                            <li><a href="#">医保说明</a></li>
                            <li><a href="#">办理地点</a></li>
                            <li><a href="#">医保种类</a></li>
                        </ol>
                    </li>
                    <li class="diyi"><a href="#">保险</a>
                        <ol>
                            <li><a href="#">老年保险</a></li>
                            <li><a href="#">出行险</a></li>
                            <li><a href="#">医疗保险</a></li>
                        </ol>
                    </li>
                    <li  class="diyi"><a href="#">大病报销</a>
                        <ol>
                            <li><a href="#">报销比例</a></li>
                            <li><a href="#">报销流程</a></li>
                            <li><a href="#">须带证件</a></li>
                            <li><a href="#">报销地点</a></li>
                            <li><a href="#">在线咨询</a></li>
                        </ol>
                    </li>
                    <li  class="diyi"><a href="#">医生在线</a>
                        <ol>
                            <li><a href="#">科室专家</a></li>
                            <li><a href="#">主任医师</a></li>
                            <li><a href="#">主治医师</a></li>
                            <li><a href="#">普通医生</a></li>
                        </ol>
                    </li>
                </ul>
            </li>
                
        </ul>    
    </div>
</body>
</html>

baxp
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html实现好看的多种风格导航菜单(附源码)
xcLeigh
06-29 4万+
html实现好看的多种风格导航菜单(附源码)，导航菜单，源码下载，分为顶部导航菜单,悬浮按钮菜单,右键功能菜单,左侧导航菜单四种导航菜单。每种导航菜单有至少三种风格，总共23种风格，各种风格都有，代码上手简单，代码独立，可以直接使用，效果酷炫，总有一款你喜欢的。也可直接预览效果。
HTML编写菜单
weixin_73103232的博客
07-11 446
HTML编写菜单
【前端基础小案例】HTML+CSS打造精美选项卡菜单效果_选项卡效果html代码
最新发布
2401_84185182的博客
05-06 591
素材和源码可以在我发布的资源里免费下载，可点击下方链接进行下载。阅读温馨提示：代码注释前面有 “” 标记的即为较之前面修改的代码。
JavaScript二级菜单
zhangqling的博客
09-23 1951
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;二级菜单&lt;/title&gt; &lt;style&gt; *{ margin:0; padding: 0; } .hea
js怎么实现二级菜单
qq_60504665的博客
11-18 1148
其中，HTML 文件是页面的基础结构，CSS 文件是用来美化页面的样式，JavaScript 文件则是用来实现菜单的交互效果的。在 HTML 文件中，需要创建一个菜单容器元素，在该元素下创建一级菜单项元素，每个一级菜单项元素下面再添加二级菜单项元素。在 JavaScript 文件中，则需要实现菜单的交互效果，包括鼠标悬停/离开时的效果等。的样式设置了二级菜单项内部文本的样式，以及背景颜色、文字颜色等样式设置。在 CSS 文件中，通过给菜单项元素设置合适的样式来美化菜单的外观。
html--简单竖向菜单栏的实现
清徐柳的博客
03-23 1万+
(图片地址：https://panjiachen.github.io/vue-element-admin/#/dashboard) 如图示这种竖向排列的菜单栏，展示效果比较好，而且交互比较直观，下面来介绍一下实现步骤 1.先把整体布局写出来 由于子菜单展开收缩会变化div大小，所以使用flex弹性盒子。 <ul class="ulList"> <li class="liList"> <p>这是第一个子菜单</p> <ul style="dis.
不同html菜单
10-25
本篇文章将详细探讨不同类型的HTML菜单及其实现方法。 1. **基础HTML菜单** HTML5引入了`<nav>`元素，用于定义页面的主要导航部分。一个基础的HTML菜单可以由`<ul>`（无序列表）和`<li>`（列表项）元素组成。例如...
超实用漂亮精美html菜单源码
07-26
HTML菜单是网页设计中不可或缺的一部分，它为用户提供了一种直观且高效的方式来导航网站内容。本资源包含一组“超实用漂亮精美html菜单源码”，适用于希望提升网页交互体验的开发者。这些源码集美观与实用性于一体，...
菜单：HTML菜单生成器
02-03
HTML菜单生成器 spatie/menu软件包提供了一个流畅的界面，可以在php应用程序中构建任何大小的菜单。 如果您使用Laravel构建应用程序，则提供一些额外的待遇。 可从获得文档。 从版本1升级？ 有一个！支持我们 我们...
任意位置显示html菜单
10-31
任意位置显示html菜单 本文主要介绍了如何在任意位置显示html菜单，通过使用JavaScript和HTML实现菜单的弹出和隐藏功能。 在HTML的body区域中，我们添加了一个JavaScript脚本，该脚本使用了document.onclick事件来...
Html 菜单头部
01-10
HTML菜单头部设计是网页开发中的一个重要组成部分，它不仅提供了页面导航功能，同时也是网站品牌形象和用户体验的关键因素。在本文中，我们将深入探讨HTML菜单头部的设计原理、常见元素以及如何创建一个美观且高效的...
树形菜单栏（html）
05-03
树形菜单栏（html），树形菜单栏（html），树形菜单栏（html）
JavaScript实现简单的二级导航菜单实例
10-24
主要介绍了JavaScript实现简单的二级导航菜单,设计javascript动态操作页面元素的技巧,非常具有实用价值,需要的朋友可以参考下
js制作的简易二级菜单
02-13
使用javascript制作简易的二级菜单，比较全面，想制作菜单的不同效果可以修改里面的css样式
JavaScript实现二级菜单
weixin_43729867的博客
02-13 2869
第一次尝试使用JS实现一个二级菜单栏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
JavaScript二级级联菜单
lihongjun_0204的博客
08-11 107
[code="java"] //创建两个字符串 var sx = "[{'levelId':100101,'levelName':'坐席'},{'levelId':100102,'levelName':'团队长'},{'levelId':100103,'levelName':'部经理'}]"; var fw = "[{'levelId':1...
HTML5导航栏菜单的设计与实现
热门推荐
YQEMMMM的博客
08-09 1万+
导航栏菜单的设计与实现 导航栏菜单的设计与实现 头条 娱乐 热点 体育 财经 科技 ...
HTML+ CSS来实现一个简单的二级菜单栏
qq_40992225的博客
09-20 6230
3.最后，就是将二级菜单栏隐藏起来，只有鼠标放到对应的一级菜单上时，二级菜单才会显示。2.接下来，写二级菜单栏，把它添加到一级菜单中的 li 里面。1.首先，我们先创建一级菜单。
【前端】菜单栏设计（html、css）
See_Star的博客
03-23 4804
先展示一下效果图： 目录一、代码1.1 html1.2 css二、代码分析2.1 浏览器配置2.1.1 normalize.css2.1.2 html5shiv2.2 html分析2. css解析 一、代码 1.1 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 针对于ie的设置。--> <!--[if lt
html菜单
05-27
HTML菜单可以通过以下几种方式来实现： 1. 使用HTML的`<ul>`和`<li>`标签来创建无序列表，然后通过CSS样式来美化成菜单的样式。示例代码如下： ``` <li><a href="#">菜单项1</a></li> <li><a href="#">菜单项2...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值