悬浮动态分层导航的制作：

1、首先在<head>里面引用一个JQUERY的文件以用来制作鼠标点击动画效果（从网站上下载即可）

 <script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

2、插入div（这里我的div是带有锚点效果的，已经用红色标出锚点，定位到了网页顶端，也就是<body>开始的地方写了一句<a name="top">top</a>，如果不给name一个初始值，就写上a href="#"同样有回到顶端的效果）

 <div id="apDiv1" ><img src="img/logo.bmp" />

   <nav id="menu">

   <div class="daohang" style="background-image:url(img/bg.png)">

       <a href="index.html"><div style="background-image:url(img/menu-hover.png); color:#fff">首页</div></a>

       <a href="about us.html" target="_blank"><div>

       关于我们</div></a>      

       <a href="services.html" target="_blank"><div>咖啡文化</div></a>

       <a href="price list.html" target="_blank"><div>价格清单</div></a>

       <a href="contact.html" target="_blank"><div>联系我们</div></a>

   </div>

   </nav>

   <div style="color:#fff;line-height:35px; background-image:url(img/menu-hover.png); border:solid medium #965D28; margin-top:3px;" onclick="menuvisible()">

   <input style="color:#fff; border:none; width:100%; background-image:url(img/menu-hover.png); font-family:'黑体'; font-size:16px; height:100%; line-height:35px;"type="button" value="<--MENU-->" /></div>

   <div style="background-image:url(img/bg.png)"><a href="#top"style="text-decoration:none; color:#965D28;line-height:30px;">TOP</a></div>

 </div>

3、CSS样式表的制作(一些属性设置换上你们需要的属性就可以了)

 /*————导航—————*/

 #apDiv1 {

     position:fixed;//fixed;left:auto;top:auto用来实现悬浮的效果
     left: auto;

     top: auto;

     bottom:auto;

     width: 237px;

     height:auto;

     z-index: ;

     margin-top:-8px;

     margin-left:40px;

     text-align:center;

     font-size:16px;

     font-family:"黑体";

     color:#965D28;

     background-image:url(../img/bg.png);

     }

 #menu{

     display:none;

 }

 .daohang div{

     height: 30px;

     z-index: ;

     margin: auto;

     text-align:center;

     padding-top:5px;

     overflow:hidden;

     padding-top:10px;

     color:965D28;

 }

 .daohang div:hover{

     height:30px;

     z-index:;

     margin: auto;

     background-image:url(../img/menu-hover.png);

     text-align:center;

     overflow:visible;

     color:#fff;

 }

 .daohang li{

     margin-left:237px;

     list-style-type:none;

     background-color:#D3A23A;

     width:160px;

     line-height:30px;

     color:#422B1D;

     position:relative;

     top:-40px;

     background-image:url(../img/bg.jpg);

     border:solid thin;

     border-color:#965D28;

     z-index:;

     }

 .daohang li:hover{

     margin-left:237px;

     list-style-type:none;

     background-color:#D3A23A;

     width:160px;

     line-height:50px;

     color:#fff;

     position:relative;

     top:-40px;

     border:solid thin;

     border-color:#965D28;

     background-image:url(../img/bg.png);

     z-index:;

     }

 .daohang a:link,a:visited{

     text-decoration:none;

     color:#965D28;

 }

 .daohang a:hover{

     text-decoration:none;

     color:#fff;

 }

4、鼠标点击事件的触发（写在body里面）

 <script>

 　　function menuvisible() {

 　　$("nav").toggle();/*开关*/

 　　}

 </script>

至此，导航制作结束~

需要查看jQuery的具体用法请参见：8、网页制作Dreamweaver（jQuery基础:安装、语法）

