基于CSS两种菜单创建方式

原创

已于 2025-03-10 17:49:12 修改 · 1.3k 阅读

文章标签：

#css #前端 #弹出式菜单

于 2024-07-13 11:50:40 首次发布

作者：私语茶馆

1.前言

HTML多种场景下需要菜单的实现，这里提供两种方式：

（1）基于CSS的POPUP式菜单

特征：按需显示POPUP菜单，但布局是浮动的。

（2）覆盖式弹出菜单。

特征：按需显示菜单，菜单以弹出窗口模式显示，会覆盖下面的内容

2.基于CSS的POPUP式菜单

先来看一下效果，这个是挤压式弹出菜单，默认隐藏，如果点击后，会显示菜单，界面上其他元素会根据弹出菜单来重新布局。

2.1. 效果

2.1.1. 初始效果

2.1.2. 点击按钮显示菜单：

点击图形化按钮后，会把背景字幕往后挤压，

2.1.3. 点击按钮隐藏菜单：

效果同步骤1，初始化的情况。背景字幕会往左边排序

这种样式的菜单可以用于界面比较简洁的首页。

2.2. 代码

2.2.1. HTML

<td style="width: 40%; text-align: right">
    <div class="topnav">
        <div id="myLinks">
            <a href="#安全管理">用户管理</a>
            <a href="#许可证管理">许可证</a>
            <a href="#关于">关于</a>
        </div>
        <p style="float: left">beginning  test字幕</p>
       <a href="javascript:void