Classic ASP Discussion - Navigation Menu Advice needed.

Print Page | Close Window

Navigation Menu Advice needed.

Printed From: Web Wiz Forums
Category: General Discussion
Forum Name: Classic ASP Discussion
Forum Description: Discussion on Active Server Pages (Classic ASP).
URL: https://forums.webwiz.net/forum_posts.asp?TID=7296
Printed Date: 29 March 2026 at 10:53am
Software Version: Web Wiz Forums 12.08 - https://www.webwizforums.com

Topic: Navigation Menu Advice needed.

Posted By: Maxi
Subject: Navigation Menu Advice needed.
Date Posted: 15 November 2003 at 12:24pm

Hi all, hope someone can advice me of what I believe is the most important part of any website: The Navigation.

I am presently using a Javascript navigation menu called HVMENU 5 whish is an excellent menu system, that makes a microsoft style menu (dropdown menues ect.) It can be viewed at the below link. http://www.dynamicdrive.com/dynamicindex1/hvmenu/ - http://www.dynamicdrive.com/dynamicindex1/hvmenu/

My problem is however what to do if people do not allow Scripts to run in there browser, as if they do not have scripts enabled my menu will not show.

Can anybody (Bruce?) advice me of how I can build a menu like the menu on the left of this Forum? I like the Dark Grey Mouseover effect when the link is highlighted, and even if scripting is disabled the reader can still see the links without the mouseover effect....instead of the whole menu disappearing.

How can I make this mouseover effect if I build a menu in a table...Just so that the cell will be highlighted the same way? (Where can I find this javascript and information on how to implement it?)

Hope somebody can help me out here as Navigation is giving me sleepless nights

Kind Regards

Maxi

Replies:

Posted By: God_Struth
Date Posted: 15 November 2003 at 12:29pm

It uses CSS and the mouse over event, very easily done!

-------------
"I'm only trying to help......"

Posted By: God_Struth
Date Posted: 15 November 2003 at 12:35pm

Sorry, forgot the CSS:


a.nav  {

color : #2F03ED;

font-family: Verdana, Arial, Helvetica, sans-serif;

text-decoration: none;

font-size: 10px;

font-weight: bold;

background-color: #ffffff;

       }



a.nav:hover  {

color : #2F03ED;

font-family: Verdana, Arial, Helvetica, sans-serif;

text-decoration: none;

font-size: 10px;

font-weight: bold;

background-color: #cccccc;

       }

-------------
"I'm only trying to help......"

Posted By: Maxi
Date Posted: 15 November 2003 at 3:27pm

Hi God_Struth

Thanks for such a quick responce I had not expected that

I have taken your advice and have now been playing with the CSS for awhile and cannot figure out what to do, (CSS is not my strong point at all).

I was wondeing if you could point me in the direction of what I must do, to get this working. Hope you can help

This is what my style sheet looks like now:

------------------------------------------------------------ ---

