很漂亮的菜单收集

最新推荐文章于 2022-11-29 17:52:29 发布
最新推荐文章于 2022-11-29 17:52:29 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： 忘掉了的开发 文章标签： function class tutorials div menu shell
分散型菜单

程序代码 程序代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2800.1400" name=GENERATOR></HEAD>
<BODY>
<STYLE type=text/css>.dot {
FONT-SIZE: 1px; Z-INDEX: 100; VISIBILITY: hidden; WIDTH: 6px; CURSOR: hand; POSITION: absolute; HEIGHT: 6px; BACKGROUND-COLOR: red
}
.dotoff {
FONT-SIZE: 1px; Z-INDEX: 100; VISIBILITY: hidden; WIDTH: 6px; CURSOR: default; POSITION: absolute; HEIGHT: 6px; BACKGROUND-COLOR: gray
}
.dotempty {
FONT-SIZE: 1px; VISIBILITY: hidden; WIDTH: 6px; CURSOR: hand; POSITION: absolute; HEIGHT: 6px; BACKGROUND-COLOR: orange; zindex: 100
}
.caption {
FONT-SIZE: 11px; Z-INDEX: 1; VISIBILITY: hidden; CURSOR: default; COLOR: black; FONT-FAMILY: Tahoma; POSITION: absolute; TEXT-ALIGN: center
}
BODY {
MARGIN: 0px; BACKGROUND-COLOR: white
}
A {
COLOR: silver; TEXT-DECORATION: none
}
P {
FONT-SIZE: 10px; COLOR: black; FONT-FAMILY: tahoma
}
</STYLE>

<SCRIPT language=JavaScript type=text/javascript>
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=new lib_bwcheck()


// The code of this script is in the body, the browsercheck above is not used.

</SCRIPT>

<SCRIPT language=javascript1.2 type=text/javascript>
<!--
// DotMenu
// provides cross-browser functionality
//======================================
function getObjectRef(name) {
if(document.getElementById) return document.getElementById(name);
else if(document.all) return document.all[name];
else return null;
}

// general functions to assist the script
//========================================
function show(name) {
var el = getObjectRef(name);
if(el) el.style.visibility = "visible";
}
function hide(name) {
var el = getObjectRef(name);
if(el) el.style.visibility = "hidden";
}
function getWidth(name) {
var el = getObjectRef(name);
return el.offsetWidth;
}
function getHeight(name) {
var el = getObjectRef(name);
return el.offsetHeight;
}
function moveMe(name,x,y) {
var el = getObjectRef(name);
if(el) { el.style.top = parseInt(y); el.style.left = parseInt(x); }
}
function moveBy(name,x,y) {
var el = getObjectRef(name);
if(el) { el.style.top = parseInt(el.style.top) + parseInt(y); el.style.left = parseInt(el.style.left) + parseInt(x); }
}

