<!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实现下拉列表，点击展开，点击关闭。的更多相关文章

  1. vue实现点击展开,点击收起

    安装vue的步骤在这里就不进行赘述了,下面直接进入正题 首先定义一下data里面的数据: data () { return { toLearnList:[ 'html','css','javascri ...

  2. jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象

    这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...

  3. Content Editor Webpart（一）引用JQuery

    SharePoint里面自带了一个Content Editor Webpart, 使用这个webpart.能够方便的往页面上加入随意的内容(HTML,css, JS).以此来达到往页面加入自己定义内容 ...

  4. listview嵌套gridview，并实现grid元素部分显示以及点击展开与折叠

    原文链接:http://blog.csdn.net/duguju/article/details/49538341 有时我们需要用GridView显示目录列表,有时甚至是二级的,即listview每一 ...

  5. 解决sea.js引用jQuery提示$ is not a function的问题

    在使用sea.js的如下写法引用jQuery文件时, //main.jsdefine(function(require,exports,module){ var $ = require('jquery ...

  6. javascript实现列表的点击展开折叠

    <script> window.onload = function() { //要折叠的区域 var catalog = document.getElementById("div ...

  7. 转 mvc项目中,解决引用jquery文件后智能提示失效的办法

    mvc项目中,解决用Url.Content方法引用jquery文件后智能提示失效的办法   这个标题不知道要怎么写才好, 但是希望文章的内容对大家有帮助. 场景如下: 我们在用开发开发程序的时候,经常 ...

  8. js 点击展开、收起

    //点击展开.收起 window.onload=function(){ var current=document.getElementsByTagName('li')[0]; document.bod ...

  9. discuzx3.1中引用 Jquery报错的解决办法

    我们可以引用jQuery给JQ赋予一个变量var jq = jQuery.noConflict(); 修改成为:<script type="text/javascript"& ...

随机推荐

  1. JDBC basic

    http://www.tutorialspoint.com/jdbc/jdbc-sample-code.htm maven <dependency> <groupId>mysq ...

  2. 第三十三章 metrics（1） - graphite搭建 + whisper存储模式 + 高精度向低精度聚合方式 + 集成StatsD + 集成grafana

    组件介绍: carbon:Carbon实际上是一系列守护进程,组成一个Graphite安装的存储后端.这些守护进程用一个名为Twisted的事件驱动网络引擎监听时间序列数据.Twisted框架让Car ...

  3. sql语句执行插入后返回ID

    insert into table1(aaa,bbb) values('aaa','bbb') select @@identity

  4. MVC学习（四）几种分页的实现（2）

    在第一种分页方式中,仅仅实现了分页,但并未有体现出MVC的优势,没有体现出泛型编程思想,尤其在数据量很大的时候,分页十分缓慢,除此之外,还没有实现很好的封装,不是一个通用方法. 因此,我希望只要传入数 ...

  5. 使用Dapper时，如何将MySqlParameters[] 变成Dapper.DynamicParameters动态对象

    在开发过程中,如何替原生的参数化MySqlParameters[]换成Dpapper的参数化DynamicParameters对象正确的做法:var args = new DynamicParamet ...

  6. 第九章 springboot + mybatis + 多数据源 （AOP实现）

    在第八章 springboot + mybatis + 多数据源代码的基础上,做两点修改 1.ShopDao package com.xxx.firstboot.dao; import org.spr ...

  7. Oracle 的基本使用--基本命令<一>

    sql*plus 的常用命令 连接命令 1.conn[ect] 用法:conn 用户名/密码@网络服务名[as sysdba/sysoper]当用特权用户身份连接时,必须带上 as sysdba 或是 ...

  8. 【Java学习笔记】Map集合的keySet，entrySet，values的用法例子

    import java.util.Collection; import java.util.HashMap; import java.util.Iterator; import java.util.M ...

  9. 在CentOS安装cobbler自动化部署软件

    #!/bin/bash##cobbler server addressip=192.168.119.133#DHCP server net and address fanweinet=192.168. ...

  10. 安卓奇葩问题之：设置webView超时

    我只想说:what a fucking day! 今天要做一个webView的超时功能,于是开始百度,一看貌似很简单啊,于是开始copy了下面的代码. import java.util.Timer; ...