如何引用jQuery实现下拉列表，点击展开，点击关闭。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#apDiv1 {
position:fixed;/*fixed;left:auto;top:auto用来实现悬浮的效果*/
left: auto;
top: auto;
bottom:auto;
width: 237px;
height:auto;
z-index: 2;
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: 2;
margin:0 auto;
text-align:center;
padding-top:5px;
overflow:hidden;
padding-top:10px;
color:965D28;
}
.daohang div:hover{
height:30px;
z-index:2;
margin:0 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:1;
}
.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:1;
}
.daohang a:link,a:visited{
text-decoration:none;
color:#965D28; }
.daohang a:hover{
text-decoration:none;
color:#fff;
} </style> </head> <body>
<script>
function menuvisible()
{
$("nav").slideToggle(1500);/*开关*/
}
</script> <div id="apDiv1" >
<img src="" width="90" />
<nav id="menu">
<div class="daohang" style=" background-color:#630">
<a href="index.html">
<div style=" background-color:#FC0; 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-color:#630; 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="#"style="text-decoration:none; color:#965D28;line-height:30px;">TOP
</a>
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
咖啡 </body>
</html>
——————————————————————————————————————————
如何引用jQuery实现下拉列表，点击展开，点击关闭。的更多相关文章
- vue实现点击展开,点击收起
安装vue的步骤在这里就不进行赘述了,下面直接进入正题 首先定义一下data里面的数据: data () { return { toLearnList:[ 'html','css','javascri ...
- jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象
这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...
- Content Editor Webpart（一）引用JQuery
SharePoint里面自带了一个Content Editor Webpart, 使用这个webpart.能够方便的往页面上加入随意的内容(HTML,css, JS).以此来达到往页面加入自己定义内容 ...
- listview嵌套gridview，并实现grid元素部分显示以及点击展开与折叠
原文链接:http://blog.csdn.net/duguju/article/details/49538341 有时我们需要用GridView显示目录列表,有时甚至是二级的,即listview每一 ...
- 解决sea.js引用jQuery提示$ is not a function的问题
在使用sea.js的如下写法引用jQuery文件时, //main.jsdefine(function(require,exports,module){ var $ = require('jquery ...
- javascript实现列表的点击展开折叠
<script> window.onload = function() { //要折叠的区域 var catalog = document.getElementById("div ...
- 转 mvc项目中,解决引用jquery文件后智能提示失效的办法
mvc项目中,解决用Url.Content方法引用jquery文件后智能提示失效的办法 这个标题不知道要怎么写才好, 但是希望文章的内容对大家有帮助. 场景如下: 我们在用开发开发程序的时候,经常 ...
- js 点击展开、收起
//点击展开.收起 window.onload=function(){ var current=document.getElementsByTagName('li')[0]; document.bod ...
- discuzx3.1中引用 Jquery报错的解决办法
我们可以引用jQuery给JQ赋予一个变量var jq = jQuery.noConflict(); 修改成为:<script type="text/javascript"& ...
随机推荐
- Android菜鸟成长记2-内部类
Java内部类 内部类是指在一个外部类的内部再定义一个类.类名不需要和文件夹相同. 内部类可以是静态static的,也可用public,default,protected和private修 ...
- linux编译curl库的动态库so（转）
转载请注明出处:帘卷西风的专栏(http://blog.csdn.NET/ljxfblog) curl库是一个很强大的http开源库,c++里面能够很方便的和http服务器交互. 最近项目开始内测,开 ...
- mysql 循环插入日期递增
create procedure wk() begin declare i int; ; do insert into t (myday) values (date_sub(curdate(),int ...
- #import、#include以及@class的区别
一.#import和#include的区别 当我们在代码中使用两次#include的时候会报错:因为#include相当于拷贝头文件中的声明内容,所以会报重复定义的错误 但是使用两次#import的话 ...
- SQL Server 查看物理页存储
创建测试表 Use Test create table dbo.employee( emp_lname varchar(12) not null, emp_fname varchar(12)not n ...
- css3新属性@ text-shadow
text-shodow是css3的新属性,可以利用这个属性使字体更有立体感,还可以创造有趣的效果. 1.语法形式:text-shadow : x-offset(x轴偏移量) y-offset(y轴偏移 ...
- JAVA基础之两种核心机制
突然之间需要学习Java,学校里学的东西早就忘记了,得用最短的时间把Java知识理顺,重点还是J2EE,毕竟所有的ava项目中95%都是J2EE,还是先从基础的J2SE学起吧....... 首先是了解 ...
- java-GUI图形用户界面
图形用户界面GUI(Graphical User Interface),指的是在一个程序中用户可以看到的和与之交互的部分. JavaAPI中提供两套组件用于支持编写用户界面AWT and Swin ...
- 进程调度算法Linux进程调度算法
这次介绍一下操作系统的进程调度算法 操作系统的调度分为三种:1.远程调度(创建新进程):2.中程调度(交换功能的一部分):3.短程调度(下次执行哪个进程) 这次讲述的就是短程调度,可以简单的看作咱们平 ...
- 解决TextView最后一行显示不全
public class MultilineTextView extends TextView { private boolean calculatedLines = false; public Mu ...