教程地址:原文地址(YouTube)
B站教程:原文转载(bilibili)
两个视频的内容相同,第二个为转载
效果图
代码区
html
<header>
<div class="inner-width">
<a href="#" class="logo"><img src="logo.png" alt=""></a>
<i class="menu-toggle-btn fas fa-bars"></i>
<nav class="navigation-menu">
<a href="#"><i class="fas fa-home home"></i> Home</a>
<a href="#"><i class="fas fa-align-left about"></i> About</a>
<a href="#"><i class="fab fa-buffer works"></i> Works</a>
<a href="#"><i class="fas fa-users team"></i> Team</a>
<a href="#"><i class="fas fa-headset contact"></i> Contact</a>
</nav>
</div>
</header>
CSS
*{
margin: 0; /* 外边距 */
padding: 0; /* 内边距 */
text-decoration: none; /* 文字装饰 */
font-family: "Open Sans",sans-serif; /* 字体样式 */
}
header{
height: 90px; /* 高度 */
background: #2f3640; /* 背景颜色 */
}
.inner-width{
max-width: 1000px; /* 最大高度 */
padding: 0 10px;
margin: auto;
}
.logo{
float: left; /* 左浮动 */
padding: 20px 0;
}
.logo img{
height: 50px;
}
.navigation-menu{
float: right;
display: flex; /* 弹性盒模型 */
align-items: center; /* 交叉轴对齐方式 */
min-height: 90px;
}
.navigation-menu a{
margin-left: 10px;
color: #ddd; /* 颜色 */
text-transform: uppercase; /* 大写 */
font-size: 14px; /* 字号 */
padding: 12px 20px;
border-radius: 4px; /* 圆角 */
transition: .3s linear; /* 过渡时间 */
}
.navigation-menu a:hover{
background: #fff;
color: #2f3640;
transform: scale(1.1); /* 放大 */
}
.navigation-menu i{
margin-right: 8px;
font-size: 16px;
}
.menu-toggle-btn{
float: right;
height: 90px;
line-height: 90px !important; /* 行高,权重等级 */
color: #fff;
font-size: 26px;
display: none !important; /* */
cursor: pointer;
}
/*切换样式后*/
@media screen and (max-width:700px) {
.menu-toggle-btn{
display: block !important;
}
.navigation-menu{
position: fixed; /* 根据浏览器定位 */
width: 100%;
max-width: 400px;
background: #172b4d;
top: 90px;
right: 0;
display: none;
padding: 20px 40px;
box-sizing: border-box;
}
.navigation-menu::before{
content: "";
border-left: 10px solid transparent; /* 透明 */
border-right: 10px solid transparent;
border-bottom: 10px solid #172b4d;
position: absolute;
top: -10px;
right: 10px;
}
.navigation-menu a{
display: block; /* 切换为盒模型 */
margin: 10px 0;
}
.navigation-menu.active{
display: block;
}
}
.home{
color: #ff6b6b;
}
.about{
color: #0abde3;
}
.works{
color: #feca57;
}
.team{
color: #5f27cd;
}
.contact{
color: #1dd1a1;
}
JS
// 图标和js网址
// https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
// https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"
// 点击时切换样式
$(".menu-toggle-btn").click(function(){
$(this).toggleClass("fa-times");
$(".navigation-menu").toggleClass("active");
});
教程地址:原文地址(YouTube)
B站教程:原文转载(bilibili)