网站制作教程
HTML教程
ASP教程
PHP教程
JSP教程
建站经验分享
网站优化
网站模板
网站素材
软件下载
js网页特效
网站源码
AE模板
知识分享
网页制作教程
图片等比例放大和缩小的代码
图片等比例放大和缩小的代码
怎么实现滚屏无刷新动态加载内容
怎么实现滚屏无刷新动态加载内容
insertAdjacentHTML动态插入内容的使用方法
insertAdjacentHTML动态插入内容的使用方法
jquery获取值和控制值操作大全
jquery获取值和控制值操作大全
现在的位置:
网页制作教程
>
JS网页特效
>正文
上一篇
下一篇
侧边栏导航浮动层效果
发表于2016/12/19
⁄
JS网页特效
⁄
0条评论
⁄ 热度 1,799℃
这是一款纯CSS实现的侧边栏导航浮动层效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <title>侧边导航浮动层特效演示 by www.webym.net</title> <style> ul,li{ margin:0px; padding:0px; list-style:none;} .div_a{ width:300px; float:left;} .div_a li{ width:300px; height:50px; border-bottom:1px solid #fff; cursor:pointer; background-color:#060; text-align:center; line-height:50px; font-size:18px; color:#fff;} .div_a1{ width:300px; height:150px; position:relative; background-color:#F00; top:-50px; left:250px; z-index:999; display:none;} .div_a li:hover .div_a1{ display:block;} </style> </head> <body> <div class="div_a"> <ul> <li>这是内容这是内容 <div class="div_a1">这是里面的内容这是里面的内容这是里面的内容</div> </li> <li>这是内容这是内容 <div class="div_a1">这是里面的内容这是里面的内容这是里面的内容</div> </li> <li>这是内容这是内容 <div class="div_a1">这是里面的内容这是里面的内容这是里面的内容</div> </li> <li>这是内容这是内容 <div class="div_a1">这是里面的内容这是里面的内容这是里面的内容</div> </li> <li>这是内容这是内容 <div class="div_a1">这是里面的内容这是里面的内容这是里面的内容</div> </li> <li>这是内容这是内容 <div class="div_a1">这是里面的内容这是里面的内容这是里面的内容</div> </li> </ul> </div> </body> </html>
运行代码
提示:您可以先修改部分代码再运行。
声明:
如需转载,请注明来源于
www.webym.net
并保留原文链接:http://www.webym.net/jiaocheng/395.html
【上篇】
仿支付宝banner图全屏轮播切换js效果
【下篇】
点击按钮或超链接展开和收缩DIV层效果
您可能还会对这些文章感兴趣!
css如何让图片和文字在同一水平线上显示
CSS样式的优先级执行顺序和覆盖规则
CSS中的px、em和rem有什么区别
利用CSS使div层始终显示在屏幕正中间
clearfix清除浮动的方法
CSS中不使用clear:both浮动清理的方法
提高CSS执行效率的方法
CSS3边框圆角
暂无评论
好文分享
主流浏览器(FireFox、Chrome、Safari)修改User-Agent的方法
苹果系统的iCloud邮箱发送到别的邮箱出现乱码的解决办法
IIS的web.config中跨域设置方法
获取记录数,比较recordcount和count()两种统计方法的效率高低
MJ12bot是什么蜘蛛,我们如何屏蔽它
jQuery中遍历函数siblings()的使用方法
ASP中VBScript的Replace函数使用介绍
asp查看对方网站是否有本站友情链接的代码
利用正则表达式获取html标签内的内容
正则表达式获取html中指定标签内容的方法
热门文章
如何保证table表格不被撑开(固定HTML表格宽度)
每点击一次按钮,js就使数字加1
“写入配置失败,请检查/date目录是否可写”的解决办法-服务器目录权限修改
datatime和datatime2(7)在SQL Server数据库中的区别
阿里云:Header头中X-Swift-SaveTime、X-Swift-CacheTime和Age代表什么意思?
windows8.1中组件服务DCOM配置里属性灰色不可修改的解决办法
点击加号(+)按钮展开 减号(-)按钮收起的效果
Windows Server 2003服务器设置IUSR来宾帐户
如何安装phpbb论坛图文教程
RJ45网络水晶头T568A、T568B制作排线顺序示意图和使用范围
随机文章
西部箱龟的介绍
冠背龟的介绍
密西西比钻纹龟的介绍
牟氏水龟的介绍
非洲棱背泥龟的介绍
艾氏拟水龟的介绍
亚马逊森蚺的介绍
蛛网龟的介绍
东非侧颈龟的介绍
彩虹飞蜥的介绍
推荐栏目
网站制作教程
给力的网站制作教程分享
建站经验和知识分享
网站制作经验和知识分享
网站SEO优化教程
关于网站排名优化教程!
网页素材
网页素材资源神秘宝藏
JS网页特效代码
网站JS特效代码大全
网站模板下载
网站最新模板免费下载
Tags列表
编程
缓存
操作系统
Safari
浏览器
站长软件
网页设计素材
网页背景图片素材
网站素材
网页图片素材
SEO优化
搜索引擎
div+css
网页模板
html5模板
SQLServer
asp高级应用
搜索
JSP入门教程
PHP基础教程
PHP学习
服务器
虚拟主机
域名
IIS
asp入门
网页制作素材
新手做网站教程
jquery教程
数据库学习
网页设计基础教程
建站教程
HTML代码
CSS样式
数据库
JS
Sql语句
DreamWeaver
网站模板下载汇总
1
海事大学教学中心网站模板
2
机械设备网站模板
3
集装箱公司网站模板
4
图片素材交易系统模板下载
5
艺术摄影网站模板下载
6
摄影作品创作网站模板
7
HTML5培训机构网站模板
8
女性潮牌网站模板下载
9
黑色瀑布流图片展示模板
10
蓝色简约网站模板下载
网页设计教程排行榜
1
禁止苹果浏览器Safari将数字识别成电话号码的方法
2
百度搜索页跳转到第一页解决办法
3
好看的族谱树状图效果代码
4
百度UEditor编辑器如何消除自动默认添加的p标签
5
此Windows Installer程序包有问题。完成此安装所一个DLL不能运行
6
比较两个表不同数据差异的sql语句
7
WebUploader点击选择文件按钮无反应或延迟显示的解决办法
8
jquery如何获取ul中第一个li和最后一个li
9
一条sql语句实现从一个表中获取数据更新到另一个表中
10
如何通过网站日志查看百度蜘蛛抓取情况
网站制作必备软件
DreamWeaver下载
国产网页制作软件中的神器
Visual Studio软件下载
Visual Studio免费下载
Photoshop软件下载
Photoshop免费下载
Flash软件下载
Flash软件免费下载
Frontpage软件
Frontpage软件下载
Fireworks软件下载
Fireworks软件免费下载
Adobe Illustrator软件
最好用的AI软件
最新下载资源
海事大学网站模板下载
机械设备公司网站模板demo下载
左右拖动分割线改变窗体大小实例下载
ISAPI_Rewrite3_0112_ia64_manual
ISAPI_Rewrite3_0112_x64_manual
ISAPI_Rewrite3_0112_manual
ISAPI_Rewrite3_0112_Lite_ia64
ISAPI_Rewrite3_0112_ia64
ISAPI_Rewrite3_0112_Lite_x64
ISAPI_Rewrite3_0112_x64