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

·  阅读 1656
CCS实现带下拉列表的导航栏

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!

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改