一款纯css如何实现的漂亮导航菜单(也适用于个人中心)

互联网
树缝里也漏着一两点路灯光，没精打彩的，是渴睡人的眼。春尚浅，几处山顶上的梅花却挣扎着吐出红苞来。微风柔和地吹，柔和地爱抚我的面孔。荷塘里的荷花都羞涩地打着朵。落叶随着风高低起舞。

　　今天给大家分享一款纯css实现的漂亮导航。之前为大家分享过jquery实现的个人中心导航菜单，今天这款也是适合放在个人中心。还带来图标，效果不错。一起看下效果图：

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <divclass="l-main">
  2. <divclass="menu">
  3. <headerclass="menu__header">
  4. <h1class="menu__header-title">
  5. IncomingMessages</h1>
  6. </header>
  7. <divclass="menu__body">
  8. <ulclass="nav">
  9. <liclass="nav__item"><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"class="nav__item-linkis-active">
  10. <iclass="fafa-envelopenav__item-icon"></i><spanclass="nav__item-text">News</span>
  11. <spanclass="badgebadge--warning">32</span></a></li>
  12. <liclass="nav__item"><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"class="nav__item-link"><iclass="fafa-flagnav__item-icon">
  13. </i><spanclass="nav__item-text">Priority</span><spanclass="badge">8</span></a>
  14. </li>
  15. <liclass="nav__item"><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"class="nav__item-link"><iclass="fafa-space-shuttlenav__item-icon">
  16. </i><spanclass="nav__item-text">Assigned</span><spanclass="badge">0/17</span></a>
  17. </li>
  18. <liclass="nav__item"><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"class="nav__item-link"><iclass="fafa-archivenav__item-icon">
  19. </i><spanclass="nav__item-text">Archived</span><spanclass="badge">3</span></a>
  20. </li>
  21. <liclass="nav__item"><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"class="nav__item-link"><iclass="fafa-trashnav__item-icon">
  22. </i><spanclass="nav__item-text">Deleted</span><spanclass="badge">9</span></a>
  23. </li>
  24. <liclass="nav__item"><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"class="nav__item-link"><spanclass="nav__item-text">
  25. Showall</span></a></li>
  26. </ul>
  27. </div>
  28. </div>
  29. <divclass="menumenu--small">
  30. <headerclass="menu__header">
  31. <h1class="menu__header-title">
  32. Incoming</h1>
  33. </header>
  34. <divclass="menu__body">
  35. <ulclass="nav">
  36. <liclass="nav__item"><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"class="nav__item-linkis-active"><iclass="fafa-envelopenav__item-icon">
  37. </i><spanclass="badgebadge--warning">32</span></a></li>
  38. <liclass="nav__item"><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"class="nav__item-link"><iclass="fafa-flagnav__item-icon">
  39. </i><spanclass="badge">8</span></a></li>
  40. <liclass="nav__item"><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"class="nav__item-link"><iclass="fafa-space-shuttlenav__item-icon">
  41. </i><spanclass="badge">0/17</span></a></li>
  42. <liclass="nav__item"><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"class="nav__item-link"><iclass="fafa-archivenav__item-icon">
  43. </i><spanclass="badge">3</span></a></li>
  44. <liclass="nav__item"><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"class="nav__item-link"><iclass="fafa-trashnav__item-icon">
  45. </i><spanclass="badge">9</span></a></li>
  46. <liclass="nav__item"><arel="nofollow noopener noreferrer" href="https://www.haodaima.com"class="nav__item-link"><spanclass="nav__item-text">
  47. Showall</span></a></li>
  48. </ul>
  49. </div>
  50. </div>
  51. </div>

　　css代码：

CSS Code复制内容到剪贴板
  1. body
  2. {
  3. background:#F4F4F4;
  4. font-family:Arial,sans-serif;
  5. font-size:14px;
  6. font-weight:lighter;
  7. }
  9. .l-main
  10. {
  11. width:530px;
  12. margin:0auto;
  13. }
  15. .menu
  16. {
  17. width:250px;
  18. margin:40px;
  19. background:#fff;
  20. box-shadow:01px4pxrgba(0,0,0,0.3);
  21. border-radius:5px;
  22. float:left;
  23. }
  25. .menu__header
  26. {
  27. background:#4B4F55;
  28. border-bottom:1pxsolid#353A40;
  29. border-radius:5px5px00;
  30. }
  32. .menu__header-title
  33. {
  34. color:#fff;
  35. padding:15px;
  36. text-shadow:01px0rgba(0,0,0,0.4);
  37. }
  39. .menu__body
  40. {
  41. border-radius:005px5px;
  42. }
  44. .menu--small
  45. {
  46. width:110px;
  47. }
  49. .nav
  50. {
  51. list-style:none;
  52. }
  54. .nav__item
  55. {
  56. position:relative;
  57. }
  59. .nav__item-link
  60. {
  61. padding:10px15px;
  62. text-decoration:none;
  63. color:#8B8E93;
  64. display:block;
  65. border-bottom:1pxsolid#F0F0F0;
  66. }
  67. .nav__item-link:hover
  68. {
  69. background:#f0f0f0;
  70. }
  71. .nav__item-link.is-active
  72. {
  73. background:#6E757F;
  74. color:#fff;
  75. border-bottom-color:#4B4F55;
  76. box-shadow:01px0#7A828Dinset;
  77. }
  78. .nav__item-link.is-active:after
  79. {
  80. content:'';
  81. display:block;
  82. position:absolute;
  83. top:50%;
  84. rightright:-6px;
  85. margin-top:-6px;
  86. border-top:6pxsolidtransparent;
  87. border-bottom:6pxsolidtransparent;
  88. border-left:6pxsolid#6E757F;
  89. }
  90. .nav__item-link.is-active.nav__item-icon
  91. {
  92. color:#fff;
  93. }
  94. .nav__item:last-child.nav__item-link
  95. {
  96. border-bottom:none;
  97. }
  99. .nav__item-icon
  100. {
  101. color:#D2D5DA;
  102. width:20px;
  103. text-align:center;
  104. font-size:18px;
  105. margin-right:10px;
  106. }
  108. .badge
  109. {
  110. font-size:12px;
  111. padding:2px8px;
  112. border:1pxsolid#D1D1D1;
  113. border-radius:10px;
  114. position:absolute;
  115. top:10px;
  116. rightright:15px;
  117. }
  119. .badge--warning
  120. {
  121. background:#ED373F;
  122. border-color:#ED373F;
  123. }

　　以上就是今天分享的一款纯css实现的漂亮导航。谢谢阅读，希望能帮到大家，请继续关注，我们会努力分享更多优秀的文章。

您可能有感兴趣的文章
设计适用于打印的CSS样式
纯CSS打造忙碌光标适用于忙碌等待的情况
如何使用条件注释判断 IE 浏览器版本适用于IE5.0及以上版本
css如何实现适用于团购网站的橙色导航菜单代码
css让页脚保持在底部位置的四种方案