简单二级菜单实现

最新推荐文章于 2025-05-19 12:03:11 发布
最新推荐文章于 2025-05-19 12:03:11 发布
阅读量4.9k 收藏 4
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 前端练习 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_32392057/article/details/60145025

简单二级菜单实现

看了公开课视频，挺基础的，但一节课看下来，还是能发下自己的知识点的不足，学习浮躁的状态

主要知识点

  • 背景图片定位
  • 行内元素控制
  • fixed, relative, absolute的差别使用

值得注意的内容

    <a href="#">1</a><a href="#">1</a><a href="#">1</a><a href="#">1</a><a href="#">1</a>

与

    <a href="#">1</a>
    <a href="#">1</a>
    <a href="#">1</a>
    <a href="#">1</a>
    <a href="#">1</a>

在显示上存在着差异，是之前一直没有注意过的

效果图

这里写图片描述

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级菜单</title>
    <meta name="keyword" content="">
    <meta name="description">
    <style>
        * {
    margin: 0;
    padding: 0;
}
body {
    user-select: none; 
}
.menu {
    width: 280px;
    height: 500px;
    background: #fff;
    border: 1px solid #49A3DF;
    margin-top: 70px;
    margin-left: 50px;
}

.menu .title {
    width: 280px;
    height: 50px;
    background: #49A3DF;
    color: #fff;
    text-align: center;
    line-height: 50px;
}
.menu ul li {
    list-style: none;
    height: 40px;
    border-bottom: 1px dotted #ddd;
    line-height: 40px;
    text-indent: 10px;
    background: url('../images/ts.png') no-repeat;
    background-position: 260px center;
    position: relative;
}
.menu ul li a {
    color: #666;
    text-decoration: none;
    margin-right: 10px;
}
.menu ul li .top {
    width: 280px;
    height: 1px;
    position: absolute;
    background: #49A3DF;
    top: -1px;
    left: 0;
    display: none;
}
.menu ul li .bottom {
    width: 280px;
    height: 1px;
    position: absolute;
    background: #49A3DF;
    top: 41px;
    left: 0;
    display: none;
}
.menu ul li .right {
    width: 1px;
    height: 40px;
    position: absolute;
    background: #fff;
    top: 0px;
    right: -1px;
    display: none;
}
.menu ul li .nav {
    width: 259px;
    height: 251px;
    border: 1px solid #49A3DF;
    position: absolute;
    background: #fff;
    top: -1px;
    right: -261px;
    display: none;
}
    </style>
