沃梦达 / IT编程 / 前端开发 / 正文

纯CSS(无JS)实现的二级弹出菜单效果代码

前端开发
2024-01-04

首先我们需要了解什么是纯CSS实现的二级弹出菜单效果。

首先我们需要了解什么是纯CSS实现的二级弹出菜单效果。

二级弹出菜单效果是指，当鼠标指向一级菜单时，二级菜单会在该一级菜单的下方水平展开。通常，这种效果需要JS的支持。但是有些开发者可能不想使用JS，只希望使用CSS来实现。那么这个要怎么做呢？

其实，实现纯CSS的二级弹出菜单效果，并不是一件困难的事情。可以使用CSS的:hover伪类和CSS选择器来实现这个效果。

接下来，我们就来详细说明一下如何实现。

1. HTML结构

首先，我们需要构建一个基本的HTML结构，包括一级和二级菜单的相关标签。

其中，一级菜单使用

    和

  • 标签来构建。二级菜单需要嵌套在一级菜单中，并使用
      和

    • 标签组成。代码如下：

      <nav>
  <ul>
    <li><a href="#">菜单项1</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="#">菜单项2</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="#">菜单项3</a>
      <ul>
        <li><a href="#">子菜单项1</a></li>
        <li><a href="#">子菜单项2</a></li>
        <li><a href="#">子菜单项3</a></li>
      </ul>
    </li>
  </ul>
</nav>

      2. CSS样式

      接下来，我们需要为菜单添加CSS样式。主要是为了控制菜单的显示和隐藏。

      首先，我们要隐藏所有子菜单，只有在一级菜单悬停时才显示相应的二级菜单。这里我们可以使用display:none来实现菜单的隐藏。而在一级菜单悬停时，我们使用子选择器(>)来选择它下面的子菜单。在样式中添加:hover伪类来实现鼠标悬停时显示二级菜单的效果。代码如下：

      nav ul ul { 
  display: none; 
}

nav ul li:hover > ul {
  display: inherit; 
}

      其次，我们需要将菜单变成水平显示，并将子菜单的位置置于一级菜单的下方。这里，我们可以使用position属性来控制菜单的位置。代码如下：

      nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav ul li {
  float: left;
}

nav ul li:hover {
  background: #4CAF50;
}

nav ul ul {
  position: absolute;
}

nav ul ul li {
  float: none;
  position: relative;
}

nav ul ul ul {
  position: absolute;
  top: 0;
  left: 100%;
}

      3. 示例

      示例一

      以下是一个完整的HTML和CSS示例。它演示了如何使用纯CSS来实现一个简单的二级弹出菜单效果。

      <!DOCTYPE html>
<html>
<head>
    <title>纯CSS二级弹出菜单示例</title>
    <style type="text/css">
        nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        nav ul li {
            float: left;
            position: relative;
        }

        nav ul li:hover {
            background: #4CAF50;
        }

        nav a {
            display: block;
            padding: 0 10px;
            color: #333;
            font-size: 15px;
            line-height: 50px;
            text-decoration: none;
        }

        nav ul ul {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background: #fff;
            padding: 0;
        }

        nav ul ul li {
            float: none;
            position: relative;
        }

        nav ul ul li a {
            color: #666;
            line-height: 34px;
            padding: 10px;
            display: block;
        }

        nav ul ul li a:hover {
            background: #f2f2f2;
        }

        nav ul li:hover > ul {
            display: inherit;
        }

    </style>
</head>
<body>

    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">菜单1</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="#">菜单2</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="#">菜单3</a>
                <ul>
                    <li><a href="#">子菜单1</a></li>
                    <li><a href="#">子菜单2</a></li>
                    <li><a href="#">子菜单3</a></li>
                </ul>
            </li>
        </ul>
    </nav>

</body>
</html>

      我们可以在浏览器中打开该示例，查看菜单的效果。

      示例二

      下面，我们再来分享一个使用SCSS预处理器和ul-li命名规则的示例，这个示例可以更加方便地维护和扩展菜单样式。

      这个示例的思想是：

      1.所有的菜单都在一个ul下，我们可以用ul-li命名规则，来统一样式；

      2.二级菜单和一级菜单共用一个样式，所以可以将它们写在同一段样式中。

      具体代码如下：

      <!DOCTYPE html>
<html>
<head>
    <title>纯CSS二级弹出菜单示例</title>
    <!-- 引入SCSS样式 -->
    <style type="text/scss">
        nav {
            ul {
                margin: 0;
                padding: 0;
                list-style: none;
            }

            li {
                float: left;
                position: relative;

                &:hover {
                    a {
                        background-color: #000;
                        color: #fff;
                    }

                    ul {
                        display: block;
                    }
                }

                a {
                    display: block;
                    padding: 0.6em 0.8em;
                    color: #000;
                    text-decoration: none;

                    &:hover {
                        background-color: #f7f7f7;
                        color: #000;
                    }
                }

                ul {
                    display: none;
                    position: absolute;
                    left: 0;
                    top: 100%;
                    min-width: 10em;
                    padding: 0.5em 0;
                    list-style: none;
                    background: #fff;
                    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
                    li {
                        position: relative;
                        padding: 0.4em 1.2em;
                    }
                }
            }
        }
    </style>
</head>
<body>

    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">菜单1</a>
                <ul>
                    <li><a href="#">子菜单1</a></li>
                    <li><a href="#">子菜单2</a></li>
                    <li><a href="#">子菜单3</a></li>
                    <li><a href="#">子菜单4</a></li>
                </ul>
            </li>
            <li><a href="#">菜单2</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="#">菜单3</a>
                <ul>
                    <li><a href="#">子菜单1</a></li>
                    <li><a href="#">子菜单2</a></li>
                </ul>
            </li>
        </ul>
    </nav>

    <!--引入SCSS编译器-->
    <script src="https://scsstranspiler.com/scripts/compile.js"></script>

    <!-- 对SCSS代码进行编译 -->
    <script>
        var scssText = document.querySelector('style[type="text/scss"]').textContent;
        var cssText = SCSSTranspiler.compile(scssText);
        var style = document.createElement('style');
        style.textContent = cssText;
        document.head.appendChild(style);
    </script>

</body>
</html>

      在浏览器中打开该示例，也可看到菜单的效果。

      以上是关于纯CSS实现的二级弹出菜单效果的完整攻略，希望能对您有所帮助。

本文标题为：纯CSS(无JS)实现的二级弹出菜单效果代码

上一篇： 使用单div实现CSS 绘图方法汇总
下一篇： 深入解读CSS3中transform变换模型的渲染
猜你喜欢
最新文章
热门文章
基础教程
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2