// Creates the menu objects
//==========================
var menuCount = 0;
function menuObject(name,x,y,caption, r, parent) {
if ( (!document.getElementById&&!document.all) || navigator.userAgent.indexOf("Opera")>-1) return;
document.write('<div id="divDot' + menuCount + '" class="dotempty" style="top: ' + y + '; left: ' + x + '"></div>');
document.write('<div id="divCap' + menuCount + '" class="caption" style="top: 0; left: 0">' + caption + '</div>');

this.name = name;
this.parent = parent
this.ref = "divDot" + menuCount;
this.caption = "divCap" + menuCount
if(r) this.radius = r;
else this.radius = 400;
this.subMenus = new Array();
this.state = 0;
this.moving = false;
if(this.parent) this.action = "null";
else this.action = "toggle";
if(this.parent) this.startAngle = parent.startAngle;
else this.startAngle = 0;

getObjectRef(this.ref).objRef = this.name;

this.show = function() { show(this.ref); }
this.hide = function() { hide(this.ref); }
this.moveMe = function(x,y) { if(this.parent) { x += this.parent.x(); y += this.parent.y(); } moveMe(this.ref,x,y); }
this.moveBy = function(x,y) { moveBy(this.ref,x,y); }
this.x = function() { return parseInt(getObjectRef(this.ref).style.left); }
this.y = function() { return parseInt(getObjectRef(this.ref).style.top); }
this.w = function() { return getWidth(this.ref); }
this.h = function() { return getHeight(this.ref); }

this.showCaption = function() {
moveMe(this.caption, this.x() - (getWidth(this.caption)/2) + (this.w()/2), (this.y() + this.h()));
show(this.caption);
}
this.hideCaption = function() {
hide(this.caption);
}
this.setCaption = function(c) { getObjectRef(this.caption).innerHTML = c;}

this.addItem = function(c,action,r) {
getObjectRef(this.ref).className = "dot";
if(!r) r = this.radius/2;
var sub = new menuObject(this.name + ".subMenus[" + this.subMenus.length + "]",0,0,c,r,this);
sub.parent = this;
sub.action = action;
sub.moveMe(0,0);
this.subMenus[this.subMenus.length] = sub;
return sub;
}

this.expand = function() {
if(this.subMenus.length > 0) {
var p = true;
if(this.parent) {
p = !this.parent.moving;
for(var i=0; i<this.parent.subMenus.length;i++)
p = p && ((this.parent.subMenus[i].state==0) || (this.parent.subMenus[i].state==this.parent.subMenus[i].subMenus.length)) && (this.parent.subMenus[i].moving==false);
} else var o = false;


if((!this.parent || this.parent.state == this.parent.subMenus.length) && p) {
if(this.parent) this.collapseAll(this.name);

var diff = 360 / this.subMenus.length;
for(var i=0;i<this.subMenus.length;i++){
this.subMenus[i].moveMe(0,0);
this.subMenus[i].show();
this.moving = true;
this.subMenus[i].slide(this.subMenus[i].radius * cos(degToRad((diff*i)+this.startAngle)), this.subMenus[i].radius * sin(degToRad((diff*i)+this.startAngle)), this.name + ".subMenus[" + i + "].showCaption();" + this.name + ".moving=false;" + this.name + ".state+=1;");
}
if(this.parent){
getObjectRef(this.parent.ref).style.filter = "alpha (opacity=33)";
getObjectRef(this.parent.ref).style.MozOpacity = "33%";

getObjectRef(this.parent.ref).className = "dotoff";
getObjectRef(this.parent.caption).style.filter = "alpha (opacity=33)";
getObjectRef(this.parent.caption).style.MozOpacity = "33%";
for(i=0;i<this.parent.subMenus.length;i++) {
getObjectRef(this.parent.subMenus[i].ref).style.filter = "alpha (opacity=66)";
getObjectRef(this.parent.subMenus[i].ref).style.MozOpacity = "66%";
getObjectRef(this.parent.subMenus[i].caption).style.filter = "alpha (opacity=66)";
getObjectRef(this.parent.subMenus[i].caption).style.MozOpacity = "66%";
}
if(this.parent.parent) {
for(i=0;i<this.parent.parent.subMenus.length;i++) {
getObjectRef(this.parent.parent.subMenus[i].ref).style.filter = "alpha (opacity=33)";
getObjectRef(this.parent.parent.subMenus[i].ref).style.MozOpacity = "33%";
getObjectRef(this.parent.parent.subMenus[i].ref).className = "dotoff";
getObjectRef(this.parent.parent.subMenus[i].caption).style.filter = "alpha (opacity=33)";
getObjectRef(this.parent.parent.subMenus[i].caption).style.MozOpacity = "33%";
}
getObjectRef(this.parent.parent.ref).style.MozOpacity = "33%";
getObjectRef(this.parent.parent.ref).style.MozOpacity = "33%";
getObjectRef(this.parent.parent.ref).className = "dotoff";
}
}
getObjectRef(this.ref).style.filter = "alpha (opacity=66)";
getObjectRef(this.caption).style.filter = "alpha (opacity=66)";
getObjectRef(this.ref).style.MozOpacity = "66%";
getObjectRef(this.caption).style.MozOpacity = "66%";
}
}
}

this.collapse = function() {
var p = true;
p = !this.moving;
for(var i=0; i<this.subMenus.length;i++)
p = p && (this.subMenus[i].state==0) && (this.subMenus[i].moving==false);

if(p && this.subMenus.length > 0) {
for(var i=0;i<this.subMenus.length;i++){
this.subMenus[i].hideCaption();
this.moving = true;
this.subMenus[i].slide(0, 0, this.name + ".subMenus[" + i + "].hide();" + this.name + ".moving=false;" + this.name + ".state-=1;");
}
if(this.parent){
getObjectRef(this.parent.ref).style.filter = "alpha (opacity=66)";
getObjectRef(this.parent.ref).style.MozOpacity = "66%";
if(this.parent.subMenus.length != 0)
getObjectRef(this.parent.ref).className = "dot";
else
getObjectRef(this.parent.ref).className = "dotempty";
getObjectRef(this.parent.caption).style.filter = "alpha (opacity=66)";
getObjectRef(this.parent.caption).style.MozOpacity = "66%";
for(i=0;i<this.parent.subMenus.length;i++) {
getObjectRef(this.parent.subMenus[i].ref).style.filter = "alpha (opacity=100)";
getObjectRef(this.parent.subMenus[i].ref).style.MozOpacity = "100%";
if(this.parent.subMenus[i].subMenus.length != 0)
getObjectRef(this.parent.subMenus[i].ref).className = "dot";
else
getObjectRef(this.parent.subMenus[i].ref).className = "dotempty";
getObjectRef(this.parent.subMenus[i].caption).style.filter = "alpha (opacity=100)";
getObjectRef(this.parent.subMenus[i].caption).style.MozOpacity = "100%";
}
if(this.parent.parent) {
for(i=0;i<this.parent.parent.subMenus.length;i++) {
getObjectRef(this.parent.parent.subMenus[i].ref).style.filter = "alpha (opacity=66)";
getObjectRef(this.parent.parent.subMenus[i].ref).style.MozOpacity = "66%";
if(this.parent.parent.subMenus[i].subMenus.length != 0)
getObjectRef(this.parent.parent.subMenus[i].ref).className = "dot";
else
getObjectRef(this.parent.parent.subMenus[i].ref).className = "dotempty";
getObjectRef(this.parent.parent.subMenus[i].caption).style.filter = "alpha (opacity=66)";
getObjectRef(this.parent.parent.subMenus[i].caption).style.MozOpacity = "66%";
}
}
}
getObjectRef(this.ref).style.filter = "alpha (opacity=100)";
getObjectRef(this.caption).style.filter = "alpha (opacity=100)";
getObjectRef(this.ref).style.MozOpacity = "100%";
getObjectRef(this.caption).style.MozOpacity = "100%";
}
}

this.collapseAll = function(except) {
for(var i=0;i<this.parent.subMenus.length;i++) {
if(this.parent.subMenus[i].name!=except && this.parent.subMenus[i].state==this.parent.subMenus[i].subMenus.length) {
this.parent.subMenus[i].collapse();
}
}
}

this.toggle = function(e) {
if(document.all) id = window.event.srcElement;
else id = e.target;
var dot = eval(id.objRef);

if(dot.state==0 && !dot.moving) dot.expand();
else if(dot.state==dot.subMenus.length && !dot.moving) dot.collapse()
}

this.doAction = function(e) {
if(document.all) id = window.event.srcElement;
else id = e.target;
var dot = eval(id.objRef);

if(dot.action == "toggle") dot.toggle(e);
else eval(dot.action);
}

//change these if you want to change the events that trigger the actions
//========================================================================
//getObjectRef(this.ref).onmousemove = this.toggle;
getObjectRef(this.ref).onmouseup = this.doAction;

this.slide = function(xx,yy,func) {
if(!func) func = "";
var px = this.parent.x();
var py = this.parent.y();

var x = xx - this.x() + px;
var y = yy - this.y() + py;

var d = sqrt(square(xx-this.x() + px) + square(yy-this.y() + py));

var v = d/8;
if(v<1) v = 1;

if( (Math.abs(x) < v) && (Math.abs(y) < v) ) {
moveMe(this.ref,xx + px,yy + py);
if(func != "") eval(func);
} else {
var a = round(atan(x,y));
dx = round(v * cos(degToRad(a)));
dy = round(v * sin(degToRad(a)));

this.moveBy(dx,dy);
setTimeout(this.name + ".slide(" + xx + "," + yy + ", '" + func + "');",10);
}
}
// Preoading the windows filters.
if (menuCount==0 && document.all) document.all[this.ref].style.filter = "alpha (opacity=100)";
menuCount++;
return this;
}


