Html, Pop-it Menus, I need Lots of help

  • 1
  • Question
  • Updated 9 years ago
  • Answered
I have read everything i can find on drop down menus, and i have found that i am wanting to use a 'pop-it' menu on my site. But i dont know how to edit the html to make it look like i want it to. I was also hoping i could make a few columns and rows, like maybe 16 different links within one menu. Any help is appreciated
Photo of Savannah

Savannah

  • 77 Posts
  • 0 Reply Likes
  • Frusturated

Posted 9 years ago

  • 1
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
do you mean like where you can choose what you want on the drop down menus?? if you don't get what i mean then i will show oyu what i mean!!
Photo of Savannah

Savannah

  • 77 Posts
  • 0 Reply Likes
I think so but i am not quite sure, Feel free to show me i need all the help i can get.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Savannah

I understand you want to use the Pop-it menu. How can I help you tweak the HTML code to suit your needs? Can you please give me some details as to what you'd like to see? Have you already placed this code on your site? If so, can you please share with me your site URL so that I can see what has been done so far? Thanks.
Photo of Savannah

Savannah

  • 77 Posts
  • 0 Reply Likes
My site is not published yet, I have this Screen shot that i took of an example site from a company that i am sort of working with, and it is basically what i was wanting the pop-it menu to look like, I am not picky with colors or anything, my current sites background is black so pretty much anything will look ok, and it don't have to be exactly like this just kinda similar if possible.
If you need a larger image to get a better look let me know and ill post it tomorrow
Thanks for your help!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Savannah.

Would you mind leaving it with me for a day so that I can work on this and see if I can come up with something that might meet your needs?
Photo of Savannah

Savannah

  • 77 Posts
  • 0 Reply Likes
Sure! and thank you so much!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Savannah

I've played with the Pop-it menu and was unfortunately unable to set it up the way that I think you wanted. I'll try to look into alternatives.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Okay.. I found one that may work for you! Please take a look at my test site:

http://scratchpad.yolasite.com/savannah

Please let me know if this will work for you. It can still be tweaked further.
Photo of Savannah

Savannah

  • 77 Posts
  • 0 Reply Likes
That looks like it will work Perfectly!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Savannah

Sorry to have taken so long to respond back. Here's the code!

<!--Links used to initiate the sub menus. Pass in the desired submenu index numbers (ie: 0, 1) -->
<a href="http://www.javascriptkit.com&quot; onMouseover="showit(0)">JavaScript Kit</a> | <a href="http://freewarejava.com&quot; onMouseover="showit(1)">Freewarejava</a><br>

<!-- Edit the dimensions of the below, plus background color-->
<ilayer width=400 height=32 name="dep1" bgColor="#E6E6FF">
<layer name="dep2" width=400 height=32>
</layer>
</ilayer>
<div id="describe" style="background-color:#E6E6FF;width:400px;height:32px" onMouseover="clear_delayhide()" onMouseout="resetit(event)"></div>

<script language="JavaScript1.2">

/*
Tabs Menu (mouseover)- By Dynamic Drive
For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
This credit MUST stay intact for use
*/

var submenu=new Array()

//Set submenu contents. Expand as needed. For each content, make sure everything exists on ONE LINE. Otherwise, there will be JS errors.

submenu[0]='<font size="2" face="Verdana"><b><a href="http://www.javascriptkit.com/cutpaste...; | <a href="http://www.javascriptkit.com/javainde... tutorials</a> | <a href="http://www.javascriptkit.com/javatuto... JS tutorials</a> | <a href="http://www.javascriptkit.com/java/&qu...; | <a href="http://www.javascriptkit.com/howto/&q... Tutorials</a></b></font>'

submenu[1]='<font size="2" face="Verdana"><b><a href="http://freewarejava.com/applets/index...; | <a href="http://freewarejava.com/tutorials/ind...; | <a href="http://freewarejava.com/javasites/ind... and Zines</a> | <a href="http://freewarejava.com/jsp/index.sht...'

//Set delay before submenu disappears after mouse moves out of it (in milliseconds)
var delay_hide=500

/////No need to edit beyond here

var menuobj=document.getElementById? document.getElementById("describe") : document.all? document.all.describe : document.layers? document.dep1.document.dep2 : ""

function showit(which){
clear_delayhide()
thecontent=(which==-1)? "" : submenu[which]
if (document.getElementById||document.all)
menuobj.innerHTML=thecontent
else if (document.layers){
menuobj.document.write(thecontent)
menuobj.document.close()
}
}

