悬浮动态分层导航

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

1 <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="#"同样有回到顶端的效果)

 1 <div id="apDiv1" ><img src="img/logo.bmp" /> 2   <nav id="menu"> 3   <div class="daohang" style="background-image:url(img/bg.png)"> 4       <a href="index.html"><div style="background-image:url(img/menu-hover.png); color:#fff">首页</div></a> 5       <a href="about us.html" target="_blank"><div> 6       关于我们</div></a>       7        8       <a href="services.html" target="_blank"><div>咖啡文化</div></a> 9       10       <a href="price list.html" target="_blank"><div>价格清单</div></a>11        12       <a href="contact.html" target="_blank"><div>联系我们</div></a>13       14   </div>15   </nav>16   <div style="color:#fff;line-height:35px; background-image:url(img/menu-hover.png); border:solid medium #965D28; margin-top:3px;" onclick="menuvisible()">17   <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>18   <div style="background-image:url(img/bg.png)"><a href="#top"style="text-decoration:none; color:#965D28;line-height:30px;">TOP</a></div>19 </div>

 

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

 1 /*---导航---*/ 
2 #apDiv1 {
3 position:fixed;//fixed;left:auto;top:auto用来实现悬浮的效果4 left: auto; 5 top: auto; 6 bottom:auto; 7 width: 237px; 8 height:auto; 9 z-index: 2;10 margin-top:-8px;11 margin-left:40px;12 text-align:center;14 font-size:16px;15 font-family:"黑体";16 color:#965D28;17 background-image:url(../img/bg.png);18 }19 #menu{20 display:none;21 }22 .daohang div{23 height: 30px;24 z-index: 2;25 margin:0 auto;26 text-align:center;27 padding-top:5px;28 overflow:hidden;29 padding-top:10px;30 color:965D28;31 }32 .daohang div:hover{33 height:30px;34 z-index:2;35 margin:0 auto;36 background-image:url(../img/menu-hover.png);37 text-align:center;38 overflow:visible;39 color:#fff;40 }41 42 .daohang li{43 margin-left:237px;44 list-style-type:none;45 background-color:#D3A23A;46 width:160px;47 line-height:30px;48 color:#422B1D;49 position:relative;50 top:-40px;51 background-image:url(../img/bg.jpg);52 border:solid thin;53 border-color:#965D28;54 z-index:1;55 }56 .daohang li:hover{57 margin-left:237px;58 list-style-type:none;59 background-color:#D3A23A;60 width:160px;61 line-height:50px;62 color:#fff;63 position:relative;64 top:-40px;65 border:solid thin;66 border-color:#965D28;67 background-image:url(../img/bg.png);68 z-index:1;69 }70 .daohang a:link,a:visited{71 text-decoration:none;72 color:#965D28;73 }74 .daohang a:hover{75 text-decoration:none;76 color:#fff;77 }

 

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

1 <script>2   function menuvisible() {3   $("nav").toggle();/*开关*/4   }    5 </script>

 

转载于:https://www.cnblogs.com/sjxx/p/5258154.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/404210.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[Redux/Mobx] Redux怎么添加新的中间件?

[Redux/Mobx] Redux怎么添加新的中间件&#xff1f; applyMiddleware 个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题

php操作xml

<?php $xmlfile_get_contents("c.xml"); $simplenew SimpleXMLElement($xml); //var_dump($simple); //1查询 echo "<table border1>"; foreach ($simple->book as $book) {$attr$book->attributes();//获取节点属性echo "<tr>…

h264 图像、帧、片、NALU

From: http://blog.csdn.net/zqnihao917/article/details/7760170 图像、帧、片、NALU 是学习 H.264的人常常感到困惑的一些概念&#xff0c;我在这里对自己的理解做一些阐述&#xff0c;欢迎大家讨论&#xff1a;H.264 是一次概念的革新&#xff0c;它打破常规&#xff0c;完全…

Vue面试题汇总目录

【Vue】 [vue] vue组件里的定时器要怎么销毁&#xff1f; [vue] &#xff1c;template&#xff1e;&#xff1c;/template&#xff1e;有什么用&#xff1f; [vue] 你有使用过JSX吗&#xff1f;说说你对JSX的理解 [vue] 使用vue渲染大量数据时应该怎么优化&#xff1f;说下…

EXEC与sp_executesql的区别及应用

execute&#xff0c;简写为exec,除了用来执行存储过程&#xff0c;一般都用来执行动态Sql sp_executesql&#xff0c;sql2005中引入的新的系统存储过程&#xff0c;也是用来处理动态sql的,如&#xff1a; exec sp_executesql sql, Ncount int out,id varchar(20), cou out ,i…

