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

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

标签: 适用于