PDA

View Full Version : سوال: طراحی منو با جاوا



mahak_f
دوشنبه 07 شهریور 1390, 12:05 عصر
سلام و صد سلام به دوستان برنامه نویس
سوال من درباره طراحی منو با استفاده از جاوا اسکریپت هست. اگر ممکنه به منوی بالای این سایت یه نگاه بندازید. روی نوار آبی بالا که نوشته Starting & Managing a bussness نگه دارین تا منو باز شه. یه همچین منویی باید طراحی کنم.

http://www.sba.gov/


البته همینجا سرچ کردم و سایتهای خوبی هم اینجا معرفی شده بود اما این یه منو رو پیدا نکردم :ناراحت:

لطفا راهنمایی فرمایید

object68
دوشنبه 07 شهریور 1390, 14:59 عصر
سلام،

ساختار اکثر منوها یه جوره. همشون از یه سری تگ <ul> و <li> تشکیل شدن. این منویی هم که شما گذاشتی همین ساختار رو داره. فقط با این تفاوت که معمولا داخل تگ های li از یک سری لینک هایی برای عناوین منو ها استفاده می کنند، اما تو این مثالی که شما گذاشتی اومدن داخل تگ های li باز یه ul دیگه گذاشتن و بهش style دادن و طول و عرضشو بزرگ کردن. ببین یه منوی ساده یه همچین قیافه ای تو HTML داره.



<ul><li><a href="http://www.google.com">google</a></li><li><a href="http://www.yahoo.com"></a></li></ul>
حالا بستگی به نیازی که داریم می تونیم یه منوی سفارشی تر بسازیم. مثلا یه نمونه ساده از چیزی که گذاشتی رو شاید بشه این جوری تعریف کرد.



<ul><li><a href="#">menu1</a><ul style='background-color:#eee'><li><a href="#">submenu1</a></li><li><a href="#">submenu2</a></li></ul></li></ul>
البته این چیزی که نوشتم یه نمونه ساده از اون منو. شما اصل منو رو اگه بفهمی هر منوی دیگه ای ساختش آسون میشه. من هستم اگر خواستین می تونیم با هم یه منو مثل همونی که نشون دادی بسازیم.

تا بعد . . .

farcry
دوشنبه 07 شهریور 1390, 21:32 عصر
چند نمونه منو داریم یه نمونش کشویی (pop up) یه نمونش درختی و ...

مثلا یه کشویی پیشرفته رو ببین.



<html>
<head>

<style type="text/css">

