`

html隐藏式菜单

html 
阅读更多 
<html>
<head>
<TITLE>隐藏式菜单</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE> 
#ssm2 A 
{ FONT-SIZE: 12px; COLOR: #808080; FONT-FAMILY: verdana; TEXT-DECORATION: none}
#ssm2 A:hover
 { COLOR: #ccff33}
</STYLE>
</HEAD>
<BODY>
<SCRIPT language="javascript"> 
//状态栏显示信息
function MM_displayStatusMsg(msgStr) 
{ 
 status=msgStr;
 document.MM_returnValue = true;
}
//高亮显示
function highlight(x)
{
document.forms[x].elements[0].focus()
document.forms[x].elements[0].select()
}
//菜单弹出时的处理
function MM_jumpMenu(targ,selObj,restore)
{ 
 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
 if (restore) selObj.selectedIndex=0;
}
var NS;
IE=document.all;
NS=document.layers;
hdrFontFamily="Verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#CCCCCC";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="white";
linkOverBGColor="#CCCCCC";
linkTarget="_top";
YOffset=60;
staticYOffset=20;
menuBGColor="#CCCCCC";
menuIsStatic="no";
menuHeader="主流索引"
menuWidth=150; 
staticMode="advanced"
barBGColor="#C0C0C0";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="white";
barText="导航菜单";
//鼠标移走时的菜单处理
function moveOut() 
{
if (window.cancel)
{ cancel="";}
if (window.moving2)
 { clearTimeout(moving2);
  moving2="";
  }
if ((IE && ssm2.style.pixelLeft<0)||(NS && document.ssm2.left<0)) 
{
 if (IE) {ssm2.style.pixelLeft += (5%menuWidth);
}
if (NS) 
{
 document.ssm2.left += (5%menuWidth);
}
moving1 = setTimeout('moveOut()', 5)
}
else {
 clearTimeout(moving1)
 }
};
function moveBack() {
 cancel = moveBack1()
}
function moveBack1() {
 if (window.moving1) {
 clearTimeout(moving1)
}
if ((IE && ssm2.style.pixelLeft>(-menuWidth))||(NS && document.ssm2.left>(-150))) {
 if (IE) {ssm2.style.pixelLeft -= (5%menuWidth);
}
if (NS) {
 document.ssm2.left -= (5%menuWidth);
}
moving2 = setTimeout('moveBack1()', 5)}
 else {
 clearTimeout(moving2)
 }
};
lastY = 0;
//根据浏览器类型设置菜单模式
function makeStatic(mode) {
if (IE) {winY = document.body.scrollTop;var NM=ssm2.style
}
if (NS) {winY = window.pageYOffset;var NM=document.ssm2
}
if (mode=="smooth") {
 if ((IE||NS) && winY!=lastY) {
 smooth = .2 * (winY - lastY);
 if(smooth > 0) smooth = Math.ceil(smooth);
 else smooth = Math.floor(smooth);
 if (IE) NM.pixelTop+=smooth;
 if (NS) NM.top+=smooth;
 lastY = lastY+smooth;
}
setTimeout('makeStatic("smooth")', 1)
}
else if (mode=="advanced") {
 if ((IE||NS) && winY>YOffset-staticYOffset) {
 if (IE) {NM.pixelTop=winY+staticYOffset
 }
if (NS) {NM.top=winY+staticYOffset
 }
}
else {
 if (IE) {NM.pixelTop=YOffset}
 if (NS) {NM.top=YOffset-7 }
}
setTimeout('makeStatic("advanced")', 1)
 }
}
//根据浏览器类型初始化菜单
function init() {
if (IE) {
ssm2.style.pixelLeft = -menuWidth;
ssm2.style.visibility = "visible"
}
else if (NS) {
document.ssm2.left = -menuWidth;
document.ssm2.visibility = "show"
}
else {
alert('浏览器类型判断错误!')
}
}
//当用户选择菜单时，在状态栏提示导航地址
function MM_displayStatusMsg(msgStr) { 
 status=msgStr;
 document.MM_returnValue = true;
 
}
//判断浏览器类型
if (IE) {document.write('<DIV ID="ssm2" style="visibility:hidden;Position : Absolute ;Left : 0px ;Top : '+YOffset+'px ;Z-Index : 20;width:1px" onmouseover="moveOut()" onmouseout="moveBack()">')}
if (NS) {document.write('<LAYER visibility="hide" top="'+YOffset+'" name="ssm2" bgcolor="'+menuBGColor+'" left="0" onmouseover="moveOut()" onmouseout="moveBack()">')}
tempBar="";
for (i=0;i<barText.length;i++) {
tempBar+=barText.substring(i, i+1)+"<BR>"}
document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+16+2)+'" bgcolor="'+menuBGColor+'"><tr><td bgcolor="'+hdrBGColor+'" WIDTH="'+menuWidth+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+menuHeader+'</b></font></td><td align="center" rowspan="100" width="16" bgcolor="'+barBGColor+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD></tr>')
//添加菜单内容项的方法
function addItem(text, link, target) 
{
if (!target) {target=linkTarget}
document.write('<TR><TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+link+'" target="'+target+'" CLASS="ssm2Items">'+text+'</A></FONT></LAYER></ILAYER></TD></TR>')
}
 
//为菜单添加分类标题的方法
function addHdr(text)
 {
 document.write('<tr><td bgcolor="'+hdrBGColor+'" WIDTH="140"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+text+'</b></font></td></tr>')
 }
//下面是菜单内容和指定的导航地址
addItem('初级搜索', 'http://www.google.com', '');
 
addItem('中级搜索', 'http://www.google.com', '');
 
addItem('搜索原理', 'http://www.google.com', '');
 
addItem('深入搜索', 'http://www.google.com', '');
 
addItem('垂直搜索', 'http://www.google.com', '_blank');
 
addHdr('帮助');  //菜单标题
 
addItem('会员专属论坛', 'http://www.google.com', '_blank');
 
document.write('<tr><td bgcolor="'+hdrBGColor+'"><font size="0" face="Arial"> </font></td></TR></table>')
 
if (IE) {document.write('</DIV>')}
 
if (NS) {document.write('</LAYER>')}
 
if ((IE||NS) && (menuIsStatic=="yes"&&staticMode)) {makeStatic(staticMode);}
window.onload=init;
</SCRIPT>
</body>
</html>

 

分享到：
| RGB颜色转换
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ASP开发 C#语言 页面设置几个实例 设置为主页 解释型菜单 下拉式菜单 页面整体风格 自动隐藏式菜单 安徽机电职业技术学院 陈伟

    本教程将通过几个实例深入探讨如何使用C#进行ASP页面设置，包括设置主页、创建解释型菜单、设计下拉式菜单、调整页面整体风格以及实现自动隐藏式菜单。这些实例由安徽机电职业技术学院的陈伟老师精心编排，旨在帮助...

    jquery显示隐藏菜单实例

    "jquery显示隐藏菜单实例"是一个常见的需求，尤其是在构建响应式或者交互式的网站时。这个实例展示了如何利用jQuery轻松实现菜单的显示和隐藏功能，以提高用户体验。 首先，我们需要在HTML结构中定义菜单元素。通常...

    html展开式菜单

    HTML展开式菜单是一种常见的网页交互元素，用于组织和展示网站的层级结构，为用户提供便捷的导航体验。在网页设计中，展开式菜单可以节省空间，提高网页的可读性和用户体验。下面将详细介绍如何制作HTML展开式菜单，...

    9种html5+css3隐藏侧边栏导航菜单动画效果

    在这个主题中，“9种html5+css3隐藏侧边栏导航菜单动画效果”主要关注的是如何利用这两门技术来创建具有视觉吸引力的侧边栏导航菜单，并通过动态效果提升用户体验。 首先，HTML5的新元素如`&lt;nav&gt;`、`&lt;section&gt;`和`...

    基于jquery和Bootstrap3的隐藏侧边栏菜单

    总结来说，基于jQuery和Bootstrap3的隐藏侧边栏菜单是一种结合了两者优点的解决方案，它利用了Bootstrap3的响应式布局和jQuery的交互功能，为用户提供了流畅且适应性强的导航体验。通过理解和实现这样的特效，开发者...

    购酒网隐藏式商品导航菜单.zip

    对于移动设备，隐藏式菜单可以提供更简洁的界面，避免小屏幕上过多的导航选项挤占有限的空间。 此外，优化性能也是重要的一环。为了避免不必要的计算和重绘，可以使用事件委托来处理多个菜单项，而不是分别为每个项...

    滑出式隐藏菜单样式.rar

    此外，滑出式菜单还可能涉及到响应式设计，确保在不同设备和屏幕尺寸上都能正常工作。这通常通过媒体查询（media queries）来实现，根据屏幕宽度调整菜单的布局和行为。例如，对于大屏幕设备，菜单可能一开始就可见...

    页面树形可隐藏导航菜单

    5. **响应式设计**：考虑到现代网页设计对响应式的重视，这个菜单应该能根据浏览器窗口大小自动调整布局，保证在桌面和移动设备上都能良好显示。 6. **可扩展性**：一个好的树形导航菜单设计应具备良好的可扩展性，...

    html5抽屉式滑动菜单栏.zip

    HTML5 抽屉式滑动菜单栏是一种现代网页设计中常见的交互元素，它提供了一种优雅的方式来展示导航菜单，尤其适用于移动设备。这种菜单在页面加载时并不立即可见，而是通过用户触发（如点击按钮或滑动屏幕）从页面边缘...

    9种html5+css3隐藏侧边栏导航菜单动画效果.rar

    在本资源包中，“9种html5+css3隐藏侧边栏导航菜单动画效果”展示了如何利用这两项技术来设计各种创新且实用的侧边栏导航菜单。 1. **HTML5基础**：HTML5是超文本标记语言的最新版本，增加了许多新的元素，如（导航...

    HTML5折叠卡片式下拉菜单代码

    HTML5折叠卡片式下拉菜单是一种常见的网页交互设计，它结合了HTML5的新特性，为用户提供了一种优雅的方式来展示和导航复杂的信息结构。在本文中，我们将深入探讨这种设计模式的实现原理、相关HTML5元素以及CSS样式和...

    js左侧隐藏菜单带有二级子菜单

    在网页设计中，左侧隐藏菜单是一种常见的布局方式，尤其在响应式设计中更为流行。这种设计可以节省空间，提供简洁的界面，同时在需要时展开丰富的导航选项。本项目涉及的"js左侧隐藏菜单带有二级子菜单"是针对这种...

    6种侧边显示隐藏菜单

    折叠式菜单允许用户逐级展开或收起子菜单，适用于层次结构复杂的导航。这种菜单在展开时会有相应的动画效果，如淡入淡出、旋转等，增加视觉吸引力。 3. **抽屉式菜单**： 抽屉式菜单如同其名，从屏幕边缘像拉开...

    HTML5实现网页顶部的向下滑出式菜单.rar

    在这个“HTML5实现网页顶部的向下滑出式菜单”的示例中，我们将深入探讨如何利用这两种技术来创建一个优雅的网页导航组件。 首先，HTML5是超文本标记语言的最新版本，它引入了许多新的元素和API，旨在提高网页的...

    页面隐藏菜单栏

    它们可以是固定的顶部或底部导航，也可以是侧边抽屉式菜单。隐藏菜单栏的设计目的通常是节省屏幕空间，尤其是在小屏幕设备上，如手机和平板电脑。 在Web开发中，实现页面隐藏菜单栏通常涉及到HTML、CSS和JavaScript...

    滑出式菜单

    在网页设计中，滑出式菜单通常隐藏在主菜单按钮或汉堡图标之后，当用户鼠标悬停或点击时，会以平滑、动态的方式滑出显示子菜单项。 滑出式菜单的设计特点和优势包括： 1. **空间效率**：滑出式菜单节省了网页的垂直...

    适合移动设备触摸屏的html5响应式导航菜单

    HTML5响应式导航菜单是现代网页设计中的一个重要组成部分，尤其对于移动设备的用户界面来说，其易用性和适应性显得尤为关键。这款针对触摸屏优化的HTML5导航菜单旨在提供流畅的用户体验，无论用户是在手机、平板还是...

    弹出式菜单

    总结起来，这个弹出式菜单项目涉及到HTML结构、CSS样式设计和JavaScript交互的综合运用，特别是jQuery库的应用。通过学习和理解这个示例，开发者可以提升自己在创建动态、交互性网页元素方面的能力，并为自己的网站...

    JavaScript 菜单！树形菜单，仿QQ菜单，折叠式菜单！

    无论是树形、仿QQ还是折叠式菜单，都可以通过结合HTML、CSS和JavaScript实现。在实际开发中，应注重用户体验，确保菜单易于使用，同时兼顾性能和可维护性。通过不断学习和实践，开发者可以创造出更多富有创意和实用...

Magicbox
Global site tag (gtag.js) - Google Analytics