js+css实现导航效果实例

2024-10-26 00:44:11

本文实例讲述了js+css实现导航效果的方法。分享给大家供大家参考。具体实现方法如下：

1. 程序代码如下：

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS+JS实现兼容性很好的无限级下拉菜单</title>
<style type="text/css">
*{ 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; }
</style>
<script type="text/javascript">document.execCommand("BackgroundImageCache", false, true);</script>
</head>
<body>
<div class="menu">
<div id="menu1" class="menusel">
<h2><a href="/">菜单1</a></h2>
   <div class="position">
    <ul class="clearfix typeul">
     <li><a href="http://www.jb51.net">菜单选项1-2</a></li>
     <li>
      <a href="#">菜单选项1-2</a>
      <ul>
       <li class="fli"><a href="#">菜单选项1-2-1</a></li>
       <li class="lli"><a href="#">菜单选项1-2-2</a></li>
      </ul>
     </li>
     <li><a href="http://www.jb51.net">菜单选项1-2</a></li>
     <li class="lli"><a href="#">菜单选项1-2</a></li>
    </ul>
   </div>
</div>
<div id="menu2" class="menusel">
<h2><a href="#">菜单2</a></h2>
<div class="position">
<ul class="clearfix typeul">
<li><a href="#">菜单选项2-2</a></li>
<li><a href="#">菜单选项2-2</a>
<ul>
<li class="fli"><a href="#">菜单选项2-2-1</a></li>
<li class="lli"><a href="#">菜单选项2-2-2</a>
<ul>
<li class="fli"><a href="#">菜单选项2-2-1</a></li>
<li class="lli"><a href="#">菜单选项2-2-2</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">菜单选项2-2</a></li>
<li class="lli"><a href="#">菜单选项2-2</a></li>
</ul>
</div>
</div>
<div id="menu3" class="menusel">
<h2><a href="#">菜单3</a></h2>
<div class="position">
<ul class="clearfix typeul">
<li><a href="#">菜单选项3-2</a></li>
<li><a href="#">菜单选项3-2</a>
<ul>
<li class="fli"><a href="#">菜单选项3-2-1</a></li>
<li class="lli"><a href="#">菜单选项3-2-2</a>
<ul>
<li class="fli"><a href="#">菜单选项3-2-1</a></li>
<li class="lli"><a href="#">菜单选项3-2-2</a>
<ul>
<li class="fli"><a href="#">菜单选项3-2-1</a></li>
<li class="lli"><a href="#">菜单选项3-2-2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">菜单选项3-2</a></li>
<li class="lli"><a href="#">菜单选项3-2</a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
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 = "";
}
}
</script>
</body>
</html>

2. 程序效果

希望本文所述对大家的javascript程序设计有所帮助。

利用Js+Css实现折纸动态导航效果实例源码

先来看看第一种实现方式效果图如下: 不再采用ul li的布局方式 -webkit-transform-style:preserve-3d只对子元素有作用,所以每个div都加. 实例源码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> .wrap{margin:30px auto;widt
JS+CSS实现另类带提示效果的竖向导航菜单

本文实例讲述了JS+CSS实现另类带提示效果的竖向导航菜单.分享给大家供大家参考.具体如下: 这是一款JS+CSS打造另类带提示的竖向导航菜单,觉得挺不错,只是美工水平有限,有兴趣的朋友就请继续完善吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-alert-txt-nav-menu-demo/ 具体代码如下: <html> <head> <title>带提示的竖向导航菜单</title>
仿客齐集首页导航条DIV+CSS+JS [代码实例]

作者子鼠客齐集首页的一个效果, 今天有人问我是怎么写的,于是晚上就又重写了一个; 顺便把那个布局再理一下: 你可以先看一下客齐集首页的效果:http://shanghai.kijiji.cn 我试着不用position:absolute的方法: 但写起来太难了: 后来还是用position:absolute了: 但在客齐集站上的是没有用的:真不知道当时是怎么写出来的:以下是效果图: 以下是布局部分复制代码代码如下: <div id="info"> <div
一步步教大家编写酷炫的导航栏js+css实现

一步一步的学习制作导航栏,文章末尾再做个综合页面,分享给大家一个炫酷的导航栏供大家参考,具体内容如下 1.当前页面高亮显示的导航栏首先是HTML代码,很简单,ul+li实现菜单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏一</title> </head> <body>
JS+CSS实现简单的二级下拉导航菜单效果

本文实例讲述了JS+CSS实现简单的二级下拉导航菜单效果.分享给大家供大家参考.具体如下: 这是一款CSS配合JavaScript实现二级下拉导航菜单,好像CSS要配合JS才能写出好效果来,本款菜单同样用到了JS,菜单目前支持两级,下拉导航是我们经常用的一种菜单形式,把这个修改一下你就能用了,结构挺简单,相信你会做好的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-2l-fade-down-menu-codes/
JS+CSS实现电子商务网站导航模板效果代码

本文实例讲述了JS+CSS实现电子商务网站导航模板效果代码.分享给大家供大家参考.具体如下: 这是一款JS+CSS实现的电子商务网站导航模板,二级导航菜单,超强美化,超强实用性,分享给大家. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-dzsw-wen-nav-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
JS+CSS实现精美的二级导航效果代码

本文实例讲述了JS+CSS实现精美的二级导航效果代码.分享给大家供大家参考.具体如下: 这是一款基于JS+CSS实现的精美二级导航,适合想学一些基础点的.基础js知识技巧的朋友们.其实本菜单的完成不仅仅是需要基础知识,更需要的是对CSS熟悉之后的巧妙构思,菜单可能都会写,但写出好菜单就不那么容易了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jm-2l-nav-menu-codes/ 具体代码如下: <!DOCTYPE htm
JS+CSS实现鼠标滑过时动态翻滚的导航条效果

本文实例讲述了JS+CSS实现鼠标滑过时动态翻滚的导航条效果.分享给大家供大家参考.具体如下: 这是一款鼠标悬停时动态翻滚的导航条,注意这里用了两个背景图,请等待网页加载完成或多刷新几次,这个是使用JavaScript实现的,不过代码好像是从jQuery里摘出来的,有点像. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-mouse-over-nav-scroll-style-codes/ 具体代码如下: <!DOCTYPE htm
JS+CSS实现大气的黑色首页导航菜单效果代码

本文实例讲述了JS+CSS实现大气的黑色首页导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款JS+CSS实现的大气的重色+红色高强对比的菜单,可用作首页导航菜单,从设计的角度来讲,挺专业,从实用角度来讲,应用广泛,是款人见人爱的经典风格菜单,超不错的一个作品. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-black-style-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC
CSS3+Js实现响应式导航条

今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大量的篇幅介绍了,主要看一下这个导航条该怎么做. 另外需要提到的是,ie6-ie8是不支持CSS3的Media Query的,因此对于ie6-ie8我们需要特殊处理,就让他们保持默认样式,这对于布局及样式上都要考虑到这一点. 首先看一下布局这一块,html代码如下: 复制代码代码如下: <div c

js+css实现导航效果实例

相关推荐

随机推荐