...

View Full Version : handling menu links



mrjameer
02-17-2007, 09:04 PM
hi,


i have a menu on web-page.it has 4 menu items
1.about
2.contact
3.privacy
4.help

when i click 'about' it displays some info about the company.
similarly contact,privacy,help.inside every page i have the links to move to the next menu item.

what i want is when a user clicks on 'contact' link first,then it
display the contact info and show the link for 'about'.

if a user clicks on about menu item first.the links inside the pages should be like this
about->contact->privacy->help.

if a user clicks on contact menu item first.the links inside the pages should be like this
contact->about->privacy->help.

if a user clicks on privacy menu item first.the links inside the pages should be like this
privacy->about->contact->help.

if a user clicks on help menu item first.the links inside the pages should be like this
help->about->contact->privacy->.

how to do this.any of your help will be greatly appreciated

thanks
mrjameer

vwphillips
02-18-2007, 12:44 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<style type="text/css">
<!--

.main {
width:100px;height:30px;background-Color:#FFCC66;border:solid black 1px;
}

.sub {
position:relative;width:80px;left:40px;background-Color:#FFFFCC;border:solid black 1px;border-Bottom:0px;
}

.subitem {
height:20px;background-Color:#FFFFCC;border-Bottom:solid black 1px;
}

-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
// by Vic Phillips(17-February-2007) - http://www.vicsjavascripts.org.uk

function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxcp){ zxcp.appendChild(zxcele); }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}

function zxcEventAdd(zxco,zxct,zxcf) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}

var zxcEvt=0;

function zxcAddEvt(zxc,zxcfun,zxcevt){
zxc['zxcaddEvt'+zxcEvt]=window[zxcfun];
zxcEventAdd(zxc,zxcevt,'zxcaddEvt'+zxcEvt);
zxcEvt++;
}

function zxcMenuInit(zxcid){
var zxcp=document.getElementById(zxcid)
var zxcclds=zxcp.childNodes;
var zxcary=[];
for (var zxc0=0;zxc0<zxcclds.length;zxc0++){
zxcary.push(zxcclds[zxc0]);
if (zxcclds[zxc0].tagName=='DIV'){
if (zxcclds[zxc0].className=='main'){
var zxcwidth=zxcclds[zxc0].offsetWidth;
zxcAddEvt(zxcclds[zxc0],'zxcMseOver','mouseover');
zxcAddEvt(zxcclds[zxc0],'zxcMseOut','mouseout');
for (var zxc0a=zxc0+1;zxc0a<zxcclds.length;zxc0a++){
if (zxcclds[zxc0a].tagName=='DIV'){
if (zxcclds[zxc0a].className=='sub'){
zxcclds[zxc0].sub=zxcclds[zxc0a];
zxcAddEvt(zxcclds[zxc0a],'zxcMseOut','mouseout');
zxcES(zxcclds[zxc0a],{position:'absolute',visibility:'hidden',left:zxcclds[zxc0].offsetWidth+'px',top:(zxcclds[zxc0].offsetTop+5)+'px'});
break;
}
if (zxcclds[zxc0a].className=='main'){
break
}
}
}
}
}
}
for (var zxc1=0;zxc1<zxcary.length;zxc1++){
if (zxcary[zxc1].nodeType!=1){
if (zxcary[zxc1]){ zxcp.removeChild(zxcary[zxc1]); }
}
}
zxcES(zxcp,{position:(zxcp.style.position)?zxcp.style.position:'relative',width:(zxcwidth)+'px'});
}