7、网页制作Dreamweaver（悬浮动态分层导航）的更多相关文章

  1. 8、网页制作Dreamweaver（jQuery基础:安装、语法）

    在<网页制作Dreamweaver(悬浮动态分层导航)>中,运用到了jQuery的技术,轻松实现了菜单的下拉.显示.隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery ...

  2. 10、网页制作Dreamweaver（扩展：各浏览器对 onunload 事件的支持与触发条件实现有差异）

    标准参考 在 HTML 4.01 规范中关于 onunload 事件的描述是:当 document 从 window 中移除时,触发 onunload 事件. 关于 HTML 4.01 规范中 onu ...

  3. 4、网页制作Dreamweaver（样式表CSS）

    样式表style 制作一个风格统一的网页,需要样式表对颜色.字体等属性的规范,同时也省去在body中多次定义的麻烦,所以一个样式表是必不可少的. 样式表有两种引用的方法:一种是直接写在html的< ...

  4. 11、网页制作Dreamweaver（补充：JS零碎知识点&&正则表达式）

    JS知识点 回车符/r和换行符/n的区别:/r 相当于enter,是段落与段落之间的区别, /n 相当于shift+enter,是行与行之间距离,比较小 几种window操作方法: 1.获取当前窗口大 ...

  5. 5、网页制作Dreamweaver（JS的初步运用）

    JAVASCRIPT *放在头部也可以读取(最先读取头部) 表单提交时会自动刷新网页,最好关掉 写法: 1.输出 <script> document.write("hello w ...

  6. 3、网页制作Dreamweaver（表单form）

    表单form (虚线不显示) 1.写法: <form id="form1" name="form1" method="post" ac ...

  7. 2、网页制作Dreamweaver（图片热点、frameset框架）

    图片热点 1.方法: <img  usemap="名字"> <map name="名字"> <area shape="r ...

  8. 1、网页制作Dreamweaver（界面、基本操作、锚点、表格）

    界面 网页的界面html由两部分组成:<head>和<body>,<title>放在<head>中 1.以下是<head>部分的解释: &l ...

  9. 9、网页制作Dreamweaver（jQuery基础:事件）

    事件 定义 即当HTML中发生某些事(点击.鼠标移过等)的时候调用的方法 $(selector).action() 触发 事件的触发有两种方法: 1.直接将事件click写在<javascrip ...

随机推荐

  1. 设置浏览器使用的dom模式为IE7

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>设置浏览器使用的dom模式为 ...

  2. struts2视频学习笔记 21（输入校验的流程）

    课时21 输入校验的流程 1.类型转换器对请求参数执行类型转换,并把转换后的值赋给action中的属性. 2.如果在执行类型转换的过程中出现异常,系统会将异常信息保存到ActionContext,co ...

  3. PostgreSQL数据库系统优点

    PostgreSQL 是世界上可以获得的最先进的开放源码的数据库系统, 它提供了多版本并行控制,支持几乎所有 SQL 构件(包括子查询,事务和用户定 义类型和函数), 并且可以获得非常广阔范围的(开发 ...

  4. ZOJ 3654 Letty's Math Class 模拟 难度:0

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=4844 题意:给你一个只包含中括号和正整数,+,-,结果在longlong范围内 ...

  5. HDU 1560 DNA sequence A* 难度:1

    http://acm.hdu.edu.cn/showproblem.php?pid=1560 仔细读题(!),则可发现这道题要求的是一个最短的字符串,该字符串的不连续子序列中包含题目所给的所有字符串 ...

  6. 常州培训 day6 解题报告

    第一题: 题目大意: 给出一个N*N的矩阵,矩阵元素均为0或1.定义矩阵权值为sum(F[i][j]*F[j][i]); 给出K个操作: 询问矩阵的权值mod 2. 将矩阵的某一行元素取反(0变成1, ...

  7. WCF中常见的几种Host,承载WCF服务的方法

    1:写在前面 我们都知道WCF在运行的时候必须自己提供宿主来承载服务.WCF 本身没有附带宿主,而是提供了一个 ServiceHost 的类,该类允许您在自己的应用程序中host WCF 服务.然后调 ...

  8. Program D--贪心-区间覆盖

    Given several segments of line (int the X axis) with coordinates [Li,Ri]. You are to choose the mini ...

  9. 登陆中session的处理

    在学校中的登陆注册使用的普通session存储信息,然后就是根据session中获取user是否拥有来判断是否登陆. 在一次面试中别人问到了我你们项目的登陆session是怎么一个情况,我这样答的话那 ...

  10. 图解Nosql（hbase）与传统数据库的区别

    图解Nosql(hbase)与传统数据库的区别http://www.aboutyun.com/thread-7804-1-1.html(出处: about云开发) 问题导读:1.nosql数据库能否删 ...