How To Add Dropdown Menu To Homestead website

Dropdown Menu in Homestead website

Homestead SiteBuilder is a very popular, easy-to-use website building tool, which allows you to quickly create an entire web site for business or hobby. SiteBuilder includes hundreds of design templates to choose from. You can insert photos, videos, e-commerce capabilities and much more. Unfortunately, SiteBuilder has no such useful component for website navigation, as a dropdown menu.

In this post, I will describe how to add a professional dropdown menu to your Homestead website. Knowledge of HTML, CSS or JavaScript is not required.

As a starting point, I have created a simple website using Homestead SiteBuilder. The site is based on the classic gray colored theme and includes a few pages.

Step #1: Creating the Dropdown Menu

To create a menu, I always use Dropdown Menu Generator - online menu maker which does everything automatically, quickly, easily, and gives out the professional menu which does not require additional customization.

  • Setting the appearance of the menu

    Under the Template Tab, I choose the nice-looking #R020 template with rounded corners, adjust the colors and the font in accordance with the style of my Homestead website.

    Menu Template

  • Setting the structure

    Under the Structure Tab, I define menu elements: Links, Headers, and Separators. The Structure Editor is based on drag-and-drop functionality. It allows to easily create a menu structure displaying multiple levels of hierarchy. For each Link Element, I set the Text and the URL of the page which is the URL I copy from my Homestead site and paste it into the Link field in Menu Generator.

    To make the menu more user-friendly, you can use icons. Menu Generator includes general icons (Home, Help, E-mail, etc.), icons for social networking (Facebook, Twitter, etc.), multi-purpose icons (arrows, dots, etc.) and others.

    Menu Structure

  • Setting additional options, getting Embed Code or downloading

    Under the Additional Options Tab, I set the width to 100% and center alignment. The menu will be placed on the gray colored bar; so, for a seamless integration, I check the "Transparent menu" option. This option turns off the menu's background.

    Menu Generator offers menu hosting with Embed Code. It is a very useful feature because any modification made to the menu in Menu Generator will be immediately reflected in the menu on your web pages. If you use Embed Code, you do not need to download your menu and then upload it to your website on Homestead. So, the "Step #2: Uploading the Menu to Homestead website" section can be skipped.

    As I do not want to keep my menu on the remote hosting server, I save the menu to my local disk as "MyMenu1.zip" file by clicking on the Download button. The "MyMenu1" is a default name of the menu. Finally, I unzip it to have the "MyMenu1" folder. It includes the main JavaScript file "MyMenu1.js" as well as a few accompanying files. Next, I will upload the menu files to my Homestead website.

    Menu Options

Step #2: Uploading the Menu to Homestead website

To upload the menu files to my website, I use Homestead File Manager. To open File Manager, I click the arrow on the right side of the website name, then choose View File Manager.

In File Manager, I create the "MyMenu1" folder (the "New" button) and import the files from the "MyMenu1" directory on my local disk. Finally, I publish the files (via right-click menu).

Uploading the Menu

Step #3: Placing the Menu on the web pages

In the previous step, I have added the menu to my Homestead website. As the menu is now a part of the website, I can to show it up on the pages. All I need now is to add a small HTML code to the page by using the command: Insert -> HTML.

Placing the Menu

In the dialog box I insert the menu code below:

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

The menu code consists of the two parts:

  1. The <script> tag adds a reference to the main JavaScript file "MyMenu1.js".
    If the page is located in a subfolder, the src must be with two dots: "../MyMenu1/MyMenu1.js".
  2. The <div> tag includes the name of the menu ("MyMenu1") as an identifier (id) and required to show up the menu.

You can also use the Embed Code described in the section "Step #1: Creating the Dropdown Menu".

Now the page includes the HTML box which is my new dropdown menu. Next, I bring the HTML box to Front (via right-click menu), drag it to the right place on the page (below the page header), and set the width of the box equal to the width of the site.

Placing the Menu

That's All! Finally, I publish the website and see the dropdown menu under the header section.

Homestead website with dropdown menu

It is important to note that a single menu instance is used for multiple pages of the website. Since a menu is a single folder (the "MyMenu1" in this post), it is enough to replace (re-upload) the current folder with a new one to see an updated menu immediately on every page.

Conclusion

I hope this post will help you to add a dropdown menu to your Homestead website. Please do not hesitate to ask questions.

Links

Featured Posts
Share
Contact Us
We are always here to help answer your questions. So, if you have any concerns or requests, please feel free to contact us, and we’ll get back to you soon.

Contact Us



Online Logo Maker
Uploading ...