Do not open from index ~ See Pop=It Menu

W e will take the below style sheet piece by piece** and explain each reconfiguration and substitution* in certain parts of the stlye sheet.

* There are certain parts of this style sheet that to alter the color, you must substitute for the word(s) that are there.
** We have divided the style sheet into sections. This is to differentiate what part we are explaining. The separations are "Not" part of the script.

Style Sheet Configurations

width:165px; This defines how wide the box is that the links reside.
background-color:menu; The word menu must be changed to either a HEX color or word color to define the inside color of the pop-up box itself. We changed ours to black.
border:2px solid black; This refers to the border width and color surrounding the pop-up box. We left the width the same and changed the color to white.
font:normal 12px Verdana; This defines the font size (12) and style (Verdana) inside the pop-up box.
We reconfigured ours to
font:normal 10px Times Roman,Verdana,Helvetica*;
* Notice we have 3 font styles as opposed to the default of 1. Reason being is that not all computers have the single font style defined. This way you give the system a choice of three different styles to select from.
line-height:18px; This is very important to define correctly. This gives you the height inside the pop-up box. Fisrt you need to add all the links, then set the line height. You have to set it to be able to view all the links. Too small and the links will not be visible. too big and the pop-up box will extend downward too far onto the page and not look professional. This you can play around with until you get the look and feel you want.

.menuskin a{
text-decoration:none;
color:black;
padding-left:10px;
padding-right:10px;
}

color:black; This defines the font color inside the pop-up box. We replaced black with #fff0f5.
padding-left:10px; This defines how much space (padding) in pixels from the left side of the pop-up box. We have ours set at 3px
padding-right:10px; This defines how much space (padding) in pixels from the right side of the pop-up box. We have ours set at 3px

#mouseoverstyle{
background-color:highlight;
}

#mouseoverstyle{
background-color:highlight;
}

With the above we removed part of the code to eliminate the high-light effect and replace the effect with another style sheet effect and color to get the Blue underline effect on mouseover on the links.
This is the default effect on mouseover Just replace the word highlight with either a word or HEX color. What we did was remove part of the code so it looks like the below:

#mouseoverstyle{

}

We also added into the <HEAD> section of the document the following code to achieve the underline effect on mouseover.

<style>
a{text-decoration:none}
a:hover{text-decoration: underline; color:#1e90ff;}
</style>

#mouseoverstyle a{
color:white;
}
-->
</style>

The last thing we did was to also change the next part of the code from the color "white" (default) to the hex code of #1e90ff. (See Part Four (4) below:

#mouseoverstyle a{
color:#1e90ff;
}
-->
</style>