// Math functions
//================
var pi = Math.PI;
function square(x) { return (x*x); }
function sqrt(x) { return Math.sqrt(x); }
function round(x) { return Math.round(x); }
function rand(x,y) { return (round(Math.random()*(y-x)) + x); }

function cos(x) { return Math.cos(x) }
function sin(x) { return Math.sin(x) }

function degToRad(x) { return ( x/(360/(2*pi)) ); }
function radToDeg(x) { return ( x*(360/(2*pi)) ); }


function atan(s,t) {
if( s == 0.0 && t > 0.0)
angle = 90.0;
else if(s == 0.0 && t < 0.0)
angle = 270.0;
else if (s < 0.0 )
angle = 180.0 + radToDeg(Math.atan(t/s));
else if (s > 0.0 && t < 0.0)
angle = 360.0 + radToDeg(Math.atan(t/s));
else {
if(s==0.0) s=0.00001;
angle = radToDeg(Math.atan(t/s));
}
if(angle < 0.0) angle += 360.0;
return angle;
}
//get dimentions of the page
if(document.all) pageWidth = document.body.offsetWidth-20;
else pageWidth = innerWidth;
if(document.all) pageHeight = document.body.offsetHeight-4;
else pageHeight = innerHeight;

//Create main menu
var menu = new menuObject("menu",pageWidth/2,pageHeight/2,"DhtmlCentral Site Map",pageHeight/2);
menu.startAngle = -90;

