CCS实现带下拉列表的导航栏

我爱小锦鲤
2,966 阅读2分钟

1 前言

初学CSS，运用无序列表、div标签和选择器实现一个简易的具有下拉列表的导航栏，我找来了AMD官网的导航栏作为模板，对它进行简单的复刻：

屏幕截图 2021-07-25 150349.png

2 核心功能实现

2.1 基本元素设置

由于下拉菜单的分类太多，工作量较大，所以就对"处理器"实现下拉，对该目录下的"台式机"实现侧边展开，如上图所示：首先要做的就是把所有文本信息创建好，方便起见将所有链接处都用#代替，同时还需要随便找个AMD的logo，具体代码如下所示：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>导航栏示例</title>
</head>

<body>
    <ul>
        <li><img src="AMD-LOGO.png" alt="amdlogo" height="50" width="160"></li>
        <li><a href="#">处理器▾</a>
            <ul>
                <li><a href="#">台式机</a>
                    <div>
                        <a href="#">消费类处理器:</a>
                        <a href="#">锐龙 THREADRIPPER</a>
                        <a href="#">锐龙</a>
                        <a href="#">锐龙搭载显卡</a>
                        <a href="#">速龙搭载显卡</a>
                        <a href="#">商业用户:</a>
                        <a href="#">锐龙 PRO</a>
                        <a href="#">速龙 PRO</a>
                        <a href="#">AMD PRO 技术</a>
                        <a href="#">商用电脑</a>
                    </div>
                </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>
                <li><a href="#">产品规格</a></li>
                <li><a href="#">技术</a></li>
            </ul>
        </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>
        <li><a href="#">行业解决方案▾</a></li>
    </ul>

    <h1>AMD at Chinajoy 2021</h1>
    <h2>极速制胜 制霸游戏</h2>
    <p>具体内容</p>

</body>

</html>

网页中的显示效果如下：

屏幕截图 2021-07-25 232114.png

代码中主体是一个无序列表，处理器的下拉列表嵌套了一个无序列表（理论上这边直接用div+a的形式嵌套应该也是没问题的），台式机的侧拉列表嵌套了一个div+a。两种方法都用一遍，对于加深理解还是很有好处滴~

2.2 下拉列表设置

核心思路是通过:hover选择器来决定是否显示这两个下拉列表，具体代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>导航栏示例</title>
    <style>
        .navigation>li {
            display: inline-block;
            position: relative;
        }
        
        .list_down {
            display: none;
            /*通过hover选择器来显示菜单，此处默认为隐藏*/
            position: absolute;
            /*使得下拉列表向下覆盖*/
            list-style-type: none;
            /*取消ul的样式*/
            padding: 0;
            /*取消ul的padding*/
        }
        
        .list_down li {
            display: block;
        }
        
        .list_right {
            display: none;
            /*通过hover选择器来显示菜单，此处默认为隐藏*/
            position: absolute;
        }
        
        .list_right a {
            display: block;
        }
        
        .list_down .button2:hover .list_right {
            display: inline-block;
            /*使得侧拉列表显示在台式机的右边,方便演示，后续会改成block*/
        }
        
        .navigation .button1:hover .list_down {
            display: block;
            /*显示下拉菜单*/
        }
    </style>
</head>

<body>
    <ul class="navigation">
        <li><img src="AMD-LOGO.png" alt="amdlogo" height="50" width="160"></li>
        <li class="button1"><a href="#">处理器▾</a>
            <ul class="list_down">
                <li class="button2"><a href="#">台式机</a>
                    <div class="list_right">
                        <a href="#">消费类处理器:</a>
                        <a href="#">锐龙 THREADRIPPER</a>
                        <a href="#">锐龙</a>
                        <a href="#">锐龙搭载显卡</a>
                        <a href="#">速龙搭载显卡</a>
                        <a href="#">商业用户:</a>
                        <a href="#">锐龙 PRO</a>
                        <a href="#">速龙 PRO</a>
                        <a href="#">AMD PRO 技术</a>
                        <a href="#">商用电脑</a>
                    </div>
                </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>
                <li><a href="#">产品规格</a></li>
                <li><a href="#">技术</a></li>
            </ul>
        </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>
        <li><a href="#">行业解决方案</a></li>
    </ul>

    <h1>AMD at Chinajoy 2021</h1>
    <h2>极速制胜 制霸游戏</h2>
    <p>具体内容</p>

</body>

</html>

网页中的显示效果如下，可以看到核心功能已经实现，还差亿点点美化~

