Blog

Adding Drop-Down Menu to a Web Page

Posted: March 14, 2014  |  By Andrei Pogorelov


Adding Drop-Down Menu to a Web Page

No programming or design skills are necessary to create professional menu with Drop Down Menu Generator. The main advantage of the Generator is that it does everything automatically, quickly, easily and gives out the professional drop-down menu for any web site.

In this short post, I will describe the next step: adding the menu to pages of your web site.


Embed Code

It is the easiest, simplest way to add your menu to any web page. Your menu is hosted on our server; you use a small code to display the menu directly on your web pages.


Embed Code

If you want to have the menu as a part of your website, follow all of the steps described below.


Adding the menu to your web site

By default, the name of your menu is "MyMenu1". Once you have completed your menu in the Menu Generator, you download it to the local disk as "MyMenu1.zip" file. Next, you unzip it to have the "MyMenu1" folder. This folder is your menu. It includes the main JavaScript file "MyMenu1.js" and a few accompanying files. Finally, you copy (upload) the folder to the root directory of your web site.


Adding Drop-Down Menu to Web Site


Placing the menu on the page

Now that you have the "MyMenu1" folder as a part of your web site, you can drop the menu into the pages. You embed the menu in a web page by modifying its HTML source. At first, you add the link to the "MyMenu1.js" file via the <script> tag [1]:

<script type="text/javascript" src="./MyMenu1/MyMenu1.js"></script>


[1] It is recommended to place it the <head> section.


A key part of this code is the "src" attribute. It specifies the path to the main JavaScript file "MyMenu1.js". If the path is wrong, you will not see your menu on the page. This path depends on the location of the page. As described earlier, we have placed the "MyMenu1" folder in the root directory of the web site. The "src" attribute can have the following values:

The page is located in the root directory (where the "MyMenu1" folder is):

src="./MyMenu1/MyMenu1.js"



The page is located in the subfolder. In other words, the "MyMenu1" folder is located in a directory one level up from the current directory where the page is:

src="../MyMenu1/MyMenu1.js"



The "MyMenu1" folder is located in a directory two levels up from the current directory where the page is:

src="../../MyMenu1/MyMenu1.js"



You can also use the full URL for a page located in any directory:

src="http://www.mysite.com/MyMenu1/MyMenu1.js"



The following picture shows the correct path to the "MyMenu1.js" file, depending on the page location.

Path to main JS file


Once the link to the "MyMenu1.js" file is added to your page, you can add the following code to show up your menu. This code can be placed anywhere between the <body> and </body> tags:

<div id="MyMenu1"></div>



That is all. Your final page code should look as follows:

<!DOCTYPE html>
<html>

    <head>
        <title>...</title>
        ...
        <script type="text/javascript" src="./MyMenu1/MyMenu1.js"></script>
        ...
    </head>

    <body>
        ...
        <div id="MyMenu1"></div>
        ...
    </body>

</html>



It is important to note, that the single "MyMenu1" folder is used to show the menu on multiple pages. If you need to update the menu on all of your pages, you should only replace the current "MyMenu1" folder with a new one. It is not required to edit code on the pages.


Conclusion

I hope this short post will help you to add a drop-down menu to your web site. Please do not hesitate to ask questions.


Links

Sample Code: MySite.zip
Menu Generator: http://www.dropdownmenugenerator.com
Question Form: http://www.dropdownmenugenerator.com/ContactUs.aspx






      Menu Generator  01/18/2017 (783)         Follow Us         Links
   
APNSoft.com
 © 2003-2017 APNSoft.
  All rights reserved.