首页 > 其他分享> > CSS中的响应式导航栏

CSS中的响应式导航栏

2022-09-06 00:34:34 作者：互联网

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]