7、网页制作Dreamweaver(悬浮动态分层导航)
悬浮动态分层导航的制作:
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(悬浮动态分层导航)的更多相关文章
- 8、网页制作Dreamweaver(jQuery基础:安装、语法)
在<网页制作Dreamweaver(悬浮动态分层导航)>中,运用到了jQuery的技术,轻松实现了菜单的下拉.显示.隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery ...
- 10、网页制作Dreamweaver(扩展:各浏览器对 onunload 事件的支持与触发条件实现有差异)
标准参考 在 HTML 4.01 规范中关于 onunload 事件的描述是:当 document 从 window 中移除时,触发 onunload 事件. 关于 HTML 4.01 规范中 onu ...
- 4、网页制作Dreamweaver(样式表CSS)
样式表style 制作一个风格统一的网页,需要样式表对颜色.字体等属性的规范,同时也省去在body中多次定义的麻烦,所以一个样式表是必不可少的. 样式表有两种引用的方法:一种是直接写在html的< ...
- 11、网页制作Dreamweaver(补充:JS零碎知识点&&正则表达式)
JS知识点 回车符/r和换行符/n的区别:/r 相当于enter,是段落与段落之间的区别, /n 相当于shift+enter,是行与行之间距离,比较小 几种window操作方法: 1.获取当前窗口大 ...
- 5、网页制作Dreamweaver(JS的初步运用)
JAVASCRIPT *放在头部也可以读取(最先读取头部) 表单提交时会自动刷新网页,最好关掉 写法: 1.输出 <script> document.write("hello w ...
- 3、网页制作Dreamweaver(表单form)
表单form (虚线不显示) 1.写法: <form id="form1" name="form1" method="post" ac ...
- 2、网页制作Dreamweaver(图片热点、frameset框架)
图片热点 1.方法: <img usemap="名字"> <map name="名字"> <area shape="r ...
- 1、网页制作Dreamweaver(界面、基本操作、锚点、表格)
界面 网页的界面html由两部分组成:<head>和<body>,<title>放在<head>中 1.以下是<head>部分的解释: &l ...
- 9、网页制作Dreamweaver(jQuery基础:事件)
事件 定义 即当HTML中发生某些事(点击.鼠标移过等)的时候调用的方法 $(selector).action() 触发 事件的触发有两种方法: 1.直接将事件click写在<javascrip ...
随机推荐
- jQuery学习小结1-CSS操作+事件
一.DOM对象和jQuery 对象互换 1.jQuery对象 就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的,其可以使用jQuery里的方法.比如: $(&quo ...
- 企业级的响应式设计(Responsive design at enterprise level)译
导言 响应式设计是现在人们谈论的热点,但如何部署,特别是在有多种设备的大型项目中如何组织响应式设计,响应式设计和可伸缩性(Scalable)有什么区别?这都是需要解决的难题. 优化用户经验——Opti ...
- ios基础篇(八)——UITabBarController的简单介绍
一.简介 UITabBarController和UINavigationController类似,UITabBarController也可以轻松地管理多个控制器,轻松完成控制器之间的切换,典型的例子就 ...
- ajax异步加载小例子....(通俗易懂)
web.html(用户端): <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- cf 307
一开始我是不想打的 又因为307这个数字太特殊了 毕竟307 希望今天的考试不要挂掉 http://codeforces.com/contest/551/problem/A #include< ...
- 最新电Call记录统计-full hash join用法
declare @time datetime set @time='2016-07-01' --最新的电Call记录统计查询--SELECT t.zuoxi1,t.PhoneCount,t.Phone ...
- 一模 (2) day2
第一题: 题目大意:给出n种物品和每种物品的件数,求拿k件的方案数.N<=30 解题过程: 1.一开始总想着是组合数学的模型,结果怎么都想不出来..然后写了个爆搜,数据很弱,只有1个点超时. 2 ...
- libpng交叉编译安装
tar xzf libpng-1.5.22.tar.gz cd libpng-1.5.22 mkdir tmp 打开Makefile文件并修改CC=arm-linux-gcc ./configure ...
- 根据图片Uri获得图片文件
2013-12-17 1. 根据联系人图片Uri获得图片文件并将它显示在ImageView上, 代码如下: Uri uri = Uri.parse("content://com.androi ...
- svm特征
svm特征格式:<label><index1>:<value1><index1>:<value1>.... 其中<label> ...