DIV CSS 佈局教程網

本篇文章給大家分享基於Html和CSS3制作簡單側邊導航欄，效果簡單大方，需要的朋友可以從參考下

本文為大家分享了一個側邊導航欄CSS示例，供大家參考，具體內容如下

效果圖：

Html：

XML/Html Code復制內容到剪貼板

1. <div class="sidebar">
2. <ul>
3. <li>優先級
4. <ul>
5. <li><aonclickaonclick=""class="sidebar-selected">全部</a></li>
6. <li><aonclickaonclick="">P1</a></li>
7. <li><aonclickaonclick="">P2</a></li>
8. <li><aonclickaonclick=“" >P3</a></li>
9. <li><aonclickaonclick="">P4</a></li>
10. </ul>
11. </li>
12. </ul>
13. </div>

CSS：

CSS Code復制內容到剪貼板

1. .sidebar {
2. border-right: 1px solid #f0f2f1;
3. width: 180px;
4. float: left;
5. padding-left: 35px;
6. }
8. .sidebar>ul {
9. list-style: none;
10. padding: 0;
11. margin: 0;
12. }
14. .sidebar>ul>li {
15. font-size: 18px;
16. font-weight: 400;
17. padding: 0010px;
18. margin-top: 5px;
19. }
21. .sidebar>ul>li>ul {
22. border-top: 1px dashed rgba(0,0,0,0.1);
23. display: block;
24. list-style: none;
25. margin: 5px010px0;
26. padding: 10px0010px;
27. font-size: 14px;
28. max-height: 138px;
29. overflow: auto;
30. }
32. .sidebar a {
33. line-height: 1.5;
34. }
36. .sidebar a:hover {
37. color: #e74430;
38. cursor:pointer;
39. }
41. .sidebar-selected {
42. color: #e74430;
43. }

以上就是CSS側邊導航欄實例講解，希望對大家學習制作導航欄有所幫助。