您现在的位置是：网站首页> 编程资料编程资料

基于html和CSS3制作简单侧边导航栏使用HTML+Css+transform实现3D导航栏的示例代码html+css+js实现导航栏滚动渐变效果Html5导航栏吸顶方案原理与对比实现html5 横向滑动导航栏的方法示例html+css 实现简易导航栏功能基于html和CSS3制作酷炫的导航栏使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)

2021-09-05 1044人已围观

简介 本篇文章给大家分享基于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="">P1a>li>  
  7.                 <li><aonclickaonclick="">P2a>li>  
  8.                 <li><aonclickaonclick=“" >P3a>li>  
  9.                 <li><aonclickaonclick="">P4a>li>  
  10.             ul>  
  11.         li>  
  12.     ul>  
  13. div>  
  14.   

css：

CSS Code复制内容到剪贴板
  1. .sidebar {   
  2.     border-right: 1px solid #f0f2f1;   
  3.     width: 180px;   
  4.     float: left;   
  5.     padding-left: 35px;   
  6. }   
  7.   
  8. .sidebar>ul {   
  9.     list-style: none;   
  10.     padding: 0;   
  11.     margin: 0;   
  12. }   
  13.   
  14. .sidebar>ul>li {   
  15.     font-size: 18px;   
  16.     font-weight: 400;   
  17.     padding: 0010px;   
  18.     margin-top: 5px;   
  19. }   
  20.   
  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. }   
  31.   
  32. .sidebar a {   
  33.     line-height: 1.5;   
  34. }   
  35.   
  36. .sidebar a:hover {   
  37.     color: #e74430;   
  38.     cursor:pointer;   
  39. }   
  40.   
  41. .sidebar-selected {   
  42.      color: #e74430;   
  43. }   

以上就是css侧边导航栏实例讲解，希望对大家学习制作导航栏有所帮助。

上一篇：非常漂亮的CSS3百叶窗焦点图动画纯CSS实现图片百叶窗展示效果示例

下一篇：细说CSS中margin属性的使用 浅谈css margin重叠CSS 之margin知识点(必看)css布局之负margin妙用及其他实现CSS的margin属性在页面布局中的使用攻略深入解析CSS中margin属性的使用CSS中使用负margin值来调整居中位置CSS属性探秘系列(六)：margin解决margin 外边距合并问题

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网