React封装一个组件弹出框

目录 前言 代码 简要 引用 效果 前言 我是歌谣 放弃很容易 但是坚持一定很酷 为了保证react代码的一个简洁性 最近开始封装组件, 直接上代码 因为都很简单的模式 这边直接进行讲解 代码 //取消机构和取消讲师的方法封装 //params visible控制弹框的一个现实和隐藏 import…

h264 Nalu 详解

From: http://blog.csdn.net/d_l_u_f/article/details/7260772 1&#xff0e;引言 H.264的主要目标&#xff1a; 1&#xff0e;高的视频压缩比 2&#xff0e;良好的网络亲和性 解决方案&#xff1a; VCL video coding layer 视频编码层 NAL network abstraction layer …

Pytorch项目(模型训练与优化),肺癌检测项目之六

数据优化方案 数据优化方案1&#xff1a;重复抽样 &#xff08;1&#xff09;对多数类的样本实施欠采样&#xff0c;减少多数类数量 &#xff08;2&#xff09;对少数类的样本实施过采样&#xff0c;增加少数类数量 数据优化方案2&#xff1a;数据增强 数据增强&#xff08…

Oracle 中文排序

按照拼音顺序(常用) ORDER BY nlssort(NAME, NLS_SORTSCHINESE_PINYIN_M) 按照部首顺序 ORDER BY nlssort(NAME, NLS_SORTSCHINESE_RADICAL_M) 按照笔画顺序 ORDER BY nlssort(NAME, NLS_SORTSCHINESE_STROKE_M) 转载于:https://www.cnblogs.com/xcxcxcxc/p/554…

mac苹果屏幕截图快捷键

From: http://blog.csdn.net/w88193363/article/details/12647233 一般在Mac上用Command-Shif-3/4来截图。注&#xff1a;Command苹果键 其实还有几个辅助键&#xff0c;来起到不同的截图功能…… 011)Command-Shift-3&#xff08;适用于OS9,10.1X和10.2&#xff09; 02将整…

【数据库】SQL查询强化篇

查询是数据库的基本应用之一&#xff0c;oracle中的SQL查询语法&#xff0c;一方面遵循了SQL标准&#xff0c;另一方面又有自己的独特之处。 从而使得oracle中的SQL查询功能更加强大。接下来将会涉及oracle中的SQL查询语句&#xff0c;包括&#xff1a; 基本查询&#xff1a;主…

[python3] pyton socket 同步通信举例

本文比较简单&#xff0c;适合入门用&#xff0c;作个笔记&#xff0c;方便日后抄写 一个服务端&#xff0c;一个客户端&#xff0c;而且是阻塞方式&#xff0c;一次只能接受一个客户端连接并通信噢。 客户端发送‘bye, 结束与服务端的通信&#xff0c;如果发送’shutdown&…

做中学

陈鹤琴提出了 “做中教&#xff0c;做中学&#xff0c;做中求进步。”这个方法论,突出了以儿童为学习主体的思想及一个“活”字&#xff0c;一个“做”字&#xff0c;使儿童处于主动学习的地位&#xff0c;体现了陈鹤琴先生的儿童观和教育观。也就是说,陈鹤琴先生认为孩子应该在…

学习进度02

第二周学习进度 这是第二周了&#xff0c;感觉上了软件工程好累啊&#xff0c;但是在累的过程中&#xff0c;也积累了不少东西&#xff0c;很值&#xff01; 第二周所花时间&#xff08;包括上课&#xff09; 410 ..... 代码量&#xff08;行&#xff09; 18545行 博客量&#…

[python3.3]Python异步Socket编程【TCP】

参考&#xff1a; http://www.cnblogs.com/snailrun/p/3805188.html 异步网络据说能极大的提高网络server的连接速度,所以打算写一个专题,来学习和了解异步网络.因为Python有个非常出名的异步Lib:Twisted,所以就用Python来完成. OK,首先写一个pythone socket的server段,对开…

计算比尔盖茨財富的方法

比尔盖茨究竟有多富&#xff1f; 1、盖茨每秒赚250美元&#xff0c;即每天赚2000万美元。一年赚78亿美元。 2、假如盖茨掉了1000美元。他才懒得去捡&#xff0c;由于他去捡要花掉四秒钟&#xff0c;这一弯腰他已赚回1000美元&#xff1b; 3、美国的国家债务约56200亿美元&#…