function resetit(e){
if (document.all&&!menuobj.contains(e.toElement))
delayhide=setTimeout("showit(-1)",delay_hide)
else if (document.getElementById&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhide=setTimeout("showit(-1)",delay_hide)
}

function clear_delayhide(){
if (window.delayhide)
clearTimeout(delayhide)
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

</script>

Configuring the menu is essentially a 3 step process. 1. Firstly, modify the main links to your own. 2. Then, specify the dimensions (width/height) of the container holding the sublinks. 3. Finally, input the sub links themselves inside the script.

1. Modifying the main links
Look for this line in the code above:
<a href="http://www.javascriptkit.com&quot; onMouseover="showit(0)">JavaScript Kit</a> | <a href="http://freewarejava.com&quot; onMouseover="showit(1)">Freewarejava</a><br>

Replace the a href links with your own. For each main link you add, you need to increase the index number. Currently, there are 2 main links. If you add a third link, it would then look like this:

<a href="http://YOUR LINK URL GOES HERE.com" onMouseover="showit(2)">YOURTEXTLINKGOESHERE
</a> |

2. Specify the dimensions
<!-- Edit the dimensions of the below, plus background color-->
<ilayer width=400 height=32 name="dep1" bgColor="#E6E6FF">
<layer name="dep2" width=400 height=32>

You can adjust the following:
width (there are 2 widths - put in the same number)
height (there are 2 heights - put in the same number)
bgColor

3. Sub links
Find and replace the sublinks with your own
submenu[0]='<font size="2" face="Verdana"><b><a href="http://www.javascriptkit.com/cutpaste...; | <a href="http://www.javascriptkit.com/javainde... tutorials</a> | <a href="http://www.javascriptkit.com/javatuto... JS tutorials</a> | <a href="http://www.javascriptkit.com/java/&qu...; | <a href="http://www.javascriptkit.com/howto/&q... Tutorials</a></b></font>'

submenu[1]='<font size="2" face="Verdana"><b><a href="http://freewarejava.com/applets/index...; | <a href="http://freewarejava.com/tutorials/ind...; | <a href="http://freewarejava.com/javasites/ind... and Zines</a> | <a href="http://freewarejava.com/jsp/index.sht...'

For each new sublink, it needs to correspond with your main link. So, remember we added a new mainlink above? Then, the corresponding sublinks, would look like this:

submenu[2]='<font size="2" face="Verdana"><b><a href="http://YOUR LINK URL 1.com">YOUR TEXT GOES HERE</a> | <a href="http://YOUR LINK URL 2.com">YOUR TEXT GOES HERE</a> | <a href="http://YOUR LINK URL 3.com">YOUR TEXT LINK GOES HERE</a></b></font>'

I hope this makes sense. If not, let me know and I can help you out with it.
Photo of Savannah

Savannah

  • 77 Posts
  • 0 Reply Likes
thank you SOO soo much! and dont worry about it taking so long, i was actually taking a little break, i was getting too frustrated with my site and it not looking how i wanted it to. again thanks so much, I will post a link to my website after i finish editing the code so that you can see what you have helped me to accomplish!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I look forward to seeing the end results! =)
Photo of Savannah

Savannah

  • 77 Posts
  • 0 Reply Likes
You can adjust the following:
width (there are 2 widths - put in the same number)
height (there are 2 heights - put in the same number)
bgColor
this part confuses me a bit...

Specify the dimensions
<!-- Edit the dimensions of the below, plus background color-->

do i need to keep the width=400 height=32 throught the whole code, if not how do i know what i need to change it to?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey Savannah

The height and width depends on how many sublinks you plan to have. The more you have, the bigger the dimensions. You can play around with it and see how it looks when you preview it. You can always keep changing the sizes until you find one that works.
Photo of Savannah

Savannah

  • 77 Posts
  • 0 Reply Likes
Ok, thank you, again! you have been so much help. i really appreciate it!
Photo of Savannah

Savannah

  • 77 Posts
  • 0 Reply Likes
Ok, I hate to bother everyone again. but i have been trying to figure out how to edit the above html code and i just cant do it. when i edit it it doesnt pop like it should on my actual page.. i look over the code again and again and i just cant figure out what i am doing wrong. I know that it seems to be broken down so i can understand what to change but i guess its just not simple enough.. I know i am sounding very stupid right now but can someone please break it down a little bit more for me.. (if that is even possible) If it is already as simple as it gets just say so and ill continue to try figuring it out..
Thanks