弹性导航栏
html
<nav>
<!-- nav元素下有两种类型的元素，选项div根据需要添加多个 -->
<div class="item active">选项元素</div>
<div class="tab" ref="tab">滑动元素</div>
</nav>Typescript
const handleClick = (item: string) => {
// 两个逻辑(点击事件实现)
// 更改滑动元素的定位 -> 更改css的left
// 更改选项字体颜色 -> 更改元素的class属性
};scss
nav {
// 形状：[高度宽度,边框圆角的半径,内边距，外边距]
// [背景颜色,阴影]
// 字体设置: [行高,字体大小,颜色,字重,不可选，居中显示]
// 子元素布局：[弹性盒子，对齐方式]
// 定位:[相对定位]
.item {
// 形状: [宽高]
// 定位: [弹性盒子设置]
// 显示方式: [z轴，溢出处理，鼠标样式]
}
.tab {
// 形状: [宽高,圆角半径]
// 定位: [绝对定位，偏移]
// 外观（纯色背景）和过渡效果
}
.active {
// 字体颜色，过渡
}
}侧边导航栏
网页主体
html
<nav>
<!-- 两列表嵌套 -->
<ul class="menus">
<li class="li">
<!-- 图标库,名称 -->
<i class="fa fa-comment"></i> 名称
<!-- 子列表隐藏->宽度设为0 -->
<ul><li>内容</li></ul>
</li>
</ul>
</nav>scss
nav {
//形状与定位方式
.menus {
// 字体设置
.li {
&:hover {
// 鼠标悬浮时，列表项背景颜色改变，
ul {
// 子列表宽度变化
}
}
.fa { // 图标设置 }
ul {
// 子列表形状与定位方式，过渡效果
li {
// 列表项设置
&:hover {
// 背景颜色变化
}
}
}
}
}
}可下拉导航栏
- 消息
- 回复我的
- 收到的赞
- 我的消息
- 动态
- 收藏
- 默认收藏夹
- UI设计
- 懂得都懂
- 投稿
- 专栏投稿
- 音频投稿
- 贴纸投稿
- 视频投稿
- 投稿管理
html
<!-- 两个无序列表嵌套 -->
<ul class="nav">
<li>
<span>消息</span>
<ul><li>回复我的</li></ul>
</li>
</ul>scss
.nav {
// 弹性盒子
li {
// 长宽设置，字体设置等
&:hover {
// 颜色变化
li {
// 控制高度，透明度等
}
}
// 次列表项
ul {
li {
// 透明度为0，高度为0等设置
&:hover {
// 颜色变化
}
}
}
}
}