//show menu and caption
menu.show();
menu.showCaption();

//Add submenus
menu.addItem("news","window.open('/news')");
menu.addItem("scripts","toggle");
menu.addItem("tutorials","toggle");
menu.addItem("forums","toggle");
menu.addItem("resources","toggle");

menu.subMenus[1].addItem("FoldOutMenu","window.open('/script/script22.asp')");
menu.subMenus[1].addItem("Loading Bar","window.open('/script/script17.asp')");
menu.subMenus[1].addItem("Window Script","window.open('/script/script16.asp')");
menu.subMenus[1].addItem("PageSlideFade","window.open('/script/script15.asp')");
menu.subMenus[1].addItem("Circle Menu","window.open('/script/script14.asp')");
menu.subMenus[1].addItem("Annimation Intro","window.open('/script/script9.asp')");
menu.subMenus[1].addItem("NewsSlideFade","window.open('/script/script10.asp')");
menu.subMenus[1].addItem("Other Scripts","window.open('/script/')");


menu.subMenus[2].addItem("Scripting for vs5 browsers","window.open('/tutorials/tutorial5.asp')");
menu.subMenus[2].addItem("Makeing a Dhtml Script","window.open('/tutorials/tutorial6.asp')");
menu.subMenus[2].addItem("Filters & Transitions","window.open('/tutorials/tutorial4.asp')");
menu.subMenus[2].addItem("Dhtml Library","window.open('/tutorials/tutorial3.asp')");
menu.subMenus[2].addItem("Document Size","window.open('/tutorials/tutorial2.asp')");
menu.subMenus[2].addItem("Dhtml Intro","window.open('/tutorials/tutorial1.asp')");

menu.subMenus[3].addItem("Forum listings","window.open('/forums')");
menu.subMenus[3].addItem("Cool Sites","window.open('/forums/forum.asp?FORUM_ID=1&CAT_ID=1&Forum_Title=Cool+sites')");
menu.subMenus[3].addItem("CoolMenus","window.open('/forums/forum.asp?FORUM_ID=2&CAT_ID=1&Forum_Title=CoolMenus')");
menu.subMenus[3].addItem("Cross Browser","window.open('/forums/forum.asp?FORUM_ID=3&CAT_ID=1&Forum_Title=Crossbrowser+DHTML')");
menu.subMenus[3].addItem("Scripts","window.open('/forums/forum.asp?FORUM_ID=4&CAT_ID=1&Forum_Title=DHTML+Scripts')");
menu.subMenus[3].addItem("General","window.open('/forums/forum.asp?FORUM_ID=6&CAT_ID=1&Forum_Title=General+DHTML+issues')");
menu.subMenus[3].addItem("Off-Topic","window.open('/forums/forum.asp?FORUM_ID=9&CAT_ID=1&Forum_Title=Off%2Dtopic')");


c = menu.subMenus[4].addItem("Cool Sites","toggle");
c.startAngle = 15;
menu.subMenus[4].addItem("Portals","window.open('/resources/default.asp?catid=7&cattitle=Portals')");
menu.subMenus[4].addItem("Script Sites","window.open('/resources/default.asp?catid=1&cattitle=Script+sites')");
menu.subMenus[4].addItem("Tutorials &<br>References","toggle");

