CSS暗色垂直菜单带图标
黑色简洁风格的导航菜单，用起来还挺顺手的。index.html和一个css文件夹，结构比较清晰，适合拿来改造或者快速上手搞个侧边栏导航。菜单项是垂直排布的，还带图标，挺有范儿的，用Font Awesome这些图标库就能搞定，兼容性也不错。
菜单布局靠的是display: flex; flex-direction: column;，写起来简单明了，响应也快。颜色风格是深色系的，常见的background-color: #333;做底，文字颜色是白的，对比。你要是想改成你自己的品牌色，直接改 CSS 就行了。
图标和文字之间的间距控制得也还行，适合内容不多的场景，比如后台管理、博客导航这些。悬停效果也加了，:hover的时候背景颜色会变，用户体验还不错。有个小细节就是当前选中项会用.active或者.current加高亮，挺贴心。
响应式这块也没落下，用了@media screen and (max-width: 768px)这种方式，在小屏下菜单会自动调整布局，要横向折叠也方便改。你在手机、平板上打开体验一下就知道了，布局基本不会乱。
如果你正在做一个需要固定侧边菜单的页面，或者想搞个简约风导航练练手，这个资源还蛮适合的。需要注意的是，图标库得自己引，比如Font Awesome或MoonIcon这些，资源里没打包哦。
相关图标库可以看看这几个：MoonIcon 图标库、Font Awesome Swift iOS 图标库，都是挺常用的素材来源。
文件大小：1.17KB
评论区