分层导航的做法

最新推荐文章于 2022-02-22 20:04:29 发布
最新推荐文章于 2022-02-22 20:04:29 发布
阅读量159 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/wuxiaochao/p/6061547.html
版权 
<!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;" οnclick="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>

转载于:https://www.cnblogs.com/wuxiaochao/p/6061547.html

weixin_30951743
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
[练习6]利用css+js 设计二层导航栏
beiyuxinke的博客
04-07 698
二级分层导航栏          body{         text-align: center;/*这里和下面的margin: 0 auto;共同控制居中*/     }     #headNav{         margin: 0 auto;         height: 80px;         width: 600px;         border: 1
分层导航：简介
cungui5726的博客
08-17 344
Generally speaking, websites should feature relatively short, concise pages consisting of disciplined writing combined with judicious use of optimized graphics that retain user interest. This fact, co...
分层导航and隐藏导航
weixin_30823001的博客
03-27 79
一、分层导航 <!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&g...
分层导航
weixin_30323631的博客
03-29 60
1 <head> 2 <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...
如何实现一个楼层导航
chengxuyuanying的博客
02-22 428
// 首先需要给页面添加页面滚动监听事件 $(window).scroll(function(){ // 当页面滚动到一定的高度时,吸顶和侧边显示 if($(window).scrollTop()>500){ // 用动画的形式显示 $('.searchTop').stop().slideDown(1000); $('.sidebar').stop().fadeIn(1000); }else{ $('.searchTop').stop().slideUp(1000.
div分层
06-30
Div分层常用于创建导航菜单、弹出框、轮播图、浮动侧边栏等常见网页组件。通过熟练掌握div分层，开发者可以构建出富有层次感、响应式且易于维护的网页。 综上所述，div分层是HTML和CSS中的核心概念，对于创建美观且...
Iphone开发导航控制器实现视图的分层切换
03-04
Iphone和android手机的一个不同的地方是，大部分的android手机都有返回键，而Iphone只有一个home键，所以我们会发现在Iphone的大部分应用中会在顶部有一个导航条，比如系统的设置界面，该导航条完全按照栈的方式来...
网页导航栏模版PSD分层
02-23
网页导航栏模版PSD分层是一个非常实用的设计资源，尤其对于那些从事网页设计工作的专业人士。PSD分层意味着每个元素都是独立的图层，设计师可以根据需求自由编辑、调整和定制，大大提高了工作效率。在本资源中，包含...
C#左侧导航菜单
01-18
`TreeView`控件允许我们创建层级结构，非常适合展现菜单的分层关系。 3. **数据绑定**： 数据驱动的开发模式下，我们可以使用C#的MVVM（Model-View-ViewModel）设计模式。ViewModel中定义菜单数据，如标题、链接等...
悬浮动态分层导航
ai60135的博客
05-13 134
1、首先在<head>里面引用一个JQUERY的文件以用来制作鼠标点击动画效果（从网站上下载即可） 1 <script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 2、插入div（这里我的div是带有锚点效果的，已经用红...
magento2插件包.zip
07-19
ImprovedSortingforMagento2-2.7.1-CE AbandonedCartEmailfor
层级式导航返回到特定activity
刘剑峰的博客
03-07 1330
启用了应用图标的导航功能，利用ActionBar（）的setDisplayHomeAsUpEnabled（true）让应用图标转变为回退按钮 当我们要利用这个导航功能，也是通过覆盖Fragment的onOptionItemSelected（MenuItem item），并在方法体内实现返回activity的功能。 public boolean onOptionsItemSelected(Men
四个步骤实现层级清晰的导航栏
weixin_34360651的博客
06-21 218
【编者按】本文作者为 Wes McDowell，主要介绍通过四个步骤实现层级清晰的导航栏，进而提高网站的转化率。文章系国内 ITOM 管理平台 OneAPM 编译呈现。 精心规划的导航策略可以成就一个网站，反之，则可能毁了一个。规划得好，网站访客就会顺着你安排的路径走下去，要么购买你的商品、成为你的潜在客户，要么填完网站咨询表单。 规划得...
jsp实现导航栏
热门推荐
weixin_33795093的博客
04-22 1万+
一．frameset实现导航栏在web开发中必不可少，其中利用frameset来实现是一种比较常见的方法。frameset通过target可将相关的页面连接起来，实现导航。实际开发中注意target的对应关系即可。效果图如下：主导航区top.jsp左侧分导航left.jsp内容区main.jsp页脚down.jsp1.index.jsp 纵向：主导航，主页面，页脚三块....
一般企业网站首页图片轮播效果jquery和slide更改后的jq.sclide.js对图片轮播的控制
手可摘星河
10-31 2287
引用文件jquery-1.4.2.min.js的代码 View Code /*! * jQuery JavaScript Library v1.4.2 * http://jquery.com/ * * Copyright 2010, John Resig * Dual licensed under the MIT or GPL Version 2 licenses.
使magento的分层菜单以下拉菜单显示插件 - Improved Layered Navigation
Terry - 专注外贸B2C
01-21 822
<br />使magento的分层菜单以下拉菜单显示插件 - Improved Layered NavigationPosted 星期三, 01/27/2010 - 11:42 by Kevin Von<br />Magento中分层菜单默认是列表显示的，本插件可以使得其以下拉菜单显示，有时候也会挺方便的，不过这样的插件也需要19美元，不怎么值，呵呵...应该实现起来也不怎么麻烦的<br />可以去这里看看：http://www.magentocommerce.com/module/2783/improve
Android层级式导航
CDUT100的专栏
06-06 1155
1、Manifest：关联上下级Activity android:name=".subActivity" android:label="@string/app_name"> android:name="android.support.PARENT_ACTIVITY" android:value=".parentActivity"/> 2、子Activity设置：是否接受o
webview2 分层
最新发布
09-07
Webview2 分层是一种将Webview2控件拆解成不同的层次结构的方法。通过将Webview2控件分成不同的层次，可以实现更好的可定制性和控制性。 Webview2 分层通常包括三个层次：应用层、Webview2 控件层和渲染层。 应用层是最高层，负责管理和控制整个应用程序的逻辑。在应用层，我们可以根据需求添加自定义的功能和交互，例如处理用户输入、响应事件等。 Webview2 控件层是 Webview2 控件的核心部分，负责加载和展示网页内容。在这一层，我们可以对网页进行基本的操作，例如导航到指定URL、获取网页的标题、注入JavaScript等。 渲染层是Webview2控件的底层，主要负责将网页内容进行渲染并显示在屏幕上。渲染层使用Chromium内核来处理网页渲染，因此具有强大的渲染功能和性能优势。 通过将Webview2控件分成不同的层次，我们可以更好地进行定制和控制。例如，在应用层可以添加自定义的UI元素或逻辑，使Webview2控件与应用程序更好地融合；在Webview2控件层可以实现页面导航或与JavaScript的交互；在渲染层可以对页面进行更细粒度的控制，例如修改页面的样式或拦截网络请求。 总之，Webview2 分层是一种将Webview2控件拆解成不同层次结构的方法，通过这种方式可以实现更好的定制性和控制性，使Webview2控件更好地与应用程序整合，并满足不同的开发需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值