function zxcMseOver(zxcevt){
zxcevt.cancelBubble=true;
if (zxcevt.stopPropagation) zxcevt.stopPropagation();
var zxcp=this.parentNode;
var zxcclds=zxcp.childNodes;
if (this!=zxcclds[0]&&!this.className.match('init')){
if (this.sub){ zxcp.insertBefore(this.sub,zxcclds[0]); }
zxcp.insertBefore(this,zxcclds[0]);
for (var zxc0=0;zxc0<zxcclds.length;zxc0++){
if (zxcclds[zxc0].className=='main'){
zxcclds[zxc0].className+=' init';
}
if (zxcclds[zxc0].className=='sub'){
zxcES(zxcclds[zxc0],{position:'absolute',top:(zxcclds[zxc0-1].offsetTop+5)+'px'});
}
}
return;
}
for (var zxc0=0;zxc0<zxcclds.length;zxc0++){
if (zxcclds[zxc0].tagName=='DIV'){
if (zxcclds[zxc0].className.match('main')){
for (var zxc0a=zxc0+1;zxc0a<zxcclds.length;zxc0a++){
if (zxcclds[zxc0a].tagName=='DIV'){
if (zxcclds[zxc0a].className=='sub'){
if (zxcclds[zxc0a].offsetTop>zxcclds[zxc0].offsetTop&&zxcclds[zxc0a].offsetTop-zxcclds[zxc0].offsetTop<10){
zxcES(zxcclds[zxc0a],{position:'absolute',visibility:(zxcclds[zxc0]==this)?'visible':'hidden',top:(zxcclds[zxc0].offsetTop+5)+'px'});
}
break;
}
if (zxcclds[zxc0a].className=='main'){
break
}
}
}
}
}
}
}

function zxcMseOut(zxcevt){
var zxcp=this.parentNode;
if (zxcCkEventObj(zxcevt,zxcp)){
var zxcclds=zxcp.childNodes;
for (var zxc0=0;zxc0<zxcclds.length;zxc0++){
if (zxcclds[zxc0].tagName=='DIV'){
if (zxcclds[zxc0].className=='sub'){
zxcES(zxcclds[zxc0],{visibility:'hidden'});
}
}
}
}
}

function zxcCkEventObj(zxce,zxcobj){
var zxceobj;
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
zxceobj=(zxce.relatedTarget)?zxceobj=zxce.relatedTarget:(zxce.type=='mouseout')?zxce.toElement:zxce. fromElement;
if (!zxceobj){ return true }
while (zxceobj.parentNode){
if (zxceobj==zxcobj){ return false; }
zxceobj=zxceobj.parentNode;
}
return zxceobj;
}

//-->
</script>


</head>

<body onload="zxcMenuInit('tst');" >
<div id="tst">
<div class="main" style="">1.about
</div>
<div class="sub" style="">
<div class="subitem" style=""><a href="#" >1.1</a></div>
<div class="subitem" style="">1.2</div>

</div>
<div class="main" style="">2.contact
</div>
<div class="sub" style="">
<div class="subitem" style="">2.1</div>
<div class="subitem" style="">2.2</div>
<div class="subitem" style="">2.2</div>
</div>
<div class="main" style="">3.privacy
</div>
<div class="sub" style="">
<div class="subitem" style="">3.1</div>
<div class="subitem" style="">3.2</div>
<div class="subitem" style="">3.3</div>
</div>
<div class="main" style="">4.help
</div>
<div class="sub" id="tom" style="">
<div class="subitem" style="">4.1</div>
<div class="subitem" style="">4.2</div>
<div class="subitem" style="">4.2</div>
<div class="subitem" style="">4.2</div>
</div>
</div>



</body>

</html>

mrjameer
02-18-2007, 03:18 PM
hi,

thankyou verymuch for your code.i want the links should be changed dynamically inside the scripts of about.php,contact.php,help.php,privacy.php
according to the links clicked by the user in the menu.the menu will be remains constant.
if a user clicks about link,it opens the about.php.inside about.php i have the link to next menu item say 'contact'.from contact to privacy and from privacy to help.
if a user clicks 'contact' link first.by default the link inside the contact.php is
privacy but this link should change to about.like this.i appreciate you for your response.

thanks
mrjameer



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum