分层导航的做法

<!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="n0.jpg" width="80" />
  <nav id="menu">
    <div class="daohang" style="  <a href="index.html">
      <div style="  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%;  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>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
咖啡
</body>
</html>
时间: 2024-10-07 06:00:33

分层导航的做法的相关文章

分层导航and隐藏导航

一.分层导航 <!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="j

分层导航

<!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> <meta http-equiv="Content-

悬浮动态分层导航

1.首先在<head>里面引用一个JQUERY的文件以用来制作鼠标点击动画效果(从网站上下载即可) 1 <script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 2.插入div(这里我的div是带有锚点效果的,已经用红色标出锚点,定位到了网页顶端,也就是<body>开始的地方

案例 分层导航

<!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="javascri

课堂笔记----悬浮动态分层导航

1.首先在<head>里面引用一个JQUERY的文件以用来制作鼠标点击动画效果(从网站上下载即可) 1 <script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 2.插入div(这里我的div是带有锚点效果的,已经用红色标出锚点,定位到了网页顶端,也就是<body>开始的地方

WP8.1学习系列(第二十二章)——在页面之间导航

在本文中 先决条件 创建导航应用 Frame 和 Page 类 页面模板中的导航支持 在页面之间传递信息 缓存页面 摘要 后续步骤 相关主题 重要的 API Page Frame NavigationCacheMode 本主题将讨论基本的导航概念,并演示如何创建一个在两个页面之间进行导航的应用. 有关为你的应用选择最佳导航模式的帮助,请参阅导航模式. 在操作时请参阅平面导航和分层导航模式,它们是应用功能大全系列的一部分. 路线图: 本主题与其他主题有何关联?请参阅: 使用 C# 或 Visual

Win8应用开发 入门篇(三) UX交互导航模式

导航模式(Windows 应用商店应用) 在本文中 分层模式 画布上导航 顶部应用栏 语义式缩放 相关主题 组织 Windows 应用商店应用中的内容,以便用户可以轻松而直观地进行导航.使用正确的导航模式可帮助你限制永久位于屏幕上的控件.这样用户就可以将精力集中在当前内容上. Windows 应用商店应用中的导航基于两种模式:分层模式和平面模式.应用可以使用其中一个或者使用这两种模式的组合. 分层模式 此模式可使 Windows 应用商店应用变得快速而流畅.它最适合具有大量内容或许多不同部分内容

(6)比特平面分层(Bit Plane Slicing)

知道术语的英文翻译很重要,因为百度高质量的博文和文章比谷歌搜索到的要少. 对于灰度图而言,一个像素点由8个比特组成.代替突出灰度级范围,我们可以突出特定比特来为整个图像外观作出贡献(理解这一点很重要)一副8比特灰度图可考虑分层1到8个比特平面.很容易理解的是,4个高阶比特平面,特别是最后两个比特平面,包含了在视觉上很重要的大多数数据.而低阶比特平面则在图像上贡献了更精细的灰度细节. 比特平面分层最重要的是它的分层算法,算法依据就是上段的黑体字,突出该层的比特,如何突出则是每一层分层算法需要考虑的

模块管理常规功能自定义系统的设计与实现(13--Grid导航设计初步[3])

Grid导航设计初步[3] 上一节介绍了如何自定义一个日期字段为导航列表,这一节定义数值字段为导航列表.自定义一个数值字段为导航列表时,设计过程和日期相同,只有一个不同,就是日期选择的是"年,年月,年季"等的导航方式,而数值字段选择一个预先设计好的数值区间来进行导航.先看一下导航效果. 设计的数值区间: 数值字段设置成导航字段的导航模式选项选择"按金额大小分组1". 另外再展示一个按比例导航分组的例子: 至此对于字符串,日期,布尔值,数值字段的单级导航都可以通过设置