zhaoshijie
- 浏览: 2261701 次
- 性别:
- 来自: 北京
-
文章分类
- 全部博客 (423)
- FileNet相关 (3)
- 应用服务器相关 (22)
- Java综合 (77)
- 持久层 (24)
- struts (11)
- webservice (8)
- 虚拟机 (2)
- 光盘刻录 (0)
- AD及AD集群 (1)
- JS (33)
- F5 (0)
- loadrunner8.1 (0)
- Java 反编译工具 (2)
- DataBase (62)
- ant (1)
- 操作系统 (29)
- 我的任务 (3)
- 平台架构 (16)
- 业务规则引擎 (2)
- 模板 (1)
- EJB (5)
- spring (24)
- CMMI (1)
- 项目管理 (20)
- LDAP (13)
- JMS (10)
- JSP (19)
- JBPM (2)
- web MVC框架设计思想 (2)
- 第三方支付平台 (2)
- BUG管理工具 (1)
- 垃圾站 (2)
- php (1)
- swing (1)
- 书籍 (1)
- QQ qq (2)
- 移动互联网 (26)
- 爱听的歌曲 (0)
- hadoop (4)
- 数据库 (9)
- 设计模式 (1)
- 面试经验只谈 (1)
- 大数据 (9)
- sp (1)
- 缓存数据库 (8)
- storm (2)
- taobao (2)
- 分布式，高并发，大型互联网，负载均衡 (6)
- Apache Ignite (0)
- Docker & K8S (0)
最新评论
-
wangyudong：
新版本 Wisdom RESTClienthttps://gi ...
spring rest mvc使用RestTemplate调用 -
wangyudong：
很多API doc生成工具生成API文档需要引入第三方依赖，重 ...
spring rest mvc使用RestTemplate调用 -
zhaoshijie：
cfying 写道大侠，还是加载了两次，怎么解决啊？求。QQ： ...
spring容器加载完毕做一件事情（利用ContextRefreshedEvent事件） -
xinglianxlxl：
对我有用，非常感谢
spring容器加载完毕做一件事情（利用ContextRefreshedEvent事件） -
k_caesar：
多谢，学习了
利用maven的resources、filter和profile实现不同环境使用不同配置文件
首先推荐相关网站：http://www.111cn.net/tags.php/%b5%bc%ba%bd%b2%cb%b5%a5
该网站包含了多种多样的导航下拉菜单。
例子：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css菜单演示</title>
<style type="text/css">
<!--
*{margin:0;padding:0;border:0;}
body {
font-family: arial, 宋体, serif;
font-size:12px;
}
#nav {
line-height: 24px; list-style-type: none; background:#666;
}
#nav a {
display: block; width: 80px; text-align:center;
}
#nav a:link {
color:#666; text-decoration:none;
}
#nav a:visited {
color:#666;text-decoration:none;
}
#nav a:hover {
color:#FFF;text-decoration:none;font-weight:bold;
}
#nav li {
float: left; width: 80px; background:#CCC;
}
#nav li a:hover{
background:#999;
}
#nav li ul {
line-height: 27px; list-style-type: none;text-align:left;
left: -999em; width: 180px; position: absolute;
}
#nav li ul li{
float: left; width: 180px;
background: #F6F6F6;
}
#nav li ul a{
display: block; width: 156px;text-align:left;padding-left:24px;
}
#nav li ul a:link {
color:#666; text-decoration:none;
}
#nav li ul a:visited {
color:#666;text-decoration:none;
}
#nav li ul a:hover {
color:#F3F3F3;text-decoration:none;font-weight:normal;
background:#C00;
}
#nav li:hover ul {
left: auto;
}
#nav li.sfhover ul {
left: auto;
}
#content {
clear: left;
}
-->
</style>
<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
}
}
}
window.onload=menuFix;
//--><!]]></script>
</head>
<body>
<ul id="nav">
<li><a href="#">产品介绍</a>
<ul>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
</ul>
</li>
<li><a href="#">服务介绍</a>
<ul>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二服务二</a></li>
<li><a href="#">服务二服务二服务二</a></li>
<li><a href="#">服务二</a></li>
</ul>
</li>
<li><a href="#">成功案例</a>
<ul>
<li><a href="#">案例三</a></li>
<li><a href="#">案例</a></li>
<li><a href="#">案例三案例三</a></li>
<li><a href="#">案例三案例三案例三</a></li>
</ul>
</li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四111</a></li>
</ul>
</li>
<li><a href="#">在线演示</a>
<ul>
<li><a href="#">演示</a></li>
<li><a href="#">演示</a></li>
<li><a href="#">演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示演示演示演示</a></li>
</ul>
</li>
<li><a href="#">联系我们</a>
<ul>
<li><a href="#">联系联系联系联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">联系联系</a></li>
<li><a href="#">联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
</ul>
</li>
</ul>
</body>
</html>
该网站包含了多种多样的导航下拉菜单。
例子：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css菜单演示</title>
<style type="text/css">
<!--
*{margin:0;padding:0;border:0;}
body {
font-family: arial, 宋体, serif;
font-size:12px;
}
#nav {
line-height: 24px; list-style-type: none; background:#666;
}
#nav a {
display: block; width: 80px; text-align:center;
}
#nav a:link {
color:#666; text-decoration:none;
}
#nav a:visited {
color:#666;text-decoration:none;
}
#nav a:hover {
color:#FFF;text-decoration:none;font-weight:bold;
}
#nav li {
float: left; width: 80px; background:#CCC;
}
#nav li a:hover{
background:#999;
}
#nav li ul {
line-height: 27px; list-style-type: none;text-align:left;
left: -999em; width: 180px; position: absolute;
}
#nav li ul li{
float: left; width: 180px;
background: #F6F6F6;
}
#nav li ul a{
display: block; width: 156px;text-align:left;padding-left:24px;
}
#nav li ul a:link {
color:#666; text-decoration:none;
}
#nav li ul a:visited {
color:#666;text-decoration:none;
}
#nav li ul a:hover {
color:#F3F3F3;text-decoration:none;font-weight:normal;
background:#C00;
}
#nav li:hover ul {
left: auto;
}
#nav li.sfhover ul {
left: auto;
}
#content {
clear: left;
}
-->
</style>
<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
}
}
}
window.onload=menuFix;
//--><!]]></script>
</head>
<body>
<ul id="nav">
<li><a href="#">产品介绍</a>
<ul>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
</ul>
</li>
<li><a href="#">服务介绍</a>
<ul>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二服务二</a></li>
<li><a href="#">服务二服务二服务二</a></li>
<li><a href="#">服务二</a></li>
</ul>
</li>
<li><a href="#">成功案例</a>
<ul>
<li><a href="#">案例三</a></li>
<li><a href="#">案例</a></li>
<li><a href="#">案例三案例三</a></li>
<li><a href="#">案例三案例三案例三</a></li>
</ul>
</li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四111</a></li>
</ul>
</li>
<li><a href="#">在线演示</a>
<ul>
<li><a href="#">演示</a></li>
<li><a href="#">演示</a></li>
<li><a href="#">演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示演示演示演示</a></li>
</ul>
</li>
<li><a href="#">联系我们</a>
<ul>
<li><a href="#">联系联系联系联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">联系联系</a></li>
<li><a href="#">联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
</ul>
</li>
</ul>
</body>
</html>
- CSS_and_JS多种菜单.rar (37.9 KB)
- 下载次数: 20
分享到：
发表评论
-
正则表达式匹配聊天中所有url连接地址-高亮显示
2017-06-07 18:48 1436关键字：正则表达式匹配聊天中所有url连接地址-高亮显示 需 ... -
各大巨头电商提供的IP库API接口-新浪、搜狐、阿里...
2015-04-22 13:18 15910关键字：各大巨头电商提供的IP库API接口-新浪、搜狐、阿里. ... -
treeTable
2015-03-25 00:36 764jqgrid中文官网：http://blog.mn886.ne ... -
我的定时器
2014-01-12 19:24 799关键字：我的定时器 说明：请不要试图下载使用，此附件没有任 ... -
Highcharts漂亮大气的图表(纯JS)
2013-12-14 12:09 5978关键字：Highcharts漂亮大气的图表(纯JS) ... -
智能搜索提示功能
2013-11-23 20:12 1235关键字：智能搜索提示功能 推荐一：http://site518 ... -
jQuery 工具提示插件 PoshyTip
2013-08-03 00:48 36039关键字：jQuery 工具提示插件 PoshyTip 在 ... -
js打开浏览器文件下载框
2013-07-15 13:49 21092关键字：js打开浏览器文件下载框 说明：此方法兼容IE、火 ... -
常有前端验证JS
2013-02-03 15:12 1771关键字：常有前端验证JS 附件是前端界面常用验证工具 ... -
jquery操作iframe中的js函数
2013-01-06 10:39 13037关键字：jquery操作iframe中的js函数 1 ... -
网页特效、各功能大全
2012-12-06 12:34 920关键字：网页特效、各功能大全 http://www.c ... -
js前端MD5加密
2012-08-13 10:30 2556关键字：js前端MD5加密 大家好：附件是js使用md5算 ... -
js操作cookie（增删改查）
2012-08-09 10:50 2049关键字：js操作cookie（增删改查） 附件是js操作c ... -
jQuery监听事件经典例子
2011-10-17 00:27 3089关键字：jQuery监听事件经典例子 js代码： === ... -
ajax jQuery 实现文件上传
2011-09-21 22:33 16921.上传jsp。 <table cellpadd ... -
jQuery ajax libs
2011-08-31 10:34 855附件是 jQuery ajax 相关jar包。 -
IE中调试JS的一款很好的工具
2011-05-02 18:52 1229附件是 IE中调试JS的一款很好用的工具，欢迎下载使用。 ... -
JS日历控件
2011-03-07 14:09 1371附件是现成的JS日历控件，使用起来相当简单，有例子去看看吧，喜 ... -
页面提示
2011-01-26 13:30 931附件是：页面提示相关例子，请下载使用。。 -
无限极菜单之全自动化配置平台（待优化中..请等待消息）
2011-01-10 21:43 1094关键字：无限极菜单之全自动化配置平台 使用方法： 应用服务器 ...
相关推荐
在网页设计中，头部超级菜单导航是一种常见的交互模式，它能有效地组织大量链接，提高用户在网站中的导航效率。这种设计通常应用于大型网站或电子商务平台，以提供清晰、直观的层级结构，帮助用户快速找到所需信息。...
在网页设计中，菜单导航是不可或缺的部分，它帮助用户在网站间轻松地移动，找到他们想要的信息。本知识点主要集中在创建各种动态、交互性强的菜单导航技术上，以提升用户体验和网站的吸引力。以下是根据标题和描述...
"jQuery自适应横排下拉菜单导航代码"提供了一个高效且美观的解决方案，尤其适合那些希望提升用户体验的开发者。这个代码利用jQuery库实现，能够根据屏幕尺寸自动调整布局，确保在各种设备上都能良好地展示。 首先，...
"js左侧边导航菜鼠标悬停展开二级菜单导航"这个主题主要涉及到JavaScript技术在实现动态交互效果上的应用，特别是如何通过鼠标悬停事件来控制二级菜单的展开与收起。 JavaScript是一种轻量级的脚本语言，常用于网页...
在创建左侧菜单导航时，我们可以使用`<nav>`元素来定义导航区域，`<ul>`和`<li>`元素来构建菜单列表，而`<a>`元素则用于链接各个菜单项。此外，HTML5还允许我们通过`data-*`属性添加自定义数据，这在实现菜单的扩展...
"CSS3响应式多级下拉菜单导航代码"是一个专为现代网页设计打造的解决方案，它结合了扁平化设计风格、字体图标以及对移动设备的良好适应性，确保在不同屏幕尺寸下的良好可读性和易用性。 首先，CSS3（层叠样式表第三...
本文将详细介绍纯JS实现的19种下拉菜单导航效果，这些效果不仅美观，而且实用，能够提升用户在网站上的浏览体验。 首先，下拉菜单的基本原理是利用JavaScript的事件监听和DOM操作来实现。当用户鼠标悬停在主菜单项...
在Android应用开发中，创建一个类似微信或支付宝的菜单导航是常见的需求，它提供了一种高效的方式来组织和展示多个功能模块。"android菜单导航"这个主题涵盖了如何实现这样的交互效果，通常包括侧滑菜单、底部导航栏...
本教程将深入探讨如何使用jQuery实现一个横向伸缩菜单导航，当鼠标悬停在导航项上时，其子菜单会向左滑动展开。 首先，我们需要了解jQuery的基本用法。jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理...
【jQuery宽屏通栏下拉菜单导航代码】是一款基于JavaScript库jQuery实现的创新设计，旨在为网站提供一种仿微软风格的蓝色大气、全屏覆盖的导航菜单效果。这个功能强大的菜单系统不仅美观，而且交互性强，能提升用户...
【首页菜单导航】是网页设计和开发中的一个重要组成部分，它为用户提供了一个清晰、直观的界面，帮助用户在网站中快速定位并访问各个功能区域。在本文中，我们将深入探讨菜单导航的设计原则、常见类型以及实现技术，...
【仿京东菜单导航】是一种常见的前端网页设计技术，主要用于构建类似京东网站的高效、清晰的导航栏。在电商网站中，一个优秀的导航菜单是至关重要的，因为它能够帮助用户快速找到他们感兴趣的商品或服务，提高用户...
在IT行业中，网页设计是至关重要的一环，而菜单导航作为用户与网站交互的桥梁，其设计风格和功能实现直接影响到用户体验。"菜单导航样式"这个主题聚焦于利用Jquery、Css和div技术来创建吸引人的、易用的网页菜单。...
144个精品JQuery特效菜单导航 没有你找不到的特效菜单导航 只有你没见过的特效菜单导航 由于部分导航示例代码用到了html5 部分浏览器可能不支持 如果你想急速浏览更多的特效菜单导航 请不要使用版本过低的浏览器 ...
在IT行业中，菜单导航是构建用户界面（UI）和提升用户体验（UX）的关键元素之一。在网页设计中，良好的菜单导航能够帮助用户快速理解和访问网站的内容，提高网站的可用性和可发现性。本篇文章将深入探讨"菜单导航...
css+div的菜单导航，简单明了适用与初学者， 内部有简单的js代码，有一点编程基础都能看懂。 兼容各种浏览器除IE5.0以下浏览器
本文将深入探讨"麦考林菜单导航_下拉菜单可包含较多内容"这一主题，结合描述中的实例，来分析如何利用高效的菜单导航设计提升用户体验。 麦考林是一家知名的电商平台，其在网易广告上的投入体现了对品牌形象的重视...
这是一款很强的menu，根据亚马逊菜单的算法做出来的，很实用。 仿亚马逊菜单导航效果代码 点击查看演示
本文将详细讨论如何实现“仿QQ菜单导航效果，左边导航菜单”这一功能，以及其在实际应用中的重要性。 首先，QQ菜单导航效果是借鉴了QQ应用程序的用户界面设计，这种设计通常包括左侧的导航栏，用于展示各种功能模块...