基于html和CSS3制作简单侧边导航栏

时间：2021-05-08

本文为大家分享了一个侧边导航栏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侧边导航栏实例讲解，希望对大家学习制作导航栏有所帮助。

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章