Tutorial on the Pop-up Menu in Javascript
Depending on the total number of links contained within your website, the amount of page space a fixed menu takes can be quite extensive. Many websites contain more than a simple three to five pages and this is reflected in a well-designed menu bar. To reduce the total page space taken by a fairly extensive menu, using Javascript to create a pop-up menu may be in order. With the creation of one menu page and a bit of coding in your existing pages, you can quickly have a pop-up menu that is easy to use and navigate.
Other People Are Reading
Instructions
-
-
1
Write down a list of all the web pages located within your web site. Having a list of the URLs and page names will make the rest of this process a lot easier.
-
2
Create a new web page in either a web page editing program or Notepad and name it "menu.html." Within the body section of this web page (between <body> and </body>), create links to your various web pages using the following code line as an example:
<a href="javascript:openPUMenu('home.html')">Home</a>
You can substitute the appropriate page names and titles for "home.html" and "Home." Add as many links as are necessary to ensure all your website pages are included.
-
-
3
Edit the header portion of menu.html (between <head> and </head>) to include the following Javascript code:
<script language="JavaScript">
<!--
function openPUMenu(nURL) {
opener.document.location = nURL;
}
//-->
</script>This portion of coding will correspond with web links placed within the body of the previous page.
-
4
Open the web page where you would like to include the Javascript pop-up menu in a web editing program. Notepad will also work fine for this purpose. Enter the following code within the header of this page:
<script language="JavaScript">
<!--
function openPUNav() {
win = window.open("menu.html", "Navigation","width=200,height=300,scrollbars=no,status=no");
}
//-->
</script>This Javascript coding simply tells the web browser to open a new browser window that is 200 pixels wide by 300 pixels high. Additionally, it restricts the view of the browser window by not allowing scrollbars or a status bar. These options can be edited.
-
5
Locate the area you would like to include the pop-up menu link in the opened page and enter the following code:
<a href="javascript:openPUNav()">Menu Navigation</a>
-
6
Save all your created and edited work to your website. You may now test out your newly created Javascript pop-up menu by going to the web page where you included the menu link. Instead of creating a new instance of a menu each time with new web pages, you can simply add the new page to the menu.html page. Additionally, you can add the openPUNav Javascript function and corresponding menu link to any page where you require the new menu.
-
1
