js导航css,js+css实现导航效果实例
本文实例讲述了js+css实现导航效果的方法。分享给大家供大家参考。具体实现方法如下:
1. 程序代码如下:
CSS+JS实现兼容性很好的无限级下拉菜单
*{ margin:0; padding:0; border:0;}
body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif,宋体;}li{list-style:none;}
.clearfix:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}
a:link{ color:#000; text-decoration:none; }
a:visited{ color:#000; text-decoration:none; }
a:hover{ color:#000; text-decoration:none; }
.menu{ width:778px; height:26px; background:#fff; margin:0 auto;}
.menusel{ float:left;width:100px; position:relative; height:25px; background:#ddd; line-height: 25px; margin-left: 1px; *margin-left: 0px;_margin-left: -1px;}
.menusel h2{ font-size:12px; }
.menusel a{ display: block;text-align:center; width:100px;border:1px solid #a4a4a4; height:25px; border-bottom:1px solid #a4a4a4; position:relative; z-index:2;}
.menusel a:hover{ border:1px solid #a4a4a4; border-bottom:1px dashed #eeeeee; position:relative; z-index:2; height:25px;}
.ahover a{border-bottom:1px dashed #eeeeee; background:#eeeeee; }
.position{ position:absolute; z-index:1;}
.menusel ul{width:125px; background:#eee; border:1px solid #a4a4a4; margin-top: -1px; position:relative; z-index:1; display:none;}
.menusel .block{ display:block;}
.typeul li{border-bottom:1px dashed #a4a4a4;width:125px; position:relative; float:left; }
.typeul li a{ border:none;width:125px; }
.typeul li a:hover{ border:none; background:#ddd;}
.typeul{ margin-left:0; }
.typeul ul{left:125px; top:0; position:absolute;}
.fli{ margin-left: -1px; border-left:#eeeeee solid 1px;}
.menusel .lli{ border:none; }
菜单1
- 菜单选项1-2
菜单选项1-2
- 菜单选项1-2-1
- 菜单选项1-2-2
- 菜单选项1-2
- 菜单选项1-2
菜单2
- 菜单选项2-2
- 菜单选项2-2
- 菜单选项2-2-1
- 菜单选项2-2-2
- 菜单选项2-2-1
- 菜单选项2-2-2
- 菜单选项2-2
- 菜单选项2-2
菜单3
- 菜单选项3-2
- 菜单选项3-2
- 菜单选项3-2-1
- 菜单选项3-2-2
- 菜单选项3-2-1
- 菜单选项3-2-2
- 菜单选项3-2-1
- 菜单选项3-2-2
- 菜单选项3-2
- 菜单选项3-2
for(var x = 1; x < 4; x++)
{
var menuid = document.getElementById("menu"+x);
menuid.num = x;
type();
}
function type()
{
var menuh2 = menuid.getElementsByTagName("h2");
var menuul = menuid.getElementsByTagName("ul");
var menuli = menuul[0].getElementsByTagName("li");
menuh2[0].onmouseover = show;
menuh2[0].onmouseout = unshow;
menuul[0].onmouseover = show;
menuul[0].onmouseout = unshow;
function show()
{
menuul[0].className = "clearfix typeul block"
}
function unshow()
{
menuul[0].className = "typeul"
}
for(var i = 0; i < menuli.length; i++)
{
menuli[i].num = i;
var liul = menuli[i].getElementsByTagName("ul")[0];
if(liul)
{
typeshow()
}
}
function typeshow()
{
menuli[i].onmouseover = showul;
menuli[i].onmouseout = unshowul;
}
function showul()
{
menuli[this.num].getElementsByTagName("ul")[0].className = "block";
}
function unshowul()
{
menuli[this.num].getElementsByTagName("ul")[0].className = "";
}
}
2. 程序效果
希望本文所述对大家的javascript程序设计有所帮助。
js导航css,js+css实现导航效果实例相关推荐
- html怎么把字做成动画效果,利用纯CSS实现动态的文字效果实例
大家可能经常会看到类似酷炫的网站: 在这类网站中能看到,一打开页面,无论是文字还是图片,都随着规定时间的而变化.原理很简单,主要用到CSS中animation属性. 接下来,我以我目前的工程项目为例, ...
- php动态字体,利用纯CSS实现动态的文字效果实例
相信大家都曾在网站中看到过中效果,一打开页面,无论是文字还是图片,都随着规定时间的而变化,今天我们将介绍如何通过用纯CSS来实现这种效果,下面一起来看看. 大家可能经常会看到酷炫的网站 在这类网站中能 ...
- 闪烁点击效果css,CSS3自定义闪烁动画效果实例
都说HTML5和CSS3的出现直接终结了FLASH时代,不管这其中有没有夸张的成分,但是CSS3的动画功力还真不可小觑.下面我们就分享一下CSS3的自定义闪烁动画实现方法,先定义好动画样式代码:@-w ...
- IE7/IE8浏览器纯CSS实现 【圆角】效果实例页面
css: .box {width: 150px; height: 150px;line-height: 150px;position: relative;overflow: hidden; } .ra ...
- html中 导航条置顶的代码6,JS+CSS实现六级网站导航主菜单效果
本文实例讲述了JS+CSS实现六级网站导航主菜单效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS实现支持6级的网站导航主菜单,级级相信够大家用了,外观蓝色风格,也是使用最多的一种菜单颜色, ...
- CSS+JS灰色树型菜单导航代码
代码简介: CSS+JS打造的树型菜单,没有怎么美化,颜色看上去也不很美,提供一种思路,真想用的朋友好好修改一下颜色,里面都有注释,相信通过你的努力,它最终的效果一定很漂亮. 代码内容: <!D ...
- css+js实现自动伸缩导航栏
用css+js实现自动伸缩导航栏 需要达到的效果: 默认首页选中样式 设置鼠标滑过效果:颜色变化(#f60),宽度变化,字体变化 所涉及的知识点: 布局:float css: 元素状态切换(displ ...
- 原生HTML+CSS+JS制作自己的导航主页(前端大作业,源码+步骤详解)
文章目录 前言 一.插入背景 二.头部 1.导航栏 2. 优化导航栏 3 时间 4. 搜索框 三.主体 四.底部 五.背景泡沫球特效 六.note小便签 七.全部代码 1. index.html 2. ...
- HTML+css+JS制作导航和banner
今天主要讲解一下如何利用HTML.css.js制作导航和banner图,一个整体的网页这两者是少不了的,在我看来应该也是最重要的部分,刚开始学习网页制作时对于小白的我来说其实这一块还是比较难的一点,尤 ...
最新文章
- 适合vue的富文本框
- Py修行路 python基础 (二十)模块 time模块,random模块,hashlib模块,OS及sys模块...
- centos7 yum安装maven_Linux安装tomcat、mysql 、Maven与Eclipse的整合、settings.xml
- Spring Data JPA使用Sort进行排序(Using Sort)(转)
- 银杏谷资本合伙人郑雨林:我为什么围绕阿里云生态做投资?
- 首届全国大学生工程训练综合能力竞赛圆满落幕
- Java旅游管理系统本科生毕业设计任务书
- 海康威视摄像头+OpenCV+VS2017 图像处理小结(一)
- Android中添加手心默认输入法,并能卸载
- js正则校验 统一社会信用代码
- 第一行代码中过时的通知写法更正;
- 【多线程与高并发】从一则招聘信息进入多线程的世界
- manifest权限
- DCT变换(JAVA)
- YUV YCbCr 区别
- Linux-CentOS7系统服务中systemctl命令介绍
- Worktile:突围,企业协作办公的主旋律
- 不能位虚拟电脑打开一个新任务
- 免费给你的网站加速,全球访问速度杠杠的
- [arduino]ESP8266配置连接IoT阿里云平台(arduino D1 mini)