关键词：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style> 7 html,body,ul,li{ 8 padding:0; 9 margin: 0; 10 } 11 body{ 12 width:100%; 13 height:1700px; 14 } 15 .div{ 16 width:160px; 17 height:auto; 18 position:fixed; 19 left: 0; 20 top:50%; 21 margin-top: -60px; 22 23 } 24 .ul-a{ 25 background-color: #333; 26 color: #fff; 27 width:160px; 28 height:auto; 29 30 } 31 .title{ 32 text-align: center; 33 width:160px; 34 height:30px; 35 line-height: 30px; 36 cursor: pointer; 37 } 38 .ul-a li:hover ul{ 39 display: block; 40 } 41 42 .ul-a li{ 43 text-align: center; 44 width:160px; 45 height:auto; 46 border-bottom: 1px solid #eee; 47 } 48 .ul-b{ 49 50 display: none; 51 width:160px; 52 height:auto; 53 background-color: #eee; 54 color:#333; 55 border-bottom: 1px dashed #333; 56 text-align: center; 57 } 58 .ul-b li{ 59 position:relative; 60 cursor: pointer; 61 width:160px; 62 height:30px; 63 line-height: 30px; 64 color:#333; 65 border-bottom: 1px dashed #333; 66 text-align: center; 67 } 68 .ul-b li:hover .list-3{ 69 display:block; 70 } 71 .list-3{ 72 display: none; 73 width:160px; 74 height:93px; 75 background-color: #aaa; 76 color:#333; 77 cursor: pointer; 78 position: absolute; 79 left: 160px; 80 top:0; 81 82 } 83 .list-3-list{ 84 line-height: 30px; 85 width:160px; 86 height:30px; 87 border-bottom: 1px solid #333; 88 text-align: center; 89 } 90 </style> 91 </head> 92 <body> 93 <div class="div"> 94 <ul class="ul-a"> 95 <li> 96 <div class="title">一级目录</div> 97 <ul class="ul-b"> 98 <li>二级目录 99 <div class="list-3"> 100 <div class="list-3-list">三级栏目</div> 101 <div class="list-3-list">三级栏目</div> 102 <div class="list-3-list">三级栏目</div> 103 </div> 104 </li> 105 <li>二级目录 106 <div class="list-3"> 107 <div class="list-3-list">三级栏目</div> 108 <div class="list-3-list">三级栏目</div> 109 <div class="list-3-list">三级栏目</div> 110 </div> 111 </li> 112 <li>二级目录 113 <div class="list-3"> 114 <div class="list-3-list">三级栏目</div> 115 <div class="list-3-list">三级栏目</div> 116 <div class="list-3-list">三级栏目</div> 117 </div> 118 </li> 119 </ul> 120 </li> 121 <li> 122 <div class="title">一级目录</div> 123 <ul class="ul-b"> 124 <li>二级目录 125 <div class="list-3"> 126 <div class="list-3-list">三级栏目</div> 127 <div class="list-3-list">三级栏目</div> 128 <div class="list-3-list">三级栏目</div> 129 </div> 130 </li> 131 <li>二级目录 132 <div class="list-3"> 133 <div class="list-3-list">三级栏目</div> 134 <div class="list-3-list">三级栏目</div> 135 <div class="list-3-list">三级栏目</div> 136 </div> 137 </li> 138 <li>二级目录 139 <div class="list-3"> 140 <div class="list-3-list">三级栏目</div> 141 <div class="list-3-list">三级栏目</div> 142 <div class="list-3-list">三级栏目</div> 143 </div> 144 </li> 145 </ul> 146 </li> 147 <li> 148 <div class="title">一级目录</div> 149 <ul class="ul-b"> 150 <li>二级目录 151 <div class="list-3"> 152 <div class="list-3-list">三级栏目</div> 153 <div class="list-3-list">三级栏目</div> 154 <div class="list-3-list">三级栏目</div> 155 </div> 156 </li> 157 <li>二级目录 158 <div class="list-3"> 159 <div class="list-3-list">三级栏目</div> 160 <div class="list-3-list">三级栏目</div> 161 <div class="list-3-list">三级栏目</div> 162 </div> 163 </li> 164 <li>二级目录 165 <div class="list-3"> 166 <div class="list-3-list">三级栏目</div> 167 <div class="list-3-list">三级栏目</div> 168 <div class="list-3-list">三级栏目</div> 169 </div> 170 </li> 171 </ul> 172 </li> 173 </ul> 174 </div> 175 </body> 176 </html>
效果图：
源码分享jquery+css实现侧边导航栏
jquery+css实现侧边导航栏 最近做项目的时候，突然想用一个侧边导航栏，网上找了几个插件，有的太丑而且不太符合我的预期。与其修改别人的代码，不如自己来写一个了。废话不多说先上图，感兴趣的请... 查看详情
全高可滚动侧边栏
】全高可滚动侧边栏【英文标题】：Scrollablesidebarwithfullheight【发布时间】：2015-12-0117:41:29【问题描述】：我目前正在编写一个Angular应用程序，该应用程序具有顶部固定的引导导航栏和一个边栏容器，该容器由一个边栏标题和一... 查看详情
jquery+css3侧边栏导航菜单
效果体验：http://hovertree.com/texiao/jquery/37/代码如下：<!doctypehtml><htmllang="zh"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><me 查看详情
实现侧边伸缩导航栏
...(div2)放页面主要内容，然后两个div（宽高都取100%）绝对定位，让div2的z-index属性大于div1的z-index,这样div2就覆盖住了div1，变相的来说也就是div1隐藏起来 查看详情
侧边栏导航
侧边栏效果，至于页面左部分。点击menu菜单，出现侧边栏，点击关闭，关闭菜单栏。 效果图：1.首先要引入boostrap的css库、字体图标。 2.html如下：<divid="menu"><button>close</button><ul><li><h3><spanclass... 查看详情
div+css+position实现简单的纵向导航栏
完成效果：这应该是很简单的纵向导航栏了。OK，进入正题首先，我们看上面的效果图可以分析得出，要实现这个效果需要用到的技术点1.hover2.position3.布局我认为在这个效果的实现上最需要注意的就是position,当我们在给子元素用... 查看详情
给自己的博客添加一个侧边栏(代码片段)
如何不使用JS，给自己的博客添加一个酷酷的侧边导航栏呢？详情请查看右侧导航栏，这是我自己做的一个导航栏，分别作用是：展示手机号，展示QQ，展示微信，跳转自己想要的网址（这里我放的是自己的还未完成的博客... 查看详情
物化 CSS 侧边栏
】物化CSS侧边栏【英文标题】：MaterializeCSSSidebar【发布时间】：2021-11-2514:14:47【问题描述】：我是物化css的新手，我坚持在导航栏和页脚之间创建侧栏。这是我使用侧边栏时得到的这就是我想要实现的感谢您的帮助【问题讨论】... 查看详情
js+css+html实现固定侧边栏效果(代码片段)
js+css+html实现固定侧边栏效果1案例描述2编写HTML代码3编写CSS代码4编写JavaScript代码部分5全部代码6position:fixed;说明1案例描述我们在很多网站都看到过，当页面向下滚动时，侧边的导航栏并没有发生位置的改变，... 查看详情
网页侧边浮动条的实现
...看到的浮动条一直固定在浏览器的某个位置，这需要用到定位。position有相对定位relative，绝对定位absolut，而我们所用到的是相对浏览器定位fix值。而浮动栏里的背景图，需要一点一点移动雪碧图调到合适位置。这就需要熟练使... 查看详情
关于position：fixed的注意点(代码片段)
position:fixed是CSS固定定位，一般用于导航栏吸顶效果。该属性使用的时候要注意一些细节： 1.固定定位的盒子必须有宽度 也就是必须设置width，如果没有设置宽度，那么该盒子的宽度就是内容撑开的宽度，如果没有内... 查看详情
导航栏折叠与位置元素冲突
...1-1703:10:08【问题描述】：我的网站有问题，这是一个商店定位器页面。但是，如果您在PC中调整窗口大小，就好像您在移动分辨率中一样，当您切换导航栏折叠时，导航栏将位于侧边栏下方，看起来非常难看。我的CSS有问题吗？D... 查看详情
如何一起使用底部导航栏和侧边导航栏，我的侧边导航按钮不显示，而是底部导航
】如何一起使用底部导航栏和侧边导航栏，我的侧边导航按钮不显示，而是底部导航【英文标题】：Howtousebottomnavigationbarandsidenavigationbartogether,mysidenavigationbuttonisnotshowingwhenibutbottomnavigation【发布时间】：2020-01-2910:54:24【问题描述... 查看详情
滚动时如何让侧边栏对齐到顶部？
】滚动时如何让侧边栏对齐到顶部？【英文标题】：HowdoIgetmysidebartosnaptothetopwhenscrolling?【发布时间】：2016-08-1122:59:09【问题描述】：我有一个在顶部偏移91像素的侧边栏，以容纳页面顶部的导航栏标题，它在滚动时移动，但我希... 查看详情
导航栏定位元素
】导航栏定位元素【英文标题】：NavigationBarpositioningElements【发布时间】：2013-04-1123:22:46【问题描述】：您好，这是我需要构建的：Mockup我停留在导航栏，这里是CSS：/*CSS文档*/bodybackground:#fffurl(bg.jpg)repeat-x;margin:0;padding:0;height:1800... 查看详情
bootstrap侧边栏导航栏
http://blog.csdn.net/shangmingchao/article/details/49763351实测效果图： 查看详情
CSS 位置帮助（动画内容结束时显示的水平侧边栏）
】CSS位置帮助（动画内容结束时显示的水平侧边栏）【英文标题】：CSSPositionHelp(horizontalsidebarshowingupwhenanimatecontentover)【发布时间】：2012-11-0316:47:16【问题描述】：让我尽我所能解释我想要发生的事情，给你看我的代码，希望我... 查看详情