</head>
<body>
    <div class="menu">
        <div class="title">全部商品</div>
        <ul>
            <li>
                <a href="#">上衣</a><a href="#">呢大衣</a><a href="#">卫衣</a><a href="#">针织衫</a><a href="#">套衫</a>
                <div class="top"></div>
                <div class="bottom"></div>
                <div class="nav"><img src="images/xq.png" alt=""></div>
                <div class="right"></div>
            </li>
            <li>
                <a href="#">上衣</a><a href="#">呢大衣</a><a href="#">卫衣</a><a href="#">针织衫</a><a href="#">套衫</a>
                <div class="top"></div>
                <div class="bottom"></div>
                <div class="nav"><img src="images/xq.png" alt=""></div>
                <div class="right"></div>
            </li>
            <li>
                <a href="#">上衣</a><a href="#">呢大衣</a><a href="#">卫衣</a><a href="#">针织衫</a><a href="#">套衫</a>
                <div class="top"></div>
                <div class="bottom"></div>
                <div class="nav"><img src="images/xq.png" alt=""></div>
                <div class="right"></div>
            </li>
            <li>
                <a href="#">上衣</a><a href="#">呢大衣</a><a href="#">卫衣</a><a href="#">针织衫</a><a href="#">套衫</a>
                <div class="top"></div>
                <div class="bottom"></div>
                <div class="nav"><img src="images/xq.png" alt=""></div>
                <div class="right"></div>
            </li>
            <li>
                <a href="#">上衣</a><a href="#">呢大衣</a><a href="#">卫衣</a><a href="#">针织衫</a><a href="#">套衫</a>
                <div class="top"></div>
                <div class="bottom"></div>
                <div class="nav"><img src="images/xq.png" alt=""></div>
                <div class="right"></div>
            </li>
            <li>
                <a href="#">上衣</a><a href="#">呢大衣</a><a href="#">卫衣</a><a href="#">针织衫</a><a href="#">套衫</a>
                <div class="top"></div>
                <div class="bottom"></div>
                <div class="nav"><img src="images/xq.png" alt=""></div>
                <div class="right"></div>
            </li>
            <li>
                <a href="#">上衣</a><a href="#">呢大衣</a><a href="#">卫衣</a><a href="#">针织衫</a><a href="#">套衫</a>
                <div class="top"></div>
                <div class="bottom"></div>
                <div class="nav"><img src="images/xq.png" alt=""></div>
                <div class="right"></div>
            </li>
            <li>
                <a href="#">上衣</a><a href="#">呢大衣</a><a href="#">卫衣</a><a href="#">针织衫</a><a href="#">套衫</a>
                <div class="top"></div>
                <div class="bottom"></div>
                <div class="nav"><img src="images/xq.png" alt=""></div>
                <div class="right"></div>
            </li>
            <li>
                <a href="#">上衣</a><a href="#">呢大衣</a><a href="#">卫衣</a><a href="#">针织衫</a><a href="#">套衫</a>
                <div class="top"></div>
                <div class="bottom"></div>
                <div class="nav"><img src="images/xq.png" alt=""></div>
                <div class="right"></div>
            </li>
            <li>
                <a href="#">上衣</a><a href="#">呢大衣</a><a href="#">卫衣</a><a href="#">针织衫</a><a href="#">套衫</a>
                <div class="top"></div>
                <div class="bottom"></div>
                <div class="nav"><img src="images/xq.png" alt=""></div>
                <div class="right"></div>
            </li>
            <li>
                <a href="#">上衣</a><a href="#">呢大衣</a><a href="#">卫衣</a><a href="#">针织衫</a><a href="#">套衫</a>
                <div class="top"></div>
                <div class="bottom"></div>
                <div class="nav"><img src="images/xq.png" alt=""></div>
                <div class="right"></div>
            </li>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
        </ul>
    </div>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script>
        $('.menu ul li').hover(function() {
            $(this).find('div').show();
        },function() {
            $(this).find('div').hide();
        });
    </script>
