日落沧海看夕阳，万丈霞光谱辉煌。轻叹美景难留住，只因月色要锋芒!你在桥上看风景，看风景的人在桥下看你。你只知道自己吃了韭菜盒子，却不知道别人在盒子里还加了鸡蛋。
本文为大家分享了一个侧边导航栏css示例，供大家参考，具体内容如下
效果图：
html：
XML/HTML Code复制内容到剪贴板
- <divclass="sidebar">
- <ul>
- <li>优先级
- <ul>
- <li><aonclickaonclick=""class="sidebar-selected">全部</a></li>
- <li><aonclickaonclick="">P1</a></li>
- <li><aonclickaonclick="">P2</a></li>
- <li><aonclickaonclick=“">P3</a></li>
- <li><aonclickaonclick="">P4</a></li>
- </ul>
- </li>
- </ul>
- </div>
css：
CSS Code复制内容到剪贴板
- .sidebar{
- border-right:1pxsolid#f0f2f1;
- width:180px;
- float:left;
- padding-left:35px;
- }
- .sidebar>ul{
- list-style:none;
- padding:0;
- margin:0;
- }
- .sidebar>ul>li{
- font-size:18px;
- font-weight:400;
- padding:0010px;
- margin-top:5px;
- }
- .sidebar>ul>li>ul{
- border-top:1pxdashedrgba(0,0,0,0.1);
- display:block;
- list-style:none;
- margin:5px010px0;
- padding:10px0010px;
- font-size:14px;
- max-height:138px;
- overflow:auto;
- }
- .sidebara{
- line-height:1.5;
- }
- .sidebara:hover{
- color:#e74430;
- cursor:pointer;
- }
- .sidebar-selected{
- color:#e74430;
- }
以上就是css侧边导航栏实例讲解，希望对大家学习制作导航栏有所帮助。
![]("./search_ico.png)