.lowText { text-decoration: none; color: #000000; font: 12px Arial, Helvetica }
.highText { text-decoration: none; color: #FFFFFF; font: 12px Arial, Helvetica }
.itemBorder { border: 1px solid #666666 }
.itemBorderBlank { border: 1px solid #CCCCDD }

.buttonText { text-decoration: none; color: #FFCC99; font: Bold 12px Arial, Helvetica }
.buttonHover { text-decoration: none; color: #99CCFF; font: Bold 12px Arial, Helvetica; padding: 1px }
.buttonBorder { border: 1px outset #339966 }
.buttonBorderOver { border: 1px inset #CC9966 }

</style>
</head>

<body marginwidth="0" marginheight="0" style="margin: 0" bgcolor="#FFFFFF">

<table bgcolor="#336699" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td height="17"><font size="1" color="#336699">.&nbsp;</font></td></tr></table>


<script>

var isDOM=document.getElementById?1:0;
var isIE=document.all?1:0;
var isNS4=navigator.appName=='Netscape'&&!isDOM?1:0;
var isIE4=isIE&&!isDOM?1:0;
var isOp=window.opera?1:0;
var isDyn=isDOM||isIE||isNS4;


function getRef(id, par)
{
par=!par?document:(par.navigator?par.document:par) ;
return (isIE ? par.all[id] :
(isDOM ? (par.getElementById?par:par.ownerDocument).getElem entById(id) :
(isNS4 ? par.layers[id] : null)));
}

function getSty(id, par)
{
var r=getRef(id, par);
return r?(isNS4?r:r.style):null;
}

if (!window.LayerObj) var LayerObj = new Function('id', 'par',
'this.ref=getRef(id, par); this.sty=getSty(id, par); return this');
function getLyr(id, par) { return new LayerObj(id, par) }

function LyrFn(fn, fc)
{
LayerObj.prototype[fn] = new Function('var a=arguments,p=a[0],px=isNS4||isOp?0:"px"; ' +
'with (this) { '+fc+' }');
}
LyrFn('x','if (!isNaN(p)) sty.left=p+px; else return parseInt(sty.left)');
LyrFn('y','if (!isNaN(p)) sty.top=p+px; else return parseInt(sty.top)');
LyrFn('vis','sty.visibility=p');
LyrFn('bgColor','if (isNS4) sty.bgColor=p?p:null; ' +
'else sty.background=p?p:"transparent"');
LyrFn('bgImage','if (isNS4) sty.background.src=p?p:null; ' +
'else sty.background=p?"url("+p+")":"transparent"');
LyrFn('clip','if (isNS4) with(sty.clip){left=a[0];top=a[1];right=a[2];bottom=a[3]} ' +
'else sty.clip="rect("+a[1]+"px "+a[2]+"px "+a[3]+"px "+a[0]+"px)" ');
LyrFn('write','if (isNS4) with (ref.document){write(p);close()} else ref.innerHTML=p');
LyrFn('alpha','var f=ref.filters,d=(p==null); if (f) {' +
'if (!d&&sty.filter.indexOf("alpha")==-1) sty.filter+=" alpha(opacity="+p+")"; ' +
'else if (f.length&&f.alpha) with(f.alpha){if(d)enabled=false;else{opacity=p;en abled=true}} }' +
'else if (isDOM) sty.MozOpacity=d?"":p+"%"');


function setLyr(lVis, docW, par)
{
if (!setLyr.seq) setLyr.seq=0;
if (!docW) docW=0;
var obj = (!par ? (isNS4 ? window : document.body) :
(!isNS4 && par.navigator ? par.document.body : par));
var IA='insertAdjacentHTML', AC='appendChild', newID='_js_layer_'+setLyr.seq++;

if (obj[IA]) obj[IA]('beforeEnd', '<div id="'+newID+'" style="position:absolute"></div>');
else if (obj[AC])
{
var newL=document.createElement('div');
obj[AC](newL); newL.id=newID; newL.style.position='absolute';
}
else if (isNS4)
{
var newL=new Layer(docW, obj);
newID=newL.id;
}

var lObj=getLyr(newID, par);
with (lObj) if (ref) { vis(lVis); x(0); y(0); sty.width=docW+(isNS4?0:'px') }
return lObj;
}


var CSSmode=document.compatMode;
CSSmode=(CSSmode&&CSSmode.indexOf('CSS')!=-1)||isDOM&&!isIE||isOp?1:0;

if (!window.page) var page = { win: window, minW: 0, minH: 0, MS: isIE&&!isOp,
db: CSSmode?'documentElement':'body' }

page.winW=function()
{ with (this) return Math.max(minW, MS?win.document[db].clientWidth:win.innerWidth) }
page.winH=function()
{ with (this) return Math.max(minH, MS?win.document[db].clientHeight:win.innerHeight) }

page.scrollX=function()
{ with (this) return MS?win.document[db].scrollLeft:win.pageXOffset }
page.scrollY=function()
{ with (this) return MS?win.document[db].scrollTop:win.pageYOffset }

function popOver(mN, iN) { with (this)
{
clearTimeout(hideTimer);
overM = mN;
overI = iN;
if (iN && this.onmouseover) onmouseover(mN, iN);
litOld = litNow;
litNow = new Array();
var litM = mN, litI = iN;
while(1)
{
litNow[litM] = litI;
if (litM == 'root') break;
litI = menu[litM][0].parentItem;
litM = menu[litM][0].parentMenu;
}

var same = true;
for (var z in menu) if (litNow[z] != litOld[z]) same = false;
if (same) return;
clearTimeout(showTimer);

for (thisM in menu) with (menu[thisM][0])
{

if (!lyr) continue;

litI = litNow[thisM];
oldI = litOld[thisM];
if (litI && (litI != oldI)) changeCol(thisM, litI, true);

if (oldI && (oldI != litI)) changeCol(thisM, oldI, false);

if (litI && !visNow && (thisM != 'root'))
{
showMenu(thisM);
visNow = true;
}

if (isNaN(litI) && visNow)
{
hideMenu(thisM);
visNow = false;
}
}

nextMenu = '';
if ((menu[mN][iN].type == 'sm:') && !menu[mN][0].subsOnClick)
{

var targ = menu[mN][iN].href, lyrM = menu[mN][0].lyr;

var showStr = 'with ('+myName+') { menu.'+targ+'[0].visNow = true; ' +
'position("'+targ+'"); showMenu("'+targ+'") }';
nextMenu = targ;
if (showDelay) showTimer = setTimeout(showStr, showDelay);
else eval(showStr);
}
}}


function popOut(mN, iN) { with (this)
{
if ((mN != overM) || (iN != overI)) return;

if (this.onmouseout) onmouseout(mN, iN);

var thisI = menu[mN][iN];

if (thisI.href != nextMenu)
{
clearTimeout(showTimer);
nextMenu = '';
}


if (hideDelay)
{
var delay = ((mN == 'root') && (thisI.type != 'sm:')) ? 50 : hideDelay;
hideTimer = setTimeout(myName + '.over("root", 0)', delay);
}

overM = 'root';
overI = 0;
}}


function popClick(mN, iN) { with (this)
{
// Evaluate the onclick event, if any.
if (this.onclick) onclick(mN, iN);

var thisI = menu[mN][iN], hideM = true;

with (thisI) switch (type)
{
// Targeting another popout? Either activate show-on-click or skip to the end.
case 'sm:':
{
if (menu[overM][0].subsOnClick)
{
menu[href][0].visNow = true;
position(href);
showMenu(href);
hideM = false;
}
break;
}
// A JavaScript function? Eval() it and break out of switch.
case 'js:': { eval(href); break }
// Otherwise, point to the window if nothing else and navigate.
case '': type = 'window';
default: if (href) eval(type + '.location.href = "' + href + '"');
}

// Hide all menus if we're supposed to.
if (hideM) over('root', 0);
}}


function popChangeCol(mN, iN, isOver) { with (this.menu[mN][iN])
{
if (!lyr || !lyr.ref) return;


var col = isOver?overCol:outCol;
var bgFn = (col.indexOf('.')==-1) ? 'bgColor' : 'bgImage';

if (isNS4) lyr[bgFn](col);

if ((overClass != outClass) || (outBorder != overBorder)) with (lyr)
{
if (isNS4) write(this.getHTML(mN, iN, isOver));
else
{
ref.className = (isOver ? overBorder : outBorder);
var chl = (isDOM ? ref.childNodes : ref.children)
if (chl) for (var i = 0; i < chl.length; i++) chl[i].className = isOver?overClass:outClass;
}
}

if (!isNS4) lyr[bgFn](col);

if (outAlpha != overAlpha) lyr.alpha(isOver ? overAlpha : outAlpha);
}}


function popPosition(posMN) { with (this)
{

for (mN in menu)
{
if (posMN && (posMN != mN)) continue;
with (menu[mN][0])
{

if (!lyr || !lyr.ref || !visNow) continue;

var pM, pI, newX = eval(offX), newY = eval(offY);

if (mN != 'root')
{
pM = menu[parentMenu];
pI = pM[parentItem].lyr;

if (!pI) continue;
}

var eP = eval(par);
var pW = (eP && eP.navigator ? eP : window);


with (pW.page) var sX=scrollX(), wX=sX+winW(), sY=scrollY(), wY=winH()+sY;
wX = isNaN(wX)||!wX ? 9999 : wX;
wY = isNaN(wY)||!wY ? 9999 : wY;


if (pM && typeof(offX)=='number') newX = Math.max(sX,
Math.min(newX+pM[0].lyr.x()+pI.x(), wX-menuW-(isIE?5:20)));
if (pM && typeof(offY)=='number') newY = Math.max(sY,
Math.min(newY+pM[0].lyr.y()+pI.y(), wY-menuH-(isIE?5:20)));


lyr.x(newX);
lyr.y(newY);
}
}
}}







function addProps(obj, data, names, addNull)
{
for (var i = 0; i < names.length; i++) if(i < data.length || addNull) obj[names[i]] = data[i];
}

function ItemStyle()
{

var names = ['len', 'spacing', 'popInd', 'popPos', 'pad', 'outCol', 'overCol', 'outClass',
'overClass', 'outBorder', 'overBorder', 'outAlpha', 'overAlpha', 'normCursor', 'nullCursor'];
addProps(this, arguments, names, true);
}

function popStartMenu(mName) { with (this)
{

if (!menu[mName]) { menu[mName] = new Array(); menu[mName][0] = new Object(); }


actMenu = menu[mName];
aM = actMenu[0];
actMenu.length = 1;


var names = ['isVert', 'isVert', 'offX','offY', 'width', 'itemSty', 'par',
'parentMenu', 'parentItem', 'visNow', 'oncreate', 'subsOnClick'];
addProps(aM, arguments, names, true);


aM.extraHTML = '';

aM.menuW = aM.menuH = 0;


if (!aM.lyr) aM.lyr = null;

if (mName == 'root') menu.root[0].oncreate = new Function('this.visNow=true; ' +
myName + '.position("root"); this.lyr.vis("visible")');
}}


function popAddItem() { with (this) with (actMenu[0])
{



var aI = actMenu[actMenu.length] = new Object();


var names = ['text', 'href', 'type', 'itemSty', 'len', 'spacing', 'popInd', 'popPos',
'pad', 'outCol', 'overCol', 'outClass', 'overClass', 'outBorder', 'overBorder',
'outAlpha', 'overAlpha', 'normCursor', 'nullCursor',
'iX', 'iY', 'iW', 'iH', 'lyr'];
addProps(aI, arguments, names, true);


var iSty = (arguments[3] ? arguments[3] : actMenu[0].itemSty);
// Loop through its properties, add them if they don't already exist (overridden e.g. length).
for (prop in iSty) if (aI[prop]+'' == 'undefined') aI[prop] = iSty[prop];


if (aI.outBorder)
{
if (isNS4) aI.pad++;
}

aI.iW = (isVert ? width : aI.len);
aI.iH = (isVert ? aI.len : width);
var lastGap = (actMenu.length > 2) ? actMenu[actMenu.length - 2].spacing : 0;


var spc = ((actMenu.length > 2) && aI.outBorder ? 1 : 0);

if (isVert)
{
menuH += lastGap - spc;
aI.iX = 0; aI.iY = menuH;
menuW = width; menuH += aI.iH;
}
else
{
menuW += lastGap - spc;
aI.iX = menuW; aI.iY = 0;
menuW += aI.iW; menuH = width;
}

if (aI.outBorder && CSSmode)
{
aI.iW -= 2;
aI.iH -= 2;
}
}}



function popGetHTML(mN, iN, isOver) { with (this)
{
var itemStr = '';
with (menu[mN][iN])
{
var textClass = (isOver ? overClass : outClass);

if ((type == 'sm:') && popInd)
{
if (isNS4) itemStr += '<layer class="' + textClass + '" left="'+ ((popPos+iW)%iW) +
'" top="' + pad + '" height="' + (iH-2*pad) + '">' + popInd + '</layer>';
else itemStr += '<div class="' + textClass + '" style="position: absolute; left: ' +
((popPos+iW)%iW) + 'px; top: ' + pad + 'px; height: ' + (iH-2*pad) + 'px">' + popInd + '</div>';
}

if (isNS4) itemStr += (outBorder ? '<span class="' + (isOver?overBorder:outBorder) +
'"><spacer type="block" width="' + (iW-8) + '" height="' + (iH-8) + '"></span>' : '') +
'<layer left="' + pad + '" top="' + pad + '" width="' + (iW-2*pad) + '" height="' +
(iH-2*pad) + '"><a class="' + textClass + '" href="#" ' +
'onClick="return false" onMouseOver="status=\'\'; ' + myName + '.over(\'' + mN + '\',' +
iN + '); return true">' + text + '</a></layer>';


else itemStr += '<div class="' + textClass + '" style="position: absolute; left: ' + pad +
'px; top: ' + pad + 'px; width: ' + (iW-2*pad) + 'px; height: ' + (iH-2*pad) + 'px">' +
text + '</div>';
}
return itemStr;
}}

function popUpdate(docWrite, upMN) { with (this)
{

if (!isDyn) return;


for (mN in menu) with (menu[mN][0])
{

if (upMN && (upMN != mN)) continue;


var str = '';


for (var iN = 1; iN < menu[mN].length; iN++) with (menu[mN][iN])
{

var itemID = myName + '_' + mN + '_' + iN;


var targM = menu[href];
if (targM && (type == 'sm:'))
{
targM[0].parentMenu = mN;
targM[0].parentItem = iN;
}

// Have we been given a background image? It'll have a period in its name if so...
var isImg = (outCol.indexOf('.') != -1) ? true : false;

// NS6 uses a different cursor name for the 'hand' cursor than IE.
if (!isIE && normCursor=='hand') normCursor = 'pointer';

// Create a div or layer text string with appropriate styles/properties.
// OK, OK, I know this is a little obtuse in syntax, but it's small...
// At the end we set the alpha transparency (if specified) and the mouse cursor.
if (isDOM || isIE4)
{
str += '<div id="' + itemID + '" ' + (outBorder ? 'class="'+outBorder+'" ' : '') +
'style="position: absolute; left: ' + iX + 'px; top: ' + iY + 'px; width: ' + iW +
'px; height: ' + iH + 'px; z-index: 1000; background: ' + (isImg?'url('+outCol+')':outCol) +
((typeof(outAlpha)=='number') ? '; filter: alpha(opacity='+ outAlpha + '); -moz-opacity: ' +
(outAlpha/100) : '') +
'; cursor: ' + ((type!='sm:' && href) ? normCursor : nullCursor) + '" ';
}
else if (isNS4)
{
// NS4's borders must be assigned within the layer so they stay when content is replaced.
str += '<layer id="' + itemID + '" left="' + iX + '" top="' + iY + '" width="' +
iW + '" height="' + iH + '" z-index="1000" ' +
(outCol ? (isImg ? 'background="' : 'bgcolor="') + outCol + '" ' : '');
}

// Add mouseover and click handlers, contents, and finish div/layer.
var evtMN = '(\'' + mN + '\',' + iN + ')"';
str += 'onMouseOver="' + myName + '.over' + evtMN +
' onMouseOut="' + myName + '.out' + evtMN +
' onClick="' + myName + '.click' + evtMN + '>' +
getHTML(mN, iN, false) + (isNS4 ? '</layer>' : '</div>');

// End loop through items and with(menu[mN][iN]).
}


// The parent frame for this menu, if any.
var eP = eval(par);


// Do not ask me why Opera makes me set a timeout now rather than later, or in fact have
// to set a timeout at all to get references to the divs we are about to create.
// But, it makes the cross-frame version of the script actually work, so there's a benefit.
setTimeout(myName + '.setupRef(' + docWrite + ', "' + mN + '")', 50);


var mVis = visNow ? 'visible' : 'hidden';


if (docWrite)
{

var targFr = (eP && eP.navigator ? eP : window);
targFr.document.write('<div id="' + myName + '_' + mN + '_Div" style="position: absolute; ' +
'visibility: ' + mVis + '; left: 0px; top: 0px; width: ' + (menuW+2) + 'px; height: ' +
(menuH+2) + 'px; z-index: 1000">' + str + extraHTML + '</div>');
}
else
{

if (!lyr || !lyr.ref) lyr = setLyr(mVis, menuW, eP);
else if (isIE4) setTimeout(myName + '.menu.' + mN + '[0].lyr.sty.width=' + (menuW+2), 50);

// Give it a high Z-index, and write its content.
with (lyr) { sty.zIndex = 1000; write(str + extraHTML) }
}


}
}}


function popSetupRef(docWrite, mN) { with (this) with (menu[mN][0])
{
// Get a reference to a div, only needed for Fast creation mode.
if (docWrite || !lyr || !lyr.ref) lyr = getLyr(myName + '_' + mN + '_Div', eval(par));

// Loop through menu items again to set up individual references.
for (var i = 1; i < menu[mN].length; i++)
menu[mN][i].lyr = getLyr(myName + '_' + mN + '_' + i, (isNS4?lyr.ref:eval(par)));

// Call the 'oncreate' method of this menu if it exists (e.g. to show root menu).
if (menu[mN][0].oncreate) oncreate();
}}



// *** POPUP MENU MAIN OBJECT CONSTRUCTOR ***

function PopupMenu(myName)
{
// These are the properties of any PopupMenu objects you create.
this.myName = myName;

// Manage what gets lit and shown when.
this.showTimer = 0;
this.hideTimer = 0;
this.showDelay = 0;
this.hideDelay = 500;
this.showMenu = '';

// 'menu': the main data store, contains subarrays for each menu e.g. pMenu.menu['root'][];
this.menu = new Array();
// litNow and litOld arrays control what items get lit in the hierarchy.
this.litNow = new Array();
this.litOld = new Array();

// The item the mouse is currently over. Used by click processor to help NS4.
this.overM = 'root';
this.overI = 0;

// The active menu, to which addItem() will assign its results.
this.actMenu = null;

// Functions to create and manage the menu.
this.over = popOver;
this.out = popOut;
this.changeCol = popChangeCol;
this.position = popPosition;
this.click = popClick;
this.startMenu = popStartMenu;
this.addItem = popAddItem;
this.getHTML = popGetHTML;
this.update = popUpdate;
this.setupRef = popSetupRef;

// Default show and hide functions, overridden in the example script by the clipping routine.
this.showMenu = new Function('mName', 'this.menu[mName][0].lyr.vis("visible")');
this.hideMenu = new Function('mName', 'this.menu[mName][0].lyr.vis("hidden")');
}








var hBar = new ItemStyle(40, 10, '', 0, 0, '#336699', '#6699CC', 'highText', 'highText', '', '',
null, null, 'hand', 'default');


var subM = new ItemStyle(22, 0, '&gt;', -15, 3, '#CCCCDD', '#6699CC', 'lowText', 'highText',
'itemBorder', 'itemBorder', null, null, 'hand', 'default');

// 'subBlank' is similar, but has an 'off' border the same colour as its background so it
// appears borderless when dim, and 1px spacing between items to show the hover border.

var subBlank = new ItemStyle(22, 1, '&gt;', -15, 3, '#CCCCDD', '#6699CC', 'lowText', 'highText',
'itemBorderBlank', 'itemBorder', null, null, 'hand', 'default');

// The purplish 'button' style also has 1px spacing to show up the fancy border, and it has
// different colours/text and less padding. They also have translucency set -- these items
// are 80% opaque when dim and 95% when highlighted. It uses the 'crosshair' cursor for items.

var button = new ItemStyle(22, 1, '&gt;', -15, 2, '#006633', '#CC6600', 'buttonText', 'buttonHover',
'buttonBorder', 'buttonBorderOver', 80, 95, 'crosshair', 'default');

var pMenu = new PopupMenu('pMenu');
with (pMenu)
{


startMenu('root', false, 10, 0, 17, hBar);


addItem('&nbsp; File', 'mFile', 'sm:');
addItem('&nbsp; Edit', 'mEdit', 'sm:');
addItem('&nbsp; Help', 'mHelp', 'sm:');

addItem('&nbsp; Visit My Site', 'window.open("")', 'js:', hBar, 80);


startMenu('mFile', true, 0, 22, 80, subM);

addItem('Open', '#', '');
addItem('Save', '#', '');
addItem('Reopen', 'mReopen', 'sm:');
addItem('Check for<br />Update...', '', '', subM, 38);

startMenu('mEdit', true, 0, 22, 80, subM);
addItem('Cut', '#', '');
addItem('Copy', '#', '');
addItem('Paste', '#', '');
addItem('Convert', 'mConvert', 'sm:');


startMenu('mHelp', true, -10, 22, 80, subM);
// Instead of using spaces to indent, consider 'text-indent' in the stylesheet class perhaps?
addItem('&nbsp; &nbsp; Contents', '#', '');
addItem('&nbsp; &nbsp; Search', '#', '');


addItem('&nbsp; &nbsp; About', 'mAbout', 'sm:', subM, 22, 0, '&lt;', 3);

startMenu('mReopen', true, 85, 0, 120, button);

addItem('Recent Doc 1:<br />Schedule', '#', '', button, 35);
addItem('Recent Doc 2:<br />Cunning Plan', '#', '', button, 35, 5);
// Back to the normal submenu ItemStyle for this next item.
addItem('Etc. etc...', '#', '', subM);

// This uses the subBlank ItemStyle which gives the items no borders when dim. The border around
// the whole menu comes from a JavaScript function in the "Menu Effects" section.
startMenu('mConvert', true, 85, 0, 80, subBlank);
addItem('Windows', '#', '');
addItem('Unix', '#', '');
addItem('Macintosh', '#', '');
addItem('tornado iran', '#', '');


startMenu('mAbout', true, -85, -18, 80, subM);
addItem('Leftwards!<br>And up!', '#', '', subM, 40);


}




addMenuBorder(pMenu, window.subBlank,
null, '#666666', 1, '#CCCCDD', 2);



addDropShadow(pMenu, window.subM,
[40,"#333333",6,6,-4,-4], [40,"#666666",4,4,0,0]);
addDropShadow(pMenu, window.subBlank,
[40,"#333333",6,6,-4,-4], [40,"#666666",4,4,0,0]);


if (!isOp && navigator.userAgent.indexOf('rv:0.')==-1)
{
pMenu.showMenu = new Function('mN','menuAnim(this, mN, 10)');
pMenu.hideMenu = new Function('mN','menuAnim(this, mN, -10)');

}



if (!isNS4)
{
// Write menus now in non-NS4 browsers, by calling the "Fast" mode .update(true) method.
pMenu.update(true);
//anotherMenu.update(true);
}
else
{
// For Netscape 4, back up the old onload function and make a new one to update our menus.
// This is the regular "Dynamic" mode menu update, it works in IE and NS6 too if required.
var popOldOL = window.onload;
window.onload = function()
{
if (popOldOL) popOldOL();
pMenu.update();
//anotherMenu.update();
}
}


// Other events must be assigned, these are less complicated, just add or remove menu objects.

var nsWinW = window.innerWidth, nsWinH = window.innerHeight, popOldOR = window.onresize;
window.onresize = function()
{
if (popOldOR) popOldOR();
if (isNS4 && (nsWinW!=innerWidth || nsWinH!=innerHeight)) history.go(0);
pMenu.position();
//anotherMenu.position();
}

window.onscroll = function()
{
pMenu.position();
//anotherMenu.position();
}


// NS4 can't reliably capture clicks on layers, so here's a workaround.
if (isNS4)
{
document.captureEvents(Event.CLICK);
document.onclick = function(evt)
{
with (pMenu) if (overI) click(overM, overI);
//with (anotherMenu) if (overI) click(overM, overI);
return document.routeEvent(evt);
}
}

// Activate the window.onscroll() event in non-Microsoft browsers.
if (!isIE || isOp)
{
var nsPX=pageXOffset, nsPY=pageYOffset;
setInterval('if (nsPX!=pageXOffset || nsPY!=pageYOffset) ' +
'{ nsPX=pageXOffset; nsPY=pageYOffset; window.onscroll() }', 50);
}


function menuAnim(menuObj, menuName, dir)
{

var mD = menuObj.menu[menuName][0];

if (!mD.timer) mD.timer = 0;
if (!mD.counter) mD.counter = 0;

with (mD)
{

clearTimeout(timer);

if (!lyr || !lyr.ref) return;

if (dir>0) lyr.vis('visible');

lyr.sty.zIndex = 1001 + dir;




lyr.clip(0, 0, menuW+2, (menuH+2)*Math.pow(Math.sin(Math.PI*counter/200),0.75) );

if ((isDOM&&!isIE) && (counter>=100)) lyr.sty.clip='';

counter += dir;
if (counter>100) counter = 100;
else if (counter<0) { counter = 0; lyr.vis('hidden') }
else timer = setTimeout(menuObj.myName+'.'+(dir>0?'show':'hide')+'Menu("'+menuName+'")', 40);
}
}

function menuFilterShow(menuObj, menuName, filterName)
{
var mD = menuObj.menu[menuName][0];
with (mD.lyr)
{
sty.filter = filterName;
var f = ref.filters;
if (f&&f.length&&f[0]) f[0].Apply();
vis('visible');
if (f&&f.length&&f[0]) f[0].Play();
}
}


function addMenuBorder(mObj, iS, alpha, bordCol, bordW, backCol, backW)
{

for (var mN in mObj.menu)
{
var mR=mObj.menu[mN], dS='<div style="position:absolute; background:';
if (mR[0].itemSty != iS) continue;

for (var mI=1; mI<mR.length; mI++)
{
mR[mI].iX += bordW+backW;
mR[mI].iY += bordW+backW;
}

mW = mR[0].menuW += 2*(bordW+backW);
mH = mR[0].menuH += 2*(bordW+backW);


if (isNS4) mR[0].extraHTML += '<layer bgcolor="'+bordCol+'" left="0" top="0" width="'+mW+
'" height="'+mH+'" z-index="980"><layer bgcolor="'+backCol+'" left="'+bordW+'" top="'+
bordW+'" width="'+(mW-2*bordW)+'" height="'+(mH-2*bordW)+'" z-index="990"></layer></layer>';
else mR[0].extraHTML += dS+bordCol+'; left:0px; top:0px; width:'+mW+'px; height:'+mH+
'px; z-index:980; '+(alpha!=null?'filter:alpha(opacity='+alpha+'); -moz-opacity:'+(alpha/100):'')+
'">'+dS+backCol+'; left:'+bordW+'px; top:'+bordW+'px; width:'+(mW-2*bordW)+'px; height:'+
(mH-2*bordW)+'px; z-index:990"></div></div>';
}
}


function addDropShadow(mObj, iS)
{

for (var mN in mObj.menu)
{
var a=arguments, mD=mObj.menu[mN][0], addW=addH=0;
if (mD.itemSty != iS) continue;
for (var shad=2; shad<a.length; shad++)
{
var s = a[shad];
if (isNS4) mD.extraHTML += '<layer bgcolor="'+s[1]+'" left="'+s[2]+'" top="'+s[3]+'" width="'+
(mD.menuW+s[4])+'" height="'+(mD.menuH+s[5])+'" z-index="'+(arguments.length-shad)+'"></layer>';
else mD.extraHTML += '<div style="position:absolute; background:'+s[1]+'; left:'+s[2]+
'px; top:'+s[3]+'px; width:'+(mD.menuW+s[4])+'px; height:'+(mD.menuH+s[5])+'px; z-index:'+
(a.length-shad)+'; '+(s[0]!=null?'filter:alpha(opacity='+s[0]+'); -moz-opacity:'+(s[0]/100):'')+
'"></div>';
addW=Math.max(addW, s[2]+s[4]);
addH=Math.max(addH, s[3]+s[5]);
}
mD.menuW+=addW; mD.menuH+=addH;
}
}

</script>



<script>

function changeMenu() { with (pMenu)
{

startMenu('mNewMenu', true, 0, 22, 130, subM);
addItem('<b>TwinHelix Designs:</b><br>Extreme DHTML.<br>Small Code.<br>Click to Visit...',
'window.open("http://www.twinhelix.com")', 'js:', subM, 70);

startMenu('root', false, 10, 0, 17, hBar);
addItem('&nbsp; Rebuilt &gt; &gt;', '#', '', hBar, 80);
addItem('&nbsp; First', 'mFile', 'sm:', hBar, 50);
addItem('&nbsp; Second', 'mEdit', 'sm:', hBar, 60);
addItem('&nbsp; Third', 'mHelp', 'sm:', hBar, 50);
addItem('&nbsp; Dynamism...', 'mNewMenu', 'sm:', hBar, 80);

menu.mFile[1].text = 'New...';
menu.mFile[4].text = 'Logoff<br />Menus...';

update();
}}

function moveRoot()
{
with (pMenu.menu.root[0].lyr) x( (x()<100) ? 100 : 10);
}

</script>

</font>
</body>
</html>

mahan19
دوشنبه 14 شهریور 1390, 18:53 عصر
ساخت منوي كشويي خيلي راحته،و قسمت اصليش همون آشنايي با css ‌و دادن استايل به منو هست. قسمت جاوا كه كاري نداره با دو خط هم ميشه نوشت :
طرز ساختشم اينه كه اول مياي كل منو(منو اصلي و منويي كه بايد باز بشه )رو يكجا طراحي ميكني بعد با css به قسمت آبشاري visibility:hidden ‌ميدي كه نشون داده نشه،حالا با جاوا اسكريپت ميگي كه وقتي ماوس اومد روي منوي اصلي ، اون منوي آبشاري رو نشون بده.خيلي راحت!!!
اگه خواستين بگين مثال بزارم.

mohsen6500
جمعه 18 شهریور 1390, 22:49 عصر
سلام
دیدن این دوتا هم خالی از لطف نیست!
لینک اول
(http://www.dynamicdrive.com/dynamicindex1/)

لینک دوم (http://www.javascriptkit.com/script/cutindex23.shtml)