标签：links navbar li 响应 对齐 导航 链接 CSS
CSS中的响应式导航栏
大家好，今天我将向您展示如何使用 HTML、CSS 和 Javascript 创建响应式导航栏。
让我们开始吧…
HTML -
<nav class="navbar">
<div class="brand-title">品牌</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>
<a href="#">家</a>
</li>
<li>
<a href="#">接触</a>
</li>
<li>
<a href="#">关于</a>
</li>
</ul>
</div>
</nav>
- 我们将所有内容都包装在 nav 标签中，并为其提供了 navbar 类。
- 然后我们为徽标或品牌名称创建了 1 个 div，为小屏幕或移动视图创建了 1 个锚标签，将其用作小屏幕或移动视图的切换按钮，在其中我们创建了 3 个跨度标签来为汉堡包图标创建条形图，1 个 div 用于包含导航栏链接的导航链接。
CSS -
* {
框尺寸：边框框；
} 身体 {
边距：0；
填充：0；
}
-
box-sizing 属性允许我们在元素的总宽度和高度中包含填充和边框。
-
删除正文的默认填充和边距。
.导航栏{
显示：弹性；
对齐内容：空格之间；
对齐项目：中心；
背景颜色：#333;
白颜色;
} -
使导航栏弯曲，并在它们之间提供空间，品牌名称将位于一端的左侧，链接将位于另一端的右侧。
-
对齐项目将垂直对齐项目。
.品牌标题{
字体大小：1.5rem；
边距：.5rem
} .navbar 链接 ul{
边距：0；
填充：0；
显示：弹性；
} .navbar-links li{
列表样式：无；
} .navbar-links li a{
文字装饰：无；
白颜色;
填充：1rem；
显示：块
} .navbar-links li:hover{
背景颜色：#555;
} -
样式化品牌元素并移除 ul 标签的默认边距和内边距并使其显示为 flex。
-
样式化链接和锚标记并删除默认行为。
.切换按钮{
位置：绝对；
顶部：.75rem；
右：1rem；
显示：无；
弹性方向：列；
justify-content: 之间的空格；
宽度：30px；
高度：21px；
} .toggle-button .bar{
高度：3px；
宽度：100%；
背景颜色：白色；
边框半径：10px；
} -
设置切换按钮的样式，使其垂直排列，以便其内部的条垂直对齐。
-
绝对定位以使其粘在右顶端。
-
display: none 在大屏幕上隐藏它。
-
对切换按钮内的栏进行样式设置。
@媒体屏幕和（最大宽度：600px）{
.切换按钮{
显示：弹性；
}
.导航栏链接{
显示：无；
宽度：100%；
}
} -
使用媒体查询定位小于 600 像素的屏幕
-
当屏幕尺寸小于 600 像素时，使切换按钮弯曲。
-
当屏幕尺寸小于 600 像素时隐藏导航栏链接。
@媒体屏幕和（最大宽度：600px）{
.
.
.导航栏{
弹性方向：列；
对齐项目：弹性开始；
}
.navbar 链接 ul {
弹性方向：列；
宽度：100%；
}
.navbar 链接 ul li {
文本对齐：居中；
} .navbar-links li a {
填充：.7rem 1rem；
}
} -
使用 flex 方向使导航栏垂直对齐。
-
使用 flex 方向使链接垂直对齐，并使元素宽度为 100% 以覆盖整行。
-
使用 li 元素的 text-align 属性使链接居中。
@媒体屏幕和（最大宽度：600px）{
.
.
.navbar-links.active{
显示：弹性
}
}d -
创建此活动类样式以使用 javascript 切换它，当切换此类时，较小屏幕上的导航栏将具有下拉效果。
完整的 CSS 代码 -
* {
框尺寸：边框框；
} 身体 {
边距：0；
填充：0；
} .导航栏{
显示：弹性；
对齐内容：空格之间；
对齐项目：中心；
背景颜色：#333;
白颜色;
} .品牌标题{
字体大小：1.5rem；
边距：.5rem
} .navbar 链接 ul{
边距：0；
填充：0；
显示：弹性；
} .navbar-links li{
列表样式：无；
} .navbar-links li a{
文字装饰：无；
白颜色;
填充：1rem；
显示：块
} .navbar-links li:hover{
背景颜色：#555;
} .切换按钮{
位置：绝对；
顶部：.75rem；
右：1rem；
显示：无；
弹性方向：列；
justify-content: 之间的空格；
宽度：30px；
高度：21px；
} .toggle-button .bar{
高度：3px；
宽度：100%；
背景颜色：白色；
边框半径：10px；
} @媒体屏幕和（最大宽度：600px）{
.切换按钮{
显示：弹性；
}
.导航栏链接{
显示：无；
宽度：100%；
} .导航栏{
弹性方向：列；
对齐项目：弹性开始；
}
.navbar 链接 ul {
弹性方向：列；
宽度：100%；
}
.navbar 链接 ul li {
文本对齐：居中；
} .navbar-links li a {
填充：.7rem 1rem；
} .navbar-links.active{
显示：弹性
} }
Javascript -
const toggleButton = document.getElementsByClassName("toggle-button")[0];
const navbarLinks = document.getElementsByClassName("navbar-links")[0]; toggleButton.addEventListener("click",() => {
navbarLinks.classList.toggle("活动")
})
- 使用 DOM 定位切换按钮和导航栏链接。
- 然后添加一个点击事件来切换按钮并使用 toggle() 方法切换“活动”类。
感谢您查看这篇文章
你可以联系我——
Instagram — https://www.instagram.com/supremacism__shubh/
领英—— https://www.linkedin.com/in/shubham-tiwari-b7544b193/
电子邮件 - [email protected]
^^您可以通过以下链接捐款帮助我谢谢 ^^
☕ → https://www.buymeacoffee.com/waaduheck ←
还要检查这些帖子
https://dev.to/shubhamtiwari909/js-push-and-pop-with-arrays-33a2/edit
https://dev.to/shubhamtiwari909/tostring-in-js-27b
https://dev.to/shubhamtiwari909/join-in-javascript-4050
[
JS 中的数组方法 - sort()
大家好，今天我将讨论 Javascript 数组 sort() 方法。排序是一个过程......
开发者
](https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90)
如果这篇文章对您有帮助，请点击下方的鼓掌按钮数次以表示您对作者的支持
开发人员：通过跟上重要的事情来学习和成长， 加入法恩。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
本文链接：https://www.qanswer.top/17444/11090600
标签：links,navbar,li,响应,对齐,导航,链接,CSS 来源： https://www.cnblogs.com/amboke/p/16660200.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。