屏幕截图 2021-07-25 233403.png

3 页面美化

根据模板再对页面做亿点点的美化：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>导航栏示例</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .navigation {
            background-color: black;
            /*导航栏的背景色*/
        }
        
        .navigation>li {
            display: inline-block;
            position: relative;
            padding: 10px;
            vertical-align: middle;
            /*使得导航栏中的列表居中显示*/
        }
        
        .navigation>li>a {
            text-decoration: none;
            color: white;
            padding: 15px;
        }
        
        .navigation>li:hover {
            background-color: rgba(255, 255, 255, 0.9);
            /*鼠标悬停变色*/
        }
        
        .navigation>li:hover>a {
            color: black;
            /*鼠标悬停变色*/
        }
        
        .logo {
            display: block;
        }
        
        .list_down {
            display: none;
            /*通过hover选择器来显示菜单，此处默认为隐藏*/
            position: absolute;
            /*使得下拉列表向下覆盖*/
            list-style-type: none;
            /*取消ul的样式*/
            margin-top: 10px;
            margin-left: -10px;
            width: 150px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            /*添加阴影*/
        }
        
        .list_down li {
            display: block;
            background-color: rgba(255, 255, 255, 0.9)
        }
        
        .list_down li:hover {
            background-color: black;
            /*鼠标悬停变色*/
        }
        
        .list_down li:hover>a {
            color: white;
            /*鼠标悬停变色*/
        }
        
        .list_right {
            display: none;
            /*通过hover选择器来显示菜单，此处默认为隐藏*/
            position: absolute;
            margin-left: 150px;
            margin-top: -51px;
            background-color: rgba(255, 255, 255, 0.9);
            width: 200px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            /*添加阴影*/
        }
        
        .list_right a,
        .list_down li a {
            display: block;
            text-decoration: none;
            color: black;
            padding: 15px;
        }
        
        .list_right a:hover {
            background-color: black;
            color: white;
            /*鼠标悬停变色*/
        }
        
        .list_down .button2:hover .list_right {
            display: block;
        }
        
        .navigation .button1:hover .list_down {
            display: block;
            /*显示下拉菜单*/
        }
        
        .text {
            margin: 20px;
            /*文本*/
        }
    </style>
</head>

<body>
    <ul class="navigation">
        <li><img class="logo" src="AMD-LOGO.png" alt="amdlogo" height="50" width="160"></li>
        <li class="button1"><a href="#">处理器</a>
            <ul class="list_down">
                <li class="button2"><a href="#">台式机</a>
                    <div class="list_right">
                        <a href="#">消费类处理器:</a>
                        <a href="#">锐龙 THREADRIPPER</a>
                        <a href="#">锐龙</a>
                        <a href="#">锐龙搭载显卡</a>
                        <a href="#">速龙搭载显卡</a>
                        <a href="#">商业用户:</a>
                        <a href="#">锐龙 PRO</a>
                        <a href="#">速龙 PRO</a>
                        <a href="#">AMD PRO 技术</a>
                        <a href="#">商用电脑</a>
                    </div>
                </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>
                <li><a href="#">产品规格</a></li>
                <li><a href="#">技术</a></li>
            </ul>
        </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>
        <li><a href="#">行业解决方案</a></li>
    </ul>
    <div class="text">
        <h1>AMD at Chinajoy 2021</h1>
        <h2>极速制胜 制霸游戏</h2>
        <p>具体内容</p>
    </div>

</body>

</html>

最终效果就是这样，还是挺像的~

屏幕截图 2021-07-26 115817.png

AMD YES!

avatar
文章
阅读
粉丝
相关推荐
使用 CSS 编写一个丰富多彩的九宫格菜单
1.4k阅读
 · 
42点赞
CSS 还能这样玩？奇思妙想渐变的艺术
4.9k阅读
 · 
90点赞
Hover.css - 一系列的 hover button 效果
1.5k阅读
 · 
45点赞
一篇文章教你如何用CSS+JS实现按钮状态的动态切换
965阅读
 · 
8点赞
巧用css圆角实现有点意思的加载动画
9.7k阅读
 · 
123点赞
竖直导航栏--css项目
590阅读
 · 
0点赞
CSS实现渐变色边框(Gradient borders)的5种方法
660阅读
 · 
1点赞
Css之背景+渐变
1.4k阅读
 · 
1点赞
CSS伪类：CSS3鼠标滑过按钮动画第三节
1.6k阅读
 · 
5点赞

友情链接：