</body>
</html>
二级菜单——图书馆案例
qq_59708493的博客
01-15 1018
#include<iostream> using namespace std; void menu01() { cout<<"您选择了项目1"<<endl; cout<<"请选择该栏目书名："<<endl; cout<<"1.《欢乐的经济学》---23元"<<endl; cout<<"2.《拖延心理学》---24元"<<endl; cout<<"3.《万历十五年》---29.
C语言两级菜单（对于大内存可扩展N级菜单,构架很好，易于移植）V1.0
03-04
#include "menu.h" //菜单资源头文件 #include "menu_res.h" //外部显示库函数 #include "lcm.h" /* 名称:C语言两级菜单（对于大内存可扩展N级菜单）V1.0 作者:中国传惠 Transmart gongxd@126.com 单位:山东科技大学 时间:2009-3-4 编译环境: IDE-Version: uVision3 V3.33 Copyright (c) Keil Elektronik GmbH / Keil Software, Inc 2006 License Information: gongxd 微软用户 微软中国 LIC=BU373-A1HZU-EZJW0-DRWR6-C682M-E9HMS Tool Version Numbers: 工具链路径：C:\Keil\C51\BIN\ C Compiler: C51.Exe V8.05a Assembler: A51.Exe Linker/Locator: BL51.Exe V6.00 Librarian: LIB51.Exe V4.24 Hex Converter: OH51.Exe V2.6 CPU DLL: S8051.DLL V3.06 Dialog DLL: DP51.DLL V2.48b Target DLL: C:\KEIL\VW_C.DLL Dialog DLL: TP51.DLL V2.48b 使用说明: 1.向"menu_res.h"中添加菜单列表 2.向 "Menu_Function.h"中添加菜单响应函数声明 3.在"lcm.h"中替换自己的外部显示库函数,可以用类似的宏定义#define DisplayFunction(int,int) MyDisplayFunction(int,int) 其中"lcm.h"的X,Y坐标起始定义为0,0 (0,0)X------> Y | | \|/ */ #include "Menu_Function.h" //菜单条目格式 //{要显示的的菜单文本,子菜单号,功能函数地址) MenuItemStruct code MenuMain[]={ {"主1 条目1",1,Null}, {"主1 条目2",2,Null}, {"主1 条目3",3,Null}, {"功能函数1",MenuHasFunction,MenuFuntion1}, {"主1 条目5",0,Null}, }; MenuItemStruct code MenuSub1[]={ {"次1 条目1",0,Null}, {"次1 条目2",0,Null}, {"功能函数2",MenuHasFunction,MenuFuntion2}, {"次1 条目4",0,Null}, {"次1 条目5",0,Null}, {"次1 条目6",0,Null}, }; MenuItemStruct code MenuSub2[]={ {"次2 条目1",0,Null}, {"次2 条目2",0,Null}, {"次2 条目3",0,Null}, }; MenuItemStruct code MenuSub3[]={ {"次3 条目1",0,Null}, {"次3 条目2",0,Null}, {"次3 条目3",0,Null}, {"次3 条目4",0,Null}, {"次3 条目5",0,Null}, {"次3 条目6",0,Null}, {"次3 条目7",0,Null}, {"次3 条目8",0,Null}, {"次3 条目9",0,Null}, }; //菜单板列表 MenuPanelStruct code MenuPanel[]={ {MenuPanelID(MenuMain)}, {MenuPanelID(MenuSub1)}, {MenuPanelID(MenuSub2)}, {MenuPanelID(MenuSub3)}, };
计算机图形学二级菜单+画图，C语言实现
05-08
计算机图形学作业，C语言实现，功能包括二级菜单、画直线、画圆、画多边形、颜色填充
expandablelistview二级目录数据_戳进来|计算机二级考试干货分享
weixin_36091906的博客
12-11 180
不知不觉 假期已过半相信很多同学在不久前报名了今年九月的计算机二级考试那么对于如何准备，如何应对这场考试不要着急不要迷茫不要彷徨小阳为大家带来了一些考试攻略快快收了这篇干货吧!一、关于计算机二级，你需要知道：➤1、什么时候考试？2020年9月26日—9月28日(具体考试时间地点以准考证为准)➤2、主要考些什么？计算机二级包括二级C，二级C++，二级VB，二级VFP，二级Access，...
C语言二级菜单的实现
最新发布
liuxupaopao的博客
05-19 661
C语言三种实现2级菜单的方式
二级菜单命令行 c语言,二、Windows菜单—其它菜单命令
weixin_39945445的博客
05-18 900
下面是在使用菜单时一些有用的函数。当您改变顶层菜单项时，直到Windows重画菜单列时才显示所做的改变。您可以通过下列呼叫来强迫执行菜单更新：DrawMenuBar (hwnd) ;注意，DrawMenuBar的参数是窗口句柄而不是菜单句柄。您可以使用下列命令来获得弹出式菜单的句柄：hMenuPopup = GetSubMenu (hMenu, iPosition) ;其中iPosition是hM...
百分比单位始终根据父元素相应值来计算_收下计算机二级秘笈，考场上说好不哭！...
weixin_39867327的博客
11-20 1136
计算机二级考试火热进行中~听说有些人明天考试今天才记起来自己报名了听说还有些同学准备明天在考场上重新“编写”office运行法则当然还有很多同学现在正在抓紧时间复习吧看看下面的计算机二级office与c语言考前易错点总结希望可以给大家提供帮助~office常见问题大总结1.修改Office默认打开方式在打开考生文件夹素材做题时候，可能会出现默认打开方式是wps的情况(有些考点有一级WPS...
用C语言做的多级菜单程序
07-23
前些天的课程设计 C语言做的多级菜单 DOS下运行 希望对各位有用
JavaScript实现简单的二级导航菜单实例
10-24
二级导航菜单是网页中常用的一种导航结构，它可以在一级菜单的基础上展开二级菜单，使得用户能够通过层层递进的方式找到自己感兴趣的内容。实现这样的菜单结构不仅能够提升用户体验，还能使页面内容组织得更加清晰...
bootstrap实现二级下拉菜单效果
08-28
Bootstrap 实现二级下拉菜单效果 Bootstrap 是一个流行的前端框架，提供了许多...使用 Bootstrap 实现二级下拉菜单效果非常简单和方便。 Bootstrap 提供了许多实用的 UI 组件和工具，帮助我们快速构建复杂的应用程序。
简单网页二级菜单的实现
04-13
以上就是一个简单网页二级菜单的基本实现。通过HTML、CSS和JavaScript的结合，我们创建了一个易于理解和操作的交互式菜单。你可以根据自己的需求调整样式和交互效果，使其更符合网站的整体设计风格。在实际项目中，...
vue实现鼠标移过出现下拉二级菜单功能
10-15
在 Vue 中实现鼠标移过出现下拉二级菜单的功能，可以通过结合 Vue 的响应式系统、条件渲染（v-if 或 v-show）以及 CSS 过渡动画来实现。下面我们将详细探讨如何实现这一功能。 首先，Vue 提供了 `transition` 组件...
C语言，多级菜单实现思路
12-18
提供一种C语言多级菜单的处理思路，采用链表实现，思路清晰，可做产品研发参考
C语言编写的多级菜单代码
12-04
这是一个用c语言写成的多级菜单代码。能让你熟悉图形界面的编程形式。
vs2010 c++ 外壳扩展右键菜单二级菜单
07-02
本代码实现类似QQ右键文件 "通过QQ发送到" -我的手机 的功能，由于关于外壳扩展右键菜单网上的资料和代码都比较老旧，在新的visual studio上总是会出现兼容问题，因此本代码很有参考价值。编译生成的dll调用regsvr32 注册一下，再右键某个文档就可以查看效果了。
c综合编程，二级菜单
06-26
图书管理系统，二级菜单，密码登录
qtreeview 点击二级节点弹出dialog_C语言计算机二级学生版软件|visual 2010 学生版安装以及经常会出现的错误|部分配置...
weixin_39730801的博客
12-05 187
计算机二级考试使用软件——visual 2010 学生版。至于很多人问我都什么年代了，还用visual 2010，没办法考试规定。一些用惯visual 2019个人版的、visual c++6.0的朋友，考试中肯定会不适应的。很多人没有重视，到时考试的时候失误太多，连计算机二级c语言都没考过还是乖乖下载吧。首先安装好软件秘钥：可以直接注册，永久使用。如果不注册，只有一个月的使用权。其次，...
简单实现二级菜单
qq_32021025的博客
12-04 2054
这里写自定义目录标题 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; /* *{ margin:0 ; padding: 0; border:0; list-st
C语言二级菜单无法退出,请教傻孩子大侠多级菜单的问题.
weixin_31067223的博客
05-18 481
/*********************** 目录结构体定义 ***********************/typedef struct datas{unsigned char MenuCount; //当前层节点数unsigned intstr[8]; //菜单标题void (*Subs)(void); ...
掌握DWR实现二级菜单的简易教程
### 二级菜单实现原理 在Web开发中，二级菜单（或多级菜单）通常是指具有下拉功能的导航菜单，它允许用户通过鼠标悬停或点击来展开或隐藏下一级菜单项。在DWR中实现二级菜单，需要涉及到以下几个关键技术点： 1. *...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值