• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 6. Navigation > Adding Pop-up Menus

Adding Pop-up Menus

Sometimes called contextual menus, pop-up menus allow you to place a list of links anywhere on the page, associated with a link. Rather than simply being placed under a menu, pop-up menus will appear around a link. Generally, they’ll appear below and slightly to the right of the link, but if there isn’t enough room, the pop-up will position itself so that it fits in the window without forcing the user to scroll to view it.

To add a pop-up menu:

var objPopUp = null;

In your JavaScript in the head of the page, initialize the variable objPopUp to null (Code 6.19). This variable will be used to record which object is currently popping up.

Code 6.19. The pop-up menu works by showing a hidden layer with links on it and positioning that layer next to where the mouse clicked. It will then disappear the next time the visitor clicks in the browser window.

<html xmlns="http://www.w3.org/1999/xhtml">
       <title>DHTML &amp; CSS Advanced | Adding a Pop-up Menu</title> 
       <script type="text/JavaScript" language="javascript"><!--
          var objPopUp = null;
								var popMenuOn = 0;
								function popUp(evt,objectID) {
								if (popMenuOn == 1) popHide();
								document.onclick = popHide;
								var evt = (evt) ? evt : ((window.event) ? event : null);
								objPopUp = document.getElementById(objectID);
								xPos = evt.clientX
								yPos = evt.clientY;
								if (xPos + objPopUp.offsetWidth > document.body.clientWidth) xPos =xPos - objPopUp.offsetWidth;
								if (yPos + objPopUp.offsetHeight > document.body.clientHeight) yPos =yPos - objPopUp.offsetHeight;
								objPopUp.style.left = xPos + 'px';
								objPopUp.style.top = yPos + 'px';
								objPopUp.style.visibility = 'visible';
								function popHide() {
								if (popMenuOn == 0) {
								popMenuOn = 1;
								else {
								objPopUp.style.visibility = 'hidden';
								objPopUp = null;
								popMenuOn = 0;
								document.onclick = null;
       <style type="text/css" media="screen"><!--
body {
								margin: 0px;
								padding: 0px;
p {
     padding: 10px;
a:link {
								white-space: nowrap;
								.popUp {
								font-size: 10px;
								font-family: Verdana, Arial, Helvetica, sans-serif;
								background-color: #fff;
								visibility: hidden;
								position: absolute;
								width: 125px;
								border: solid 1px black;
								.popUpLink {
								color: #f00;
								cursor: nw-resize;
								a.menuLink {
								color: #f00;
								display: block;
								text-decoration: none;
								padding: 3px;
								border-bottom: 1px solid #ccc;
								a.menuLink:hover {
								background-color: #ccc;
<p>'But it certainly WAS funny,' (Alice said afterwards, when she was telling her sister the history of
→ all this,) `to find myself singing <span id="pop1" class="popUpLink" onclick="popUp(event,'popUp1')">
→ HERE WE GO ROUND THE MULBERRY BUSH."</span> I don't know when I began it, but somehow I felt as if I'd
→ been singing it a long long time!'</p> 
<p>The other two dancers were fat, and very soon out of breath. 'Four times round is enough for one
→ dance,' <span id="pop2" class="popUpLink" onclick="popUp(event,'popUp2')">Tweedledum panted out,
→ </span> and they left off dancing as suddenly as they had begun: the music stopped at the same moment. 
        <div id="popUp1" class="popUp">
								<a href="#" class="menuLink" onclick="popHide()">Link 1</a>
								<a href="#" class="menuLink" onclick="popHide()">Link 2</a>
								<a href="#" class="menuLink" onclick="popHide()">Link 3</a>
        <div id="popUp2" class="popUp">
           <a href="#" class="menuLink" onclick="popHide()">Link 4</a> 
           <a href="#" class="menuLink" onclick="popHide()">Link 5</a> 
           <a href="#" class="menuLink" onclick="popHide()">Link 6</a> 


var popMenuOn = 0;

Initialize the variable popMenuOn to 0. This variable is used to record whether the pop-up menu is currently showing or not.

function popUp(evt,objectID) {...}

Add the function popup() to your JavaScript. This function shows the pop-up menu close to where the visitor clicked a link. The function hides any other pop-up menus currently showing, sets a global event handler to hide the menu if the visitor clicks anywhere in the browser window, calculates the position where the click event took place, and positions and shows the menu, offsetting it if it won’t fully fit in the browser window without scrolling.

function popHide() {...}

Add the function popHide() to your JavaScript. This function hides the currently displayed pop-up menu and sets the global click event to null so that the user can again click in the screen.

body {...}

Add definitions in the <body> tag to set the padding and margin for the document to 0. Remember, we’re positioning the pop-up menus using absolute positioning, but not all browsers agree on exactly where the edge of the screen is. Setting the margin and padding to 0 helps level the playing field.

a:link {...}

Add a definition for the link tag to your CSS and set the white-space property so that text in links will not wrap. This is optional, but Internet Explorer has difficulty with a pop-up that break across two lines of text. Setting links not to wrap will prevent this.

.popUp {...}

Add the class popUp to your CSS. This class is used to control the general appearance of the pop-up menu. The exact design is up to you, but you’ll need to set visibility to hidden and position to absolute.

.popUpLink {...}

Add the class popUpLink to your CSS. This class sets the appearance of the link used to trigger the pop-up menu.


Using <span> tags, add onclick event handlers to your content that will trigger the popUp() function, passing it the event object and the unique ID for the pop-up menu you want to show.

<div id="popUp1"
→ class="popUp">...</div>

Use <div> tags to set up layers using the popUp class and a unique ID. These layers will contain the menu options.

<a href="#" class="menuLink"
→ onclick="popHide()">...</a>

Add links within the layer created in the previous step that will be displayed as part of the menu. Whenever the visitor clicks a clink in the content, the pop-up menu appears near the mouse pointer, allowing the visitor to choose from the list of links (Figure 6.43). If the pop-up would be below the bottom edge of the browser window or off the screen to the right, the pop-up will move itself to appear above and/or to the left of the triggering link (Figure 6.44).

Figure 6.43. The pop-up menu appears wherever the visitor needs it on the screen, allowing you to add multiple navigation links to a single link.

Figure 6.44. If there isn’t enough room to display the menu below and to the right of the mouseclick, the menu adjusts itself above and to the left.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint