html左边导航栏点击下拉显示内容,html导航栏-简单运用display设置左拉和下拉导航栏...
运用display的block设置左拉导航栏,设置下拉导航栏。
1左拉导航栏
index.html
- 第一级d导航
- heheh
- heheh
- heheh
- 第二级导航
- skdjfld
- skdjfld
- skdjfld
- 第三季导航
- dfasdf
- dfasdf
- dfasdf
index.css
*{
margin: 0;
padding:0;
}
li{
list-style: none;
}
.div1{
width: 100px;
height: 120px;
background: #aa1111;
margin: 100px;
border:1px solid #ccc;
border-bottom:none;
}
ul{
list-style: none;
margin: 0px;
padding: 0px;
/*text-align: center;*/
}
.dao{
width:100%;
height:40px ;
line-height: 40px;
position: relative;
/*padding:0px;*/
border-bottom: 1px solid #ccc;
}
.sub{
position: absolute;
left: 100px;
background: #494A5F;
top:0;
display: none;
}
.li1:hover .sub1{
display: block;
}
.li2:hover .sub2{
display: block;
}
.li3:hover .sub3{
display: block;
}
主要构思是：将
中的
- 部分用display：none隐藏。当：hover时应display：block来出现左导航。
下拉导航：
index.html
- hah
- doudou
- doudou
- haerh
- haaah
css
*{
margin:0;
padding: 0;
}
.ul1{
display: inline-block;
/*text-decoration: none;*/
width: 300px;
height: 40px;
margin: 150px;
float: left;
position: relative;
}
li{
text-align: center;
line-height: 40px;
list-style: none;
display: block;
background: #2fa0ec;
border:1px solid;
width: 100px;
height:40px ;
}
.li1{
width: 100px;
height: 40px;
position: absolute;
float: left;
}
.li2{
width: 100px;
height: 40px;
display: block;
position: absolute;
float: left;
left: 100px;
}
.li3{
width: 100px;
height: 40px;
display: block;
position: absolute;
float: right;
left: 200px;
top:0;
}
.second{
top:40px;
left: -2px;
border: 1px solid #ccc;
display: none;
position: absolute;
margin: 0;
}
li:hover{
background: #AA66EE;
}
.li1:hover .second{
/*display: inline-block;*/
display: block;
}
通过设置第一级导航的left值那么就依次float在左边。
html左边导航栏点击下拉显示内容,html导航栏-简单运用display设置左拉和下拉导航栏...相关推荐
- 纯HTML,CSS实现点击图片，显示内容
2019独角兽企业重金招聘Python工程师标准>>> 之前实现过用纯js实现轮播图切换,以及点击图片显示相关介绍信息,现在用纯HTML,CSS实现一个小功能,这个是跟一个美国朋友学 ...
- php 点击下拉显示内容,php+ajax实现仿百度查询下拉内容功能示例
本文实例讲述了php+ajax实现仿百度查询下拉内容功能.分享给大家供大家参考,具体如下: 运行效果如下: html代码: Document body{ margin:0; padding: 0; } ...
- 【opencv】8.获取鼠标动作(滑轮滚动，左键按下，右键按下，鼠标移动)并进行相应处理
获取鼠标动作进行相应处理 int main(){cv::imshow("EnvFusion", img); //这里显示一个窗口/*<!-- 在窗口上进行鼠标操作就使用 cv ...
- linux双屏显示不同内容,LINUX下双屏显示问题
LINUX下双屏显示问题 (2011-08-28 02:34:09) 标签: linux 双屏 杂谈 LINUX下双屏显示问题我的问题是这样的我想用2个屏幕同时显示一个桌面,也就是说,桌面分辨率为10 ...
- 微信小程序顶部导航栏点击选项产生颜色变化和底部下划线显示
在很多程序中都有一个功能,就是顶部导航栏点击的时候能自动切换页面,并且选中的模块会变换颜色并且底部出现一条横线. 首先思考这个功能的实现原理--通过"点击"这个动作,我们能知道点击 ...
- ios 上滑隐藏导航下拉显示导航栏实现
为了最大限度的利用手机屏幕,出现了上滑隐藏导航下拉显示导航栏. 先看看效果(代码:http://download.csdn.net/detail/gx_wqm/9771247), 把代码跑一下看一下是 ...
- html+导航栏+点击下划线,html导航栏点击后出现下划线_【Word教程】教你制作输入文字依然对齐的封面下划线......
点击上方"祕技",关注我们 -助你提升工作技能~ 阅读全文大约需10分钟 在学习和生活中,使用word进行封面制作是很常见的应用场景,而下划线又是封面中不可缺少的元素. 很多同学在 ...
- vue导航栏滚动下拉条上拉隐藏，下拉显示切换样式变化(源码)
目录 案例1 源码如下 效果如下 案例2 源码如下 效果如下 最后 案例1 源码如下 navBar内容,上拉显示navBar,下拉隐藏navBar,固定在顶部,样式切换 <template> ...
- html 导航栏 选中状态,jQuery“导航栏点击选中效果“代码
现在的网站菜单导航栏几乎都有点击选中效果,正好今天我在开发项目中也需要用上这样的效果,下面就给大家分享一下,亲测有效,大家放心使用. 1.引入jQuery核心文件 2.加入"jQuery导航 ...
- layui隐藏侧边栏_layui禁用侧边导航栏点击事件的处理方法
layui是一款优秀的前端模块化css框架.我用layui做过两个完整的项目,对她的感觉就是,这货非常适合做后台管理界面,且基于jquery,很容易上手.当然,她最大的优点我觉得还是她的模块化方式,相 ...
最新文章
- 【设计模式】观察者模式 ( 简介 | 适用场景 | 优缺点 | 代码示例 )
- Linux设置环境变量小结
- 检测主机是否在线小脚本
- Linux Shell常用技巧(六)
- 收集一些优秀的DoNet开源项目
- Java 网络实例二（查看主机指定文件的最后修改时间、Socket实现多线程服务器程序、Socket连接到指定主机、网页抓取）
- 海康、大华等厂家监控摄像机rtsp地址格式
- anaconda + pycharm安装教程补充
- 监控的1080P、3MP和5MP是什么意思？区别是什么？
- 红外额温枪方案（包含原理图和PCB文件）
- 程序员为什么要转行项目经理
- 传奇服务器攻城文件,仿盛大传奇沙巴克攻防战与比奇怪物攻城说明
- c语言输入大写字母输出小写字母,C语言大写字母转换为小写字母，并输出程序...
- Windows10系统添加打印机步骤
- 如何在pdf文件上进行电子签名
- 视图、存储过程、触发器
- 语音交互设计的一点认知
- 数据结构之——堆（Heap）
- 用ul制作html表单,要利用 display属性把段落P、标题h1、表单form、列表ul和li都可以定义成行内块元素,其属性值为...
- [opencv] BF匹配器和Flann匹配器