T he next part we will cover (still in the <HEAD> section) are the links (URL's) and link names. We will also cover the opening each link in either the same window or a new browser window in this section.

I f you want to add another pop-up menu, like the above stated
"FOLLOW SYNTAX LAID OUT". In other words to add another set of links, the syntax would look something like the below.

var linkset=new Array()
//SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT

linkset[0]='<div class="menuitems"><a href="URL Goes Here">Link Name Here</a></div>'
linkset[0]+='<div class="menuitems"><a href="URL Goes Here">Link Name Here</a></div>'
linkset[0]+='<div class="menuitems"><a href="URL Goes Here">Link Name Here</a></div>'

linkset[1]='<div class="menuitems"><a href="URL Goes Here">Link Name Here</a></div>'
linkset[1]+='<div class="menuitems"><a href="URL Goes Here">Link Name Here</a></div>'
linkset[1]+='<div class="menuitems"><a href="URL Goes Here">Link Name Here</a></div>'
linkset[1]+='<div class="menuitems"><a href="URL Goes Here">Link Name Here</a></div>'

linkset[2]='<div class="menuitems"><a href="URL Goes Here">Link Name Here</a></div>'
linkset[2]+='<div class="menuitems"><a href="URL Goes Here">Link Name Here</a></div>'
linkset[2]+='<div class="menuitems"><a href="URL Goes Here">Link Name Here</a></div>'
linkset[2]+='<div class="menuitems"><a href="URL Goes Here">Link Name Here</a></div>'

////No need to edit beyond here

Y ou can add or delete as many links in any linkset you need. Just remember to follow the numerical syntax.

N otice how we did it. We just added another set of links but pay particular attention the the number sequence. It Must follow in numerical order. 0,1,2, 3,4 etc.

N ow lets make the links open in a new browser window. In other words, when you select the link, your guest will stay on the page the menu is on and the link will open on a separate page, keeping the main page open in the background. Just add this attribute into the URL address
target="_blank"

linkset[0]='<div class="menuitems"><a href="URL Goes Here"target="_blank">Link Name Here</a></div>'
linkset[0]+='<div class="menuitems"><a href="URL Goes Here">Link Name Here</a></div>'
linkset[0]+='<div class="menuitems"><a href="URL Goes Here">Link Name Here</a></div>'

I f you want the link to open in the same browser window, just do not add the attribute of target="_blank".

N ow for the last part of the code. This part goes in the <BODY> section of your document where you want the effect to be situated. This is the part that gives you the subject(s) for each link set.

<div id="popmenu" class="menuskin" onMouseover="clearhidemenu();highlightmenu(event,'on')" onMouseout="highlightmenu(event,'off');dynamichide(event)">
</div>

<a href="#" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()">Catagory Name Heres</a><br>
<a href="#" onMouseover="showmenu(event,linkset[1])" onMouseout="delayhidemenu()">Catagory Name Here</a>

T o add another category, again, just follow the numerical syntax.

<div id="popmenu" class="menuskin" onMouseover="clearhidemenu();highlightmenu(event,'on')" onMouseout="highlightmenu(event,'off');dynamichide(event)">
</div>

<a href="#" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()">Category Name Here</a><br>
<a href="#" onMouseover="showmenu(event,linkset[1])" onMouseout="delayhidemenu()">Category Name Here</a><br>
<a href="#" onMouseover="showmenu(event,linkset[2])" onMouseout="delayhidemenu()">Category Name Here</a>

N otice in the above section of code the # character. For all intensive purposes if you know your HTML coding, this would signify reverting back to your main or root URL by clicking on it. This is assuming that you have this menu effect on your main page. If you have this effect on any other page but your root URL (main page) you have two options available to you. You can either replace the # with the URL that this effect is on or disable the # URL. You can disable it by adding the below little sniplet of code into every # URL.
onClick="return false;"

<div id="popmenu" class="menuskin" onMouseover="clearhidemenu();highlightmenu(event,'on')" onMouseout="highlightmenu(event,'off');dynamichide(event)">
</div>

<a href="#"onClick="return false;" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()">Catagory Name Here</a><br>
<a href="#"onClick="return false;" onMouseover="showmenu(event,linkset[1])" onMouseout="delayhidemenu()">Catagory Name Here</a>

B elow you will notice howto add the URL of the page this effect resides if it is not on your root or main URL.

<div id="popmenu" class="menuskin" onMouseover="clearhidemenu();highlightmenu(event,'on')" onMouseout="highlightmenu(event,'off');dynamichide(event)">
</div>

<a href="http://www.yourURL.com/pagename.html" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()">Catagory Name Here</a><br>
<a href="http://www.yourURL.com/pagename.html" onMouseover="showmenu(event,linkset[1])" onMouseout="delayhidemenu()">Catagory Name Here</a>

R eason for this little modification is quite simple. People by nature are curious. They will click on links just to see where they go. If this menu is not on the main or root URL page, by clicking on it will sent your visitor to your main page. By making this reconfiguration, it makes the menu and your page just a little more professional.

I n the above section of code you will notice the <br> tag positioned in a few places. If you would view the [ Default Menu Effect ] you will see the categories are on top of each other. If you would remove these tags, they will be positioned side by side like in our modified example.

I f you would like to add this effect into your pages, just close this page and grab the link on the preceding page.

Pop-It Menu Tutorial