menu.subMenus[4].subMenus[0].addItem("Comercial Sites","window.open('/resources/default.asp?catid=5&cattitle=Commercial+sites')");
menu.subMenus[4].subMenus[0].addItem("Personal Sites","window.open('/resources/default.asp?catid=6&cattitle=Personal+sites')");
menu.subMenus[4].subMenus[0].addItem("Experimental Projects","window.open('/resources/default.asp?catid=4&cattitle=Experimental+projects')");

menu.subMenus[4].subMenus[3].addItem("References","window.open('/resources/default.asp?catid=8&cattitle=References')");
menu.subMenus[4].subMenus[3].addItem("Tutorials & Articles","window.open('/resources/default.asp?catid=9&cattitle=Tutorials+and+Articles')");


//--></SCRIPT>
</BODY></HTML>
水平导航菜单（DIV+CSS）
<style type="text/css">
#nav{
height: 44px;
width: 425px;
background: #FFF;
}
.vline{
background: #999;
width: 1px;
height: 20px;
}
#nav ul{
margin:0px;
padding: 0px;
list-style-type: none;
}
#nav li{
float: left;
font-family: Arial;
font-weight: bold;
font-size: 12px;
text-align: center;
}
#nav li a{
display: block;
width: 84px;
line-height: 28px;
color: #666;
text-decoration: none;
border-top: 4px solid #0F35A5;
}
#nav li a:hover{
color: #7C8DD9;
border-top: 4px solid #7C8DD9;
}
</style>
<div id="nav"><ul><li><a href="#">产品介绍</a></li><li class="vline"></li>
<li><a href="#">服务支持</a></li><li class="vline"></li>
<li><a href="#">联系我们</a></li><li class="vline"></li>
<li><a href="#">新闻中心</a></li><li class="vline"></li>
<li><a href="#">公司简介</a></li><li class="vline"></li>
</ul></div>
类似QQ的菜单
<html>
<head>
<style type="text/css">
BODY {
FONT-SIZE: 12px; SCROLLBAR-HIGHLIGHT-COLOR: buttonface; SCROLLBAR-SHADOW-COLOR: buttonface; COLOR: #333333; SCROLLBAR-3DLIGHT-COLOR: buttonhighlight; SCROLLBAR-TRACK-COLOR: #eeeeee; FONT-FAMILY: "song", "MS Shell Dlg"; TEXT-ALIGN: center; SCROLLBAR-DARKSHADOW-COLOR: buttonshadow; BACKGROUND-COLOR: #ffffff
;}
SELECT {
BACKGROUND-COLOR: #f5f5f5; COLOR: #666666; FILTER: Alpha(Opacity=50); FONT-FAMILY: "song", "MS Shell Dlg", "宋体"; FONT-SIZE: 12px
}
INPUT { font-family: Tahoma, Verdana; font-size: 12px; font-weight: normal; background-color: #eeeeee; color: #111111 }

.textarea1 { font-family: Tahoma, Verdana; font-size: 12px; font-weight: normal; background-color: #eeeeee; color: #111111 }
TD {
FONT-SIZE: 12px; COLOR: #333333; font-family: Tahoma, Verdana;
}
A:link {
FONT-SIZE: 12px; COLOR: #333333; TEXT-DECORATION: none
}
A:visited {
FONT-SIZE: 12px; COLOR: #333333; TEXT-DECORATION: none
}
A:hover {
FONT-SIZE: 12px; COLOR: #000066; TEXT-DECORATION: underline
}
A.w:link {
FONT-SIZE: 12px; COLOR: #ffffff; TEXT-DECORATION: none
}
A.w:visited {
FONT-SIZE: 12px; COLOR: #ffffff; TEXT-DECORATION: none
}
A.w:hover {
FONT-SIZE: 12px; COLOR: #ffffff; TEXT-DECORATION: underline
}
.button1 {
BORDER-RIGHT: #665b8e 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #ffffff 1px solid; PADDING-LEFT: 1px; FONT-SIZE: 12px; BACKGROUND: buttonface; PADDING-BOTTOM: 1px; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #333333; PADDING-TOP: 1px; BORDER-BOTTOM: #665b8e 1px solid; FONT-FAMILY: "MS Shell Dlg", "Tahoma", "宋体"; HEIGHT: 20px
}
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}

.submenu{
margin-bottom: 0.5em;
}
</style>

<script type="text/javascript">

if (document.getElementById){
document.write('<style type="text/css">/n')
document.write('.submenu{display: none;}/n')
document.write('</style>/n')
}

function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span");

if(el.style.display != "block"){
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu")
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}

</script>
</head>
<body>
<div id="masterdiv">

<div class="menutitle" οnclick="SwitchMenu('sub1')">网页特效</div>

<span class="submenu" id="sub1"> - <a href="#">图形图象</a><br>
- <a href="#">鼠标事件</a><br>
- <a href="#">时间日期</a> <br>
- <a href="#">导航菜单</a></span>
<div class="menutitle" οnclick="SwitchMenu('sub2')">插件中心</div>

<span class="submenu" id="sub2"> - <a href="#">DW插件</a><br>
- <a href="#">FW插件</a><br>
- <a href="#">ps滤镜</a> </span>
<div class="menutitle" οnclick="SwitchMenu('sub3')">网络学院</div>

<span class="submenu" id="sub3"> - <a href="#">网页制作</a><br>
</span>


<div class="menutitle" οnclick="SwitchMenu('sub4')">网站联盟</div>

<span class="submenu" id="sub4"> - <a href="#">网页设计</a><br>
- <a href="#">艺术制作</a><br>
- <a href="#">酷站推荐</a><br>
</span></div>
</body>
</html>
类似QQ的菜单，刷新后能记住当前打开状态
<html>
<head>
<style type="text/css">
BODY {
FONT-SIZE: 12px; SCROLLBAR-HIGHLIGHT-COLOR: buttonface; SCROLLBAR-SHADOW-COLOR: buttonface; COLOR: #333333; SCROLLBAR-3DLIGHT-COLOR: buttonhighlight; SCROLLBAR-TRACK-COLOR: #eeeeee; FONT-FAMILY: "song", "MS Shell Dlg"; TEXT-ALIGN: center; SCROLLBAR-DARKSHADOW-COLOR: buttonshadow; BACKGROUND-COLOR: #ffffff
;}
SELECT {
BACKGROUND-COLOR: #f5f5f5; COLOR: #666666; FILTER: Alpha(Opacity=50); FONT-FAMILY: "song", "MS Shell Dlg", "宋体"; FONT-SIZE: 12px
}
INPUT { font-family: Tahoma, Verdana; font-size: 12px; font-weight: normal; background-color: #eeeeee; color: #111111 }

.textarea1 { font-family: Tahoma, Verdana; font-size: 12px; font-weight: normal; background-color: #eeeeee; color: #111111 }
TD {
FONT-SIZE: 12px; COLOR: #333333; font-family: Tahoma, Verdana;
}
A:link {
FONT-SIZE: 12px; COLOR: #333333; TEXT-DECORATION: none
}
A:visited {
FONT-SIZE: 12px; COLOR: #333333; TEXT-DECORATION: none
}
A:hover {
FONT-SIZE: 12px; COLOR: #000066; TEXT-DECORATION: underline
}
A.w:link {
FONT-SIZE: 12px; COLOR: #ffffff; TEXT-DECORATION: none
}
A.w:visited {
FONT-SIZE: 12px; COLOR: #ffffff; TEXT-DECORATION: none
}
A.w:hover {
FONT-SIZE: 12px; COLOR: #ffffff; TEXT-DECORATION: underline
}
.button1 {
BORDER-RIGHT: #665b8e 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #ffffff 1px solid; PADDING-LEFT: 1px; FONT-SIZE: 12px; BACKGROUND: buttonface; PADDING-BOTTOM: 1px; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #333333; PADDING-TOP: 1px; BORDER-BOTTOM: #665b8e 1px solid; FONT-FAMILY: "MS Shell Dlg", "Tahoma", "宋体"; HEIGHT: 20px
}
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}

.submenu{
margin-bottom: 0.5em;
}
</style>

<script type="text/javascript">

if (document.getElementById){
document.write('<style type="text/css">/n')
document.write('.submenu{display: none;}/n')
document.write('</style>/n')
}

function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span");

if(el.style.display != "block"){
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu")
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}

function readCookie(name)
{
var cookieValue = "";
var search = name + "=";
if(document.cookie.length > 0)
{
offset = document.cookie.indexOf(search);
if (offset != -1)
{
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
cookieValue = unescape(document.cookie.substring(offset, end))
}
}
return cookieValue;
}

function writeCookie(name, value, hours)
{
var expire = "";
if(hours != null)
{
expire = new Date((new Date()).getTime() + hours * 3600000);
expire = "; expires=" + expire.toGMTString();
}
document.cookie = name + "=" + escape(value) + expire;
}

function loadQQpos(){
 var pos=readCookie("QQpos");
 if(!pos)
  return;
 setQQmenu(pos,"masterdiv");
 }

function storeQQpos(){
 writeCookie("QQpos",lookQQmenu("masterdiv"),24);
 }

function setQQmenu(pos,menuID){
 if(pos==-1)
  return;
 var theMenu=document.getElementById(menuID);
 var items=theMenu.getElementsByTagName("span");
 if(items[pos])
  items[pos].style.display="block";
 }

function lookQQmenu(menuID){
 var theMenu=document.getElementById(menuID);
 var items=theMenu.getElementsByTagName("span");
 for(var i=0;i<items.length;i++)
  if(items[i].style.display=="block")
   return i;
 return -1;
 }
</script>
</head>

<body οnlοad="loadQQpos()" οnunlοad="storeQQpos()">
<div id="masterdiv">
<div class="menutitle" οnclick="SwitchMenu('sub1')">网页特效</div>
<span class="submenu" id="sub1"> - <a href="#">图形图象</a><br>
- <a href="#">鼠标事件</a><br>
- <a href="#">时间日期</a> <br>
- <a href="#">导航菜单</a></span>

<div class="menutitle" οnclick="SwitchMenu('sub2')">插件中心</div>
<span class="submenu" id="sub2"> - <a href="#">DW插件</a><br>
- <a href="#">FW插件</a><br>
- <a href="#">ps滤镜</a> </span>

<div class="menutitle" οnclick="SwitchMenu('sub3')">网络学院</div>
<span class="submenu" id="sub3"> - <a href="#">网页制作</a><br>
</span>

<div class="menutitle" οnclick="SwitchMenu('sub4')">网站联盟</div>
<span class="submenu" id="sub4"> - <a href="#">网页设计</a><br>
- <a href="#">艺术制作</a><br>
- <a href="#">酷站推荐</a><br>
</span></div>
</body>
</html>



lcfgaoyong
关注
专栏目录
一个漂亮的图文菜单源码
09-18
漂亮的图文菜单漂亮的图文菜单漂亮的图文菜单漂亮的图文菜单漂亮的图文菜单漂亮的图文菜单
超实用漂亮精美html菜单源码
07-26
超实用漂亮精美html菜单源码!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
linux shell 菜单
weixin_34417183的博客
04-29 266
今天有一个朋友请教我一到Shell 题如下： 上机实验题： 1. 用shell编写一个脚本，实现以下功能。 a) 程序需要实现以下可供用户选择的操作界面： 注：USER后显示当前登陆用户名； HOST后显示主机名 DATA后显示当前系统时间，时间格式请转换为：DDMMYYYY； b) 系统使用者选择1号业务，用户输入提取次数和提取间隔，请将提取结果打印在系...
shell屏幕菜单设计
weixin_34280237的博客
05-27 192
下面是一屏幕菜单的设计 #!/bin/sh tput init MYDATE=`date +%D` colour() { case $1 in balck_green) echo '' ;; black_yellow) echo '' ;; black_white) echo '' ;; black_cyan) ech...
Linux shell菜单设计,linux使用shell展现菜单
weixin_39521835的博客
05-13 165
#!/bin/bash#f_menuxy(){_R=$1;_C=$2;tput cup $_R $_C}colour(){case $1 inblack_green)echo -e "\033[40;32m";;black_yellow)echo -e "\033[40;33m";;black_white)echo -e "\033[40;37m";;black_cyan)echo -e "\03...
超漂亮的导航菜单
04-10
"超漂亮的导航菜单"这个主题，显然聚焦于美观且用户友好的导航设计。这样的菜单不仅可以提升用户体验，还能增强品牌形象，使网站或应用更具吸引力。 1. **导航菜单设计原则**：一个优秀的导航菜单应该简洁明了，...
又一个漂亮的导航栏的下拉菜单
12-07
网上收集整合出来的，算是剽窃吧，IE6下用过，其他的没试。 SHARE BODY { MARGIN: 0px; } A.notes { FONT-SIZE: 12px; COLOR: #ffffff; TEXT-DECORATION: none } .MS_link0 { BORDER-RIGHT: #1e77d3 1px solid;...
Webjx收集基于CSS JS设计50款优秀的导航菜单
01-21
下面Webjx.com要向大家推荐的50款...导航菜单应当足够简单以让用户快速了解它，但还要包含一些必要的元素来引导用户浏览整个网站——融入一些有创意且漂亮的设计。 下面Webjx.com要向大家推荐的50款优秀的导航菜单，有
收集几个带搜索框的漂亮网站导航特效.rar
07-10
"收集几个带搜索框的漂亮网站导航特效.rar" 文件提供了一组精心设计的导航菜单，这些菜单不仅具有视觉吸引力，还集成了搜索框功能，提高了用户交互性和实用性。以下是对这些特效的一些详细说明： 1. **导航菜单设计...
WinForm完美框架+皮肤WinFormFrameWork
03-16
WinForm完美框架+皮肤WinFormFrameWork
几十种漂亮的gif加载图标和进度条图标
01-11
几十种漂亮的gif加载图标和进度条图标，用于winform或者webform很养眼。。。
HTML - JS自定义菜单源码，极其炫酷简单易用的js菜单右键菜单，依赖于layer
旋律的博客
06-25 879
依赖框架：layer的弹出层框架 啥也不说，先放效果图： >> 点击效果图 >> 右键指定位置效果图 >> 黑色风格 右键菜单-使用方法： 1.使用前请先引入menu.js,源码在下方 /** * 显示文件菜单 * 参数 v : this * 例子：<div class="menu_bar" onclick=...
设计漂亮实用的菜单
Chinawash 专栏
06-25 1196
谈在VC中动态改变菜单 bull77 yesky 　　大部分Windows应用程序都使用下拉式菜单实现自己特定的函数，它使编程更加方便，不需要在程序中增加多个按钮以完成这些操作。大多数情况下，我 们的程序编译生成后，菜单就确定了，不能再修改。然而，在很多情况下，程序要根据用户的自己设置产生不同的菜单以适应不同用户的要求，这就需要我们动态的 改变菜单。接下来我们就分析如何动态的生成不同的菜单
shell脚本中常用的菜单模板
FloatDreamed的博客
03-02 462
shell脚本中常用的菜单模板 直接上代码： #!/bin/bash # 菜单模板 function menu(){ : ' 参数1：版本信息 参数2：名称 参数3：操作项列表 ' # 清屏 tput clear # 将光标移动至(3,15)处 tput cup 3 15 # Set a foreground colour using ANSI escape # 展示版本信息 tput setaf 3 echo $1 tput sgr0 # 展示标题 tpu
shell 带菜单的脚本
wangl2014的专栏
12-13 1047
带菜单的脚本 [root@zabbix-server day6]# more menu.sh #!/bin/bash echo "1.查看剩余内存容量." echo "2.查看根分区剩余容量." echo "3.查看CPU十五分钟负载." echo "4.查看系统进程数量." echo "5.查看系统账户数量." echo "6.退出." while : do read -p "请输入[1-6]:" key case $key in 1) free | awk '/Mem/{print
Linux shell菜单设计,linux SHELL 编写简单菜单menu实例1
weixin_42554151的博客
05-13 360
#!/bin/shMYDATE=`date +%d/%m/%y`THIS_HOST=`hostname -s`USER=`whoami`while :dotput clearcat <---------------------------------------------------------User:$USER Host:$THIS_HOST Dat...
Android_三种常用Menu菜单（附源码）
最新发布
https://blog.csdn.net/qFAFAF
11-29 3051
浅浅记录一下我写菜单的代码，我写了一共有三种菜单，从常用到不常用。
shell脚本中创建一个选择菜单
leonnew的博客
11-02 7850
问题描述 我创建了一个简单的bash脚本，我想在其中创建一个选择菜单，如下所示： $./script echo "Choose your option:" 1) Option 1 2) Option 2 3) Option 3 4) Quit 根据用户的选择，我希望执行不同的操作。我是一个bash shell脚本noob，我在网上搜索了一些答案，但没有真正具体的。 最佳解决方案 #!/bin/bash # Bash Menu Script Example PS3='
展现个性的漂亮CSS水平下拉菜单实例
在本节中，我们将深入探讨一款设计精美、富有个性的CSS水平下拉菜单的实现方法。这款菜单不仅外观独特，而且功能实用，适用于提升网站用户体验。通过学习本文档提供的CSS样式代码，你可以轻松地为你的网站添加一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值