DIV.Toolbar  A           {color: #FFFFFF; text-decoration:none}
DIV.Toolbar  A:link   {color: #FFFFFF; text-decoration:none}
DIV.Toolbar  A:visited  {color: #FF FFFF; text-decoration:none}
DIV.Toolbar  A:hover   {color: #0000FF; text-decoration:none}
DIV.Toolbar  A:active  {color: #0000FF; text-decoration:none}

DIV.Links  A           {color: #009999; text-decoration:none}
DIV.Links  A:link   {color: #0 09999; text-decoration:none}
DIV.Links  A:visited  {color: #0099 99; text-decoration:none}
DIV.Links  A:hover   {color: #FF0000; text-decoration:none}

DIV.Login  A           {color: #666666; text-decoration:none}
DIV.Login  A:link   {color: #6 66666; text-decoration:none}
DIV.Login  A:visited  {color: #6666 66; text-decoration:none}
DIV.Login  A:hover   {color: #0000FF; text-decoration:none ; font-weight: normal}

DIV.IconLinks  A           {color: #009999; text-decoration:none}
DIV.IconLinks  A:link   {color:&nbs p;#009999; text-decoration:none}
DIV.IconLinks  A:visited  {color: # 009999; text-decoration:none}
DIV.IconLinks  A:hover   {color: #FF0000; text-decoration:none}

.Fields {
border: 1px #666666 groove;
; background-color: #FFFFFF
; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: xx-small; background-position: center center
; font-weight: bold; color: #009999
}
.Buttons {
border: 1px #666666 groove;
; background-color: #009999
; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: xx-small; background-position: center center
; font-weight: bold
; color: #CCCCCC
}
a.nav {
color : #2F03ED;
;font-family: Verdana, Arial, Helvetica, sans-serif
;text-decoration: none
;font-size: 10px
;font-weight: bold
;background-color: #ffffff
}

a.nav:hover {
color : #2F03ED;
;font-family: Verdana, Arial, Helvetica, sans-serif
;text-decoration: none
;font-size: 10px
;font-weight: bold
;background-color: #cccccc
}

</style>

_________________________________________________________

THIS IS WHAT MY MENU LOOKSLIKE

________________________________________________________

<html>

<body>

</body>

</html>

________________________________________________________

Hope you can show me how to actually call the code to get the effect :-)

Hope that I do not sound totally stupid, and hope you can help out again.

Kind Regards

Maxi

Posted By: God_Struth
Date Posted: 15 November 2003 at 6:20pm

Use the class in the link rather than the table:

Instead of:

<tr>
<td width="100%" class="nav:hover"><a href="http://www.Link1.com">LINK 1</a></td>
</tr>

You would do it:

<tr>
<td width="100%"><a href="http://www.Link1.com" class="nav">LINK 1</a></td>
</tr>

The CSS would look like:

a.nav {
color : #2F03ED;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 10px;
font-weight: bold;
       }
a.nav:visited {
color : #2F03ED;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 10px;
font-weight: bold;
       }
a.nav:hover {
color : #2F03ED;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 10px;
font-weight: bold;
background-color: #cccccc;
       }

-------------
"I'm only trying to help......"

Posted By: Maxi
Date Posted: 16 November 2003 at 4:50am

Hi God_Struth,

I am happy to say that that did 50% of the trick (i.e. It now highlights the area around the link).

Unfortunately it does not highlight the whole cell in which the link is in, like the way the webwiz menu on the left does.

Any ideas on how to do this would be appreciated. Thanks in advance for all your help already.

Regards

Maxi

Posted By: God_Struth
Date Posted: 16 November 2003 at 10:47am

I ain't 100% sure, but I think you would have to use a little javascript to enable the whole cell to be active as such. (Think its javascript used to achieve the effect on this site..)

-------------
"I'm only trying to help......"

Posted By: God_Struth
Date Posted: 16 November 2003 at 10:49am

Here's an example, but javascript ain't my thing but it does work:


<html>

<head>

<script language="JavaScript">

function ON(num) {

  document.getElementById("cell" + num).bgColor = "#cccccc";

};



function OFF(num) {

  document.getElementById("cell" + num).bgColor = "#ffffff";

};

</script>

</head>

<body>





<table width=30% border=0>

<tr>

<td id="cell1" onMouseover="ON(1);" onMouseout="OFF(1);"><a href="#">cell 1</a></td>

</tr>

<tr>

<td id="cell2" onMouseover="ON(2);" onMouseout="OFF(2);">cell 2</td>

</tr>

<tr>

<td id="cell3" onMouseover="ON(3);" onMouseout="OFF(3);">cell 3</td>

</tr>

<tr>

<td id="cell4" onMouseover="ON(4);" onMouseout="OFF(4);">cell 4</td>

</tr>

<tr>

<td id="cell5" onMouseover="ON(5);" onMouseout="OFF(5);">cell 5</td>

</tr>

</table>

</body>

</html>

-------------
"I'm only trying to help......"

Posted By: Semikolon
Date Posted: 16 November 2003 at 11:30am

Add this to the head of your website

<!--
// See KB article about changing this dynamic HTML
dynamicanimAttr = "dynamicanimation"
animCancel = "skipanim"
fpanimationPrefix = "fpAnim"
animateElements = new Array()
currentElement = 0
speed = 1
stepsZoom = 8
stepsWord = 8
stepsFly = 17
stepsSpiral = 16
stepsSpiralWord = 19
stepsElastic = 32
steps = stepsZoom
step = 0
cornerPhase=0
outEffect=0
function remSuffix(str)
{
  ind=str.indexOf("FP")
  str = str.substring(0,ind)
  return str
}
function dynAnimOut(el)
{
  outEffect=1
  dynAnimation(el)
  outEffect=0
}
function dynAnimation(obj)
{
  animateElements = new Array()
  var ms = navigator.appVersion.indexOf("MSIE")
  var macness = navigator.appVersion.indexOf("Macintosh")

  ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
  ns6 = false
  if(!ie4)
  {
   if((navigator.appName == "Netscape") &&
    (parseInt(navigator.appVersion.subst ring(0, 1)) >= 5))
   {
    ns6=true
    doc_els=document.getElementsByTagNam e('*')
   }
   else if((navigator.appName == "Netscape") &&
    (parseInt(navigator.appVersion.subst ring(0, 1)) == 4))
   {
    doc_els=document.layers
   }
   else
    return
  }
  else
   doc_els=document.all
        if(outEffect && !ie4)
           return
  if(ie4)
  {
      for (index=document.all.length-1; index >= document.body.sourceIndex; index--)
   {
    el = document.all[index]
    if(outEffect && el != obj)
     continue
    if(outEffect)
     animationId = el.id.substring(9,el.id.length)
    else
     animationId = el.id.substring(6,el.id.length)
    animation=remSuffix(animationId)
    if(null != animation)
    {
     altcnt=0
     if( animation == "dropWord"    ||
      animation == "flyTopRightWord"   ||
      animation == "flyBottomRightWord"  ||
      animation == "waveWords"   ||
      animation == "hopWords")
     {
      ih = el.innerHTML
      outString = ""
      i1 = 0
      iend = ih.length
      while(true)
      {
       i2 = startWord(ih, i1)
       if(i2 == -1)
       i2 = iend
       outWord(ih, i1, i2, false, "", outEffect ? obj.id : el.id)
       if(i2 == iend)
        break
       i1 = i2
       i2 = endWord(ih, i1)
       if(i2 == -1)
        i2 = iend
       if (animation == "waveWords")
        outWordAlt(i h, i1, i2, true, animation, altcnt)
       else
        outWord(ih, i1, i2, true, (outEffect ? "Out" : "") + animation,
         outEff ect ? obj.id : el.id)

       if(i2 == iend)
        break
       i1 = i2
       altcnt++
      }
      document.all[index].innerHTML = outString
      document.all[index].style.posLeft = 0
      document.all[index].setAttribute(animCancel, true)
      document.all[index].style.visibility="visible"
     }
    }
   }
  }
  i = 0
  for (index=0; index < doc_els.length; index++)
  {
   el = doc_els[index]
   if(0 != el.id.indexOf(fpanimationPrefix))
    continue
   if (ie4)
   {
    elprops=el.style
    scrollOffsetTop=document.body.scroll Top
    docHeight=document.body.offsetHeight
    docWidth=document.body.offsetWidth
    elW=100
    elH=el.offsetHeight
   }
   else
   {
    scrollOffsetTop=window.pageYOffset
    docHeight=window.innerHeight
    docWidth=window.innerWidth
    if (ns6)
    {
     elprops=el.style
     elW=100
     elH=el.offsetHeight
    }
    else{
     elprops=el
     elW=el.clip.width
     elH=el.clip.height
    }
   }
   if(outEffect)
    animationId = el.id.substring(9,el.id.length)
   else
    animationId = el.id.substring(6,el.id.length)
   animation=remSuffix(animationId)
   if(outEffect && (obj != el))
   {
    if(el.SRCID != obj.id)
     continue
   }
   if (null != animation )
   {
    if(ie4 && null!=el.getAttribute(animCancel, false))
     continue
    if(!ie4)
    {
     elprops.posLeft=elprops.left
     elprops.posTop=elprops.top
    }
    el.startL=offsetLeft(el)
    if(animation == "f

Posted By: Maxi
Date Posted: 18 November 2003 at 8:36am

Hi God_Struth and Anthrax

Thanks so much for the help that I have recieved from both of you, it is really great that you both are kind enough to help me out here.

First of all Anthrax, thanks for your contribution with the Frontpage generated code. Unfortunately this code does not work for me because I am not running Frontpage Extensions on my Server. It works on my machine and I can see that it basically does the same as the code that God_Struth showed me. The advantage with the code that God_Struth gave me is that it seems that it is much shorter and does the same thing

To God_Struth also a big thankyou for the code that you made for me, it does the job well and I am very happy with the script :-) However there is one small thing missing, and I hope that you may have some ideas on how to sort that out so that it functions the way that I am hoping for.

The problem is: Now I am able to higlight the whole cell as I wanted to, but unfortunately the hyperlink only works when the cursor is over the actual Hyperlink. (So if the cell is highlighted I cannot just click the mouse and be forwarded to the link like the navigation on this page). Do you have anyideas on how to make the whole highlighted area the link? That would make this little javascript complete;)

Hope to hear from you.

Kind Regards

Maxi

Posted By: Semikolon
Date Posted: 18 November 2003 at 10:54am

im not sure about this, but you could try to place the a tag outside of the cell.. <a href="......." target="...."><td .........></td></a>

im not sure.. but you couldt try..

Posted By: God_Struth
Date Posted: 18 November 2003 at 8:30pm

Sorry, didn't know the menu needed to stretch. Just add an onClick event like so:


<tr> 

<td id="cell1" onMouseover="ON(1);" onMouseout="OFF(1);" onClick="link1.click();"><a href="default.asp"id="link1">cell 1</a></td> 

</tr> 

<tr> 

<td id="cell2" onMouseover="ON(2);" onMouseout="OFF(2);" onClick="link2.click();"><a href="default.asp" id="link2">cell 2</a></td> 

</tr>



etc..

You may need to add a cursor type to the menu class in your CSS file to get the hand to appear: { cursor: hand;}

Should be you now

-------------
"I'm only trying to help......"

Posted By: Maxi
Date Posted: 25 November 2003 at 9:34am

Hi God_Struth,

I just want to give you a BIG thankyou for all your help with the Javascript menu. It works great and it does exactly what I want it to do. Judging by the amount of READS to this post others have also been interested in this subject of Navigation.

I have successfully now made the "Head" part of the script an include on all the pages that I want the menues to be, and then I just include the table with the links where I want that.

Again thanks a million, your help has been so appreciated.

Also Anthrax thanks again for your help....it was great getting such quick feedback,suggestions and advice

Kind Regards

Maxi

Posted By: dj air
Date Posted: 25 November 2003 at 4:40pm

sorry if this is not necessary but i was short on time (as you know maxi).... if you speak to me online later i can help as all the features you have stated.... are running on my menu bar ... if you send me a message (sms) i will come online and give you a hand if i can...

Posted By: God_Struth
Date Posted: 25 November 2003 at 6:39pm

No problem Maxi, a pleasure to help you!

Glad its working the way you want it to, if you need any more help dont be shy in posting!

-------------
"I'm only trying to help......"

Posted By: Scotty32
Date Posted: 26 November 2003 at 3:13am

ummm

if this is just to make a CELL highlight then why not just use

<style>
a.nav { color: #000000;}
a:hover.nav {color: #ff0000; background-color: #000000; disply: block; width: 100%; height: 100%;}
</style>

<a href="page" class="nav">text</a>

this was just a quick example so you could play around with colors and fonts etc

but it'd be alot better then half a mile of code ..... or is this not wot your after

hope it helps

Posted By: God_Struth
Date Posted: 26 November 2003 at 9:30am

Scotty_32 wrote:

I tried this and its doesn't give the desired affect did you test it before posting it?

-------------
"I'm only trying to help......"

Posted By: Scotty32
Date Posted: 26 November 2003 at 9:47am

umm no i didnt test it

but i think i know the code well enuf to just type it

like sumone typeing:

<html>
<head>
<title>hello</title>
</head>
<body>
Hello
</body>
<html>

why do you ask if i tested it? did ya not liek the read text on a black background J/K

if ya profer i could improve it, with a few more tags

Posted By: God_Struth
Date Posted: 27 November 2003 at 9:09am

Scotty_32 wrote:

<P dir=ltr>why do you ask if i tested it? did ya not liek the read text on a black background

�J/K

<P dir=ltr>if ya profer i could improve it, with a few more tags

As I said, it doesn't work the way the poster wanted. So I assume you either never read this thread correctly or never tested it. Thats all.

-------------
"I'm only trying to help......"

Posted By: Maxi
Date Posted: 29 January 2004 at 6:28am

Hello again God_Struth

First of all let me again thank you for the help with the menues. I am thrilled with the way they are working and they are functioning just as I wanted them to .

I have a question regarding the colours. I would like to use an Image for the backround of the cell and am not sure about how to go about this. I tried adding the image names to the below statement, and it seemed to work......but everytime I hovered over the cell with the image colour the Page had to load the image everytime over and over?

function OFF(num) {
document.getElementById("cell" + num).bgColor = "#ffffff";
};
</script>

Which way is best to Add the colours to the above statement and how do I do it so that the same image does not have to be downloaded everytime a cell is hovered over.

I hope that you can come up with an as simple solution as you did with the menu.

Kind Regards

Maxi

Posted By: craiglove
Date Posted: 04 February 2004 at 2:15pm

a much simpler way... i can post a download to DHTML Menu... this will give you multiable styles and looks.....

-------------
http://www.scientificsales.co.nz - Scientific Sales

Posted By: Semikolon
Date Posted: 04 February 2004 at 2:53pm

if i have understood you right, this should do the trick:

onMouseOver="this.bgColor='hovercolor'" onMouseOut="this.bgColor='original color'"

in the cell.. remember big C in bgColor

Posted By: Maxi
Date Posted: 04 February 2004 at 3:09pm

Hi Semikolon,

This is how the original code looks that Godstruth was kind enough to come up with for me.

IN THE HEAD OF THE PAGE I HAVE THIS:

------------------------------------------------------------ -----<script language="JavaScript">
function ON(num) {
document.getElementById("cell" + num).bgColor = "#cccccc";
};

function OFF(num) {
document.getElementById("cell" + num).bgColor = "#ffffff";
};
</script>
------------------------------------------------------------ -----
THE ACTUAL MENU LOOKS LIKE THIS:

<tr>
<td id="cell1" onMouseover="ON(1);" onMouseout="OFF(1);" onClick="link1.click();"><a href="default.asp"id="link1">cell 1</a></td>
</tr>
<tr>
<td id="cell2" onMouseover="ON(2);" onMouseout="OFF(2);" onClick="link2.click();"><a href="default.asp" id="link2">cell 2</a></td>
</tr>
------------------------------------------------------------ ------

My question is then how do I use two seperate color gifs instead of the HEX colours written in the head (i.e.Mouseover= Pic1.gif Mouseout= Pic2.gif)?

I tried adding the images to the head of the script, but everytime I hovered over a cell the image was continously have to be redownloaded. How can I rewite the head to display two different image gifs so that they do not have to be downloaded each time?

Kind Regards from Finland
Maxi:)

Posted By: Semikolon
Date Posted: 04 February 2004 at 3:17pm

onMouseOver="this.bacground='hoverbg'" onMouseOut="this.background='orgbg'"

Posted By: Maxi
Date Posted: 04 February 2004 at 3:42pm

Hi Semikolon, thanks for the reply,

I just am not quite sure what you mean: I have done what you said, Is this written correctly for my cell:

Must I change something in the head of the script also?

regards
Maxi

Posted By: Semikolon
Date Posted: 04 February 2004 at 4:11pm

you used bgcolor instead of background

Posted By: Scotty32
Date Posted: 04 February 2004 at 4:51pm

background - is for images

bgcolor - is for colors

you could also if you wanted do:

<script>
function bgover(cell){
    cell.background="bar2.gif"
}

function bgout(cell){
    cell.background="bar1.gif"
}
</script>

<tr>
      <td width="50%" bacground="bar2.gif" onMouseover="bgover(this)" onMouseout="bgout(this)">Text 1</td>
      <td width="50%"> </td>
</tr>
<tr>
      <td width="50%" bacground="bar2.gif" onMouseover="bgover(this)" onMouseout="bgout(this)">Test 2</td>
      <td width="50%"> </td>
</tr><tr>
      <td width="50%" bacground="bar2.gif" onMouseover="bgover(this)" onMouseout="bgout(this)">Test 3</td>
      <td width="50%"> </td>
</tr><tr>
      <td width="50%" bacground="bar2.gif" onMouseover="bgover(this)" onMouseout="bgout(this)">Test 4</td>
      <td width="50%"> </td>
</tr>

this way you can have more and if you changed the background image it wouldnt take for ever

not sure if it'd work havent tested it, but am sure it will

-------------
S2H.co.uk - http://www.s2h.co.uk/wwf/" rel="nofollow - WebWiz Mods and Skins

For support on my mods + skins, please use http://www.s2h.co.uk/forum/" rel="nofollow - my forum .

Posted By: Maxi
Date Posted: 04 February 2004 at 5:11pm

Hi again Semikolon and Scotty_32
Semikolon, Tusind Tak Norge!! (English= Thousand thanks to Norway).

I posted a thankyou message but it dissapeared when I uploaded it. I had a few questions to ask, but thanks to you Scotty_32 they have been answered (difference between backround and bgcolor).

Scotty_32 I will definately try and implement your suggestion as it would be a huge timesaver if or when I change the colors.

Thanks guys its great to have some help out there!!

Do either of you have any suggestions regarding my other post in this category titled "Months between two dates", I have searched everywhere and have only found information on getting how many months there are between two dates.....when what I need is what are the month names or month numbers.

Thanks guys:)

Kind Regards from Finland
Maxi:)

Posted By: Semikolon
Date Posted: 05 February 2004 at 9:28am

Maxi wrote:

Semikolon, Tusind Tak Norge!!

it wasnt all correct.. its Tusen takk Norge.. but who cares.. i did understand it!