侧边导航栏css示例
效果展示:
html:
<div class="sidebar"> <ul> <li>优先级 <ul> <li><aonclick=""class="sidebar-selected">全部</a></li> <li><aonclick="">P1</a></li> <li><aonclick="">P2</a></li> <li><aonclick=“" >P3</a></li> <li><aonclick="">P4</a></li> </ul> </li> </ul> </div>
css:
.sidebar { border-right: 1px solid #f0f2f1; width: 180px; float: left; padding-left: 35px; } .sidebar>ul { list-style: none; padding:; margin:; } .sidebar>ul>li { font-size: 18px; font-weight:; padding: 0010px; margin-top: 5px; } .sidebar>ul>li>ul { border-top: 1px dashed rgba(0,0,0,0.1); display: block; list-style: none; margin: 5px010px0; padding: 10px0010px; font-size: 14px; max-height: 138px; overflow: auto; } .sidebar a { line-height: 1.5; } .sidebar a:hover { color: #e74430; cursor:pointer; } .sidebar-selected { color: #e74430; }
侧边导航栏css示例的更多相关文章
- 【源码分享】jquery+css实现侧边导航栏
jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...
- html+css写出响应式侧边导航栏
html部分:先写用div画好六个导航的卡片,再利用css添加响应效果 <div class='card-holder'> <div class='card-wrapper'> ...
- [置顶]
bootstrap自定义样式-bootstrap侧边导航栏的实现
前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单 ...
- 【机器学习实践】Jupyter Notebook安装 侧边导航栏功能 操作及其他常用扩展功能介绍
安装过程: 1. 首先我们引入jupyter_contrib_nbextension这个第三方库. 2. 在Anaconda Promot中输入命令: pip install jupyter_con ...
- Android 新兴的UI模式——侧边导航栏【转】
侧边导航栏也就是大家熟知的SliddingMenu,英文也叫Fly-In App Menu.Side Navigation等.当然谷歌现在已经推出类似这个效果的组件--Navigation Drawe ...
- jQuery实现侧边导航栏效果
效果图: 效果体验:http://keleyi.com/keleyi/phtml/jqmenu/2.htm 以下是完整代码: <!DOCTYPE html> <html> &l ...
- 使用bootstrap3.0搭建一个具有自定义风格的侧边导航栏
由于工作变动,新的项目组,可能会涉及到更多的类似于后台管理系统这一类的项目,而且开发可能更加偏向于传统型的开发,希望今后能够在新的项目中能够用得上vuejs吧! 接手项目的时候,就是一个后台管理系统, ...
- iOS开发-仿大众点评iPad侧边导航栏
昨天其实已经写了一篇侧边栏的文章,不过感觉还不是很清晰,这篇文章算是补充吧,iPad上看了大众点评的侧边栏,基本上百分之九十类似,具体效果可参考下图: 对比昨天主要做了两个修改,一个是图片和文字的显示 ...
- layui禁用侧边导航栏点击事件
layui是一款优秀的前端模块化css框架,作者是贤心 —— 国内的一位前端大佬. 我用layui做过两个完整的项目,对她的感觉就是,这货非常适合做后台管理界面,且基于jquery,很容易上手.当然, ...
随机推荐
- 使用sysbench 进行msyql oltp压力测试
安装参考: https://github.com/akopytov/sysbench#linux#参数说明 需要说明的选项: mysql-db=dbtest1a:测试使用的目标数据库,这个库名要事先创 ...
- 几个简单易懂的排序算法php
几个简单易懂的排序算法.排序算法,在应用到解决实际问题的时候(由于不一定总是数字排序),重点要分析出什么时候该交换位置. <?php // 冒泡排序 function bubble_sort(a ...
- Windows安装mapnik
windows安装mapnik,首先去官网下载windows压缩包:http://mapnik.org/,解压位置C:\mapnik-v2.2.0 然后下载安装python2.7,安装位置 C:\P ...
- .NET Core中向已存在文件的特定位置写入数据
本例使用.NET Core向一个文本文件中的特定位置写入数据,来模拟文件上传中的断点续传是如何在服务器端实现的. 新建一个.NET Core控制台项目FileContinueToWrite,其Prog ...
- 虚拟机上不能使用CUDA
虚拟机的显卡是虚拟的,不能使用CUDA(至少很难),搞了一天才晃过神来: lspci 查找目前主机的硬件配备 用 grep -i 进行大小写无关的搜索
- Docker安装Python3.5
方法一.通过 Dockerfile 构建 创建Dockerfile 首先,创建目录python,用于存放后面的相关东西. mkdir -p ~/python ~/python/myapp myapp目 ...
- 【webstorm】project目录树显示不出
问题原因:webstorm自动生成的配置文件 .idea/modules.xml损坏. 解决: 1.关掉webstorm: 2.删除该项目下的.idea文件夹(如果隐藏,请设置显示隐藏文件夹): 3. ...
- Struts2_learning
一.这是我学习struts2所做的一个记录,因为整个过程较为麻烦,所以,记录下来,以便以后使用 过程: 步骤: 1)dynamic web project 2)jars 3)struts.xml pa ...
- Linux服务-openssh
目录 1. 使用 SSH 访问远程命令行 1.1 OpenSSH 简介 1.2 SSH 版本 1.3 SSH 认证方式 1.4 openSSH 的工作模式 1.5 Secure Shell 示例 1. ...
- Android APK 签名比对(转)
Android apk签名的过程 1. 生成MANIFEST.MF文件: 程序遍历update.apk包中的所有文件(entry),对非文件夹非签名文件的文件,逐个生成SHA1的数字签名信息,再用Ba ...