如何使用下拉菜单制作响应式导航栏菜单
如何使用下拉菜单制作响应式导航栏菜单
作为 Web 开发人员，必须具备良好的 HTML 和 CSS 基础才能设计网页，尤其是登录页面，而登录页面的关键方面之一是导航栏菜单。在本教程中，我将逐步向您展示如何使用 HTML CSS 和一点点 JavaScript 制作带有下拉菜单的响应式导航栏菜单。
构建响应式导航栏是培养网页设计技能和改善用户体验的好方法。因此，如果您是学习前端开发并希望构建导航栏的初学者，那么您来对地方了。
在本文中，我们将从以下示例开始 带下拉菜单的介绍部分 你可以轻松挑战 寻找 关于前端导师。我们的导航栏将分为两部分：左侧部分包含徽标和菜单，右侧部分包含登录和注册按钮。
开始使用 HTML
首先，我们将从建立经典 hmtl 页面的基本结构开始。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>带有下拉菜单的响应式导航栏</title> </head> <body> </body> </html>
然后我们必须添加导航栏元素，该元素将包含将显示在导航栏上的所有元素（徽标、菜单、登录按钮……）。
<nav> <!-- Logo container --> <div class="logo"> <h1>折断</h1> </div> <!-- Menu container --> <div class="menu-container"> <!-- Left menu container --> <ul class="left-menu"> <li class="dropdown"> <a href="#" class="menu"> 特征 <ul class="sub-menu"> <li> <a href="#" class="sub-menu-link"> <svg 宽度=“14” 高度=“16” xmlns="http://www.w3.org/2000/svg" > <path d="M14 3v12a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h1V1a1 1 0 1 1 2 0v1h2V1a1 1 0 1 1 2 0v1h2V1a1 1 0 0 1 2 0v1h1a1 1 0 0 1 1 1Zm-2 3H2v1h10V6Zm0 3H2v1h10V9Zm0 3H2v1h10v-1Z" 填充=“#726CEE” /> </svg> 待办事项列表 </a> </li> <li> <a href="#" class="sub-menu-link"> <svg 宽度=“16” 高度=“16” xmlns="http://www.w3.org/2000/svg" > <path d="M12.667 8.667h-4v4h4v-4ZM11.334 0v1.333H4.667V0h-2v1.333h-1C.75 1.333 0 2.083 0 3v11.333C0 15.25。 75 16 1.667 16h12.667C15.25 16 16 15.25 16 14.333V3c0-.917-.75-1.667-1.666-1.667h-1V0h-2Zm3 14.333H1 .667V5.5h12.667v8.833Z” 填充="#4BB1DA" /> </svg> 日历 </a> </li> <li> <a href="#" class="sub-menu-link"> <svg 宽度=“13” 高度=“17” xmlns="http://www.w3.org/2000/svg" > <path d="M6.408 13.916c-3.313 0-6-1.343-6-3 0-.612.371-1.18 1-1.654V7.916a5 5 0 0 1 3.041-4.6 2 2 0 0 1 3.507 -1.664 2 2 0 0 1 .411 1.664 5.002 5.002 0 0 1 3.041 4.6v1.346c.629.474 1 1.042 1 1.654 0 1.657-2.687 3-6 3Zm0 1c.694 0 1.352-.066 1.984-.16.004.054.016.105.016.16a2 2 0 0 1-4 0c0-.055.012-.106.016-.16.633.094 1.29.16 1.984.16Z" 填充="#EDD556" /> </svg> 提醒 </a> </li> <li> <a href="#" class="sub-menu-link"> <svg 宽度=“16” 高度=“16” xmlns="http://www.w3.org/2000/svg" > <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm0 2.133a5.867 5.867 0 1 0 0 11.734A5.867 5.867 0 0 0 8 2.133ZM8 3.2a4.8 4.8 0 1 1 0 9.6 4.8 4.8 0 0 1 0-9.6Zm- .533 2.667a .533.533 0 0 0 - .534.533v2.133c0 .295.24.534.534。 534h3.2a.533.533 0 0 0 0-1.067H8V6.4a.533.533 0 0 0-.533-.533Z"fill="#8E4CB6" /> </svg> 规划 </a> </li> </ul> </a> </li> <li class="dropdown"> <a href="#" class="menu"> 公司 <ul class="sub-menu2"> <li><a href="#" class="submenulink">历史</a></li> <li><a href="#" class="submenulink">我们的队伍</a></li> <li><a href="#" class="submenulink">博客</a></li> </ul> </a> </li> <li> <a href="#" class="menu">街道</a> </li> <li> <a href="#" class="menu">关于</a> </li> </ul> <!-- Right menu container --> <div class="right-menu"> <span>登录</span> <button class="register-btn">登记</button> </div> </div> </nav>
一旦完成，这就是你得到的
现在让我们花点时间关注导航栏的结构。首先，我将所有菜单项放在一个具有“left-menu”类的 ul 元素中，然后为每个菜单项创建一个 li 元素，该菜单项包含一个具有“menu”类的“a”元素。现在，对于具有下拉菜单的菜单项，我为它们分配了一个特殊的类，以便以后能够轻松地选择它们，因此具有下拉菜单的 li 元素具有一个类“dropdown”和一个包含另一个 ul 的“a”元素具有类“submenu”的元素与父 ul 元素“left-menu”具有相同的结构。
因此，总而言之，为了制作一个菜单，我们经常使用 ul 元素来排列 li 元素中的菜单项，如果菜单项有下拉菜单，我们只需在这个 li 元素中创建一个 ul 元素就可以了。
添加一些基本的 CSS 样式
：根{ --原色：#000； --secondary-color: hsl(0, 0%, 41%); --第三级：rgba(0, 0, 0, 0.2); } *{ 边距：0； 填充：0； box-sizing：边框框； font-family: 'Epilogue', sans-serif; }
使用 flexbox 和定位设置导航栏样式
我们将主要使用 css 属性 display flex，这是一个非常棒的 css 属性，必须了解。左侧菜单需要注意，因为我们必须设置 opacity: 0;对于正常情况并将其设置为不透明度：1；当有人悬停在它上面时。
：根{ --主要：#000； --次要：hsl(0, 0%, 41%); --第三级：rgba(0, 0, 0, 0.2); --fouthy: hsl(231, 58%, 41%); } *{ 边距：0； 填充：0； box-sizing：边框框； font-family: 'Epilogue', sans-serif; } 导航{ 显示：弯曲； 对齐项目：居中； justify-content: 之间的空格； 颜色：hsl(0, 0%, 41%); 填充：1em； 盒子阴影：0px 8px 16px 0px var(--tertiary); } .菜单容器{ 显示：弯曲； 弹性：1； justify-content: 之间的空格； } .左菜单{ 显示：弯曲； 边距：0； 填充：0； } .left-menu li { 列表样式：无； } .left-menu li a{ 文字装饰：无； 颜色：继承； 显示：块； 填充：5px 20px； } 。落下{ 位置：相对； } .子菜单{ 位置：绝对； 空白：nowrap； 右：0； 盒子阴影：0px 8px 16px 0px var(--tertiary); 边框半径：5px； 不透明度：0； } .sub-menu2{ 位置：绝对； 空白：nowrap； 右：-.9em； 盒子阴影：0px 8px 16px 0px var(--tertiary); 边框半径：5px； 不透明度：0； } .left-menu>li:hover>a, .sub-menu>li:hover>a,.sub-menu2>li:hover>a,.right-menu>span:hover{ 颜色：var（--primary）； } .left-menu > li:hover>a +.sub-menu,.left-menu > li:hover>a +.sub-menu2 { 不透明度：1； } .右键菜单>跨度{ 光标：指针； } .register-btn{ 边框：1px 实心 var(--secondary); 背景：透明； 填充：0.4em 0.7em； 边框半径：10px； 左边距：20px； 光标：指针； } .register-btn:悬停{ 边框：1px 实心 var(--primary); }
这是输出
使导航栏响应使用 css 媒体查询
现在我们需要让我们的导航栏响应，以便它可以适应不同的屏幕尺寸，为此我们将使用 css 媒体查询。在移动屏幕上，我们将有一个汉堡菜单，该菜单仅在具有小屏幕尺寸的移动设备上显示。为此，我们将有两个元素。我们将使用 input type=”checkbox” 并给标签一个 class=”hamburger”。以及一些脚本，用于在我们单击汉堡菜单时向菜单容器添加一个类。
<html> <body> <nav> <!-- Logo container --> <div class="logo"> <h1>折断</h1> </div> <!-- hamburger section --> <label for="input-hamburger" class="hamburger"></label> <input type="checkbox" id="input-hamburger" hidden /> <!-- Menu container --> <div class="menu-container">...</div> </nav> </body> <!-- javscript part --> <script> const hamburger = document.querySelector('.hamburger'); const menuContainer = document.querySelector('.menu-container'); hamburger.addEventListener('click',function(){ hamburger.classList.toggle("关闭"); menuContainer.classList.toggle("打开"); }) </script> </html>
现在添加此样式以使导航栏响应使用 CSS 媒体查询的移动设备，如下所示。
/* 响应部分 */ @媒体（最大宽度：616px）{ 。汉堡包{ 宽度：2em； 高度：0.25em； 显示：块； 背景颜色：#000； 位置：相对； 光标：指针； z指数：3； } .hamburger::after, .hamburger::before{ 内容： ””; 位置：绝对； 左：0； 背景颜色：继承； 宽度：继承； 身高：继承； 过渡：0.2s变换缓入出； } .hamburger::之后{ 顶部：0.6em； } .hamburger::之前{ 底部：0.6em； } .hamburger::之后{ 顶部：0.6em； } .close::after, .close::before{ 顶部：0； } 。关{ 变换：旋转（45度）； } .close::之后{ 变换：旋转（-90度）； } .菜单容器{ 弹性方向：列； 位置：固定； 顶部：0； 右：-300px； 背景颜色：#fff； 高度：100%； 宽度：50%； 填充：0px 10px； 过渡：1s 右缓入出； } .menu-container.open{ 弹性方向：列； 位置：固定； 顶部：0； 右：0px； 背景颜色：#fff； 高度：100%； 宽度：50%； 填充：0px 10px； } .left-menu > li { 边距：10px 0px； } .left-menu > li:hover>a +.sub-menu,.left-menu > li:hover>a +.sub-menu2{ 位置：相对； } .子菜单{ 左：20px； 顶部：0； 盒子阴影：无； } .sub-menu2{ 左：20px； 顶部：0； 盒子阴影：无； } .右键菜单{ 显示：弯曲； 位置：相对； 最高：-20%； 弹性方向：列； 对齐项目：居中； 证明内容：中心； } .左菜单{ 弹性方向：列； } 。标题{ 边距顶部：0； 空白：nowrap； } .register-btn{ 宽度：80%； } }
这是我们得到的
.桌面视图
.移动视图
结论
在这里，我们将在本教程的结尾处介绍如何使用下拉菜单制作响应式导航栏菜单。我希望这对你有用，并且你已经学到了一些新东西，所以不要忘记，实验是最好的学习方法，不要犹豫，自己一步一步重做本教程，尝试理解元素是如何实现的是结构化的，如果您遇到困难或想要更多资源来提高您的网页设计技能，请不要犹豫，看看 前端导师 这是一个很棒的网站，您可以在其中通过激发挑战来学习和测试您对前端开发的了解。
这就是我今天为您准备的全部内容，如果您是我文章的新读者并且喜欢我的文章，我会写一些我的个人项目并分享我对 Web 开发的了解。请确保您 在媒体上关注我 , 你也可以看看我的 推特账号
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
