Adding operable links in HTML5 within a drop down menu.

Question

Hello,

I am currently designing a ten page website composing of HTML5, JavaScript, and Css3. I have my index .html page and my services.html page. However, I have created a drop down menu of each category of the spa website. One can click services and there is a sub menu with facials, weightless, injectables, hair removal, and massage. What I am trying to figure out what code I need to embed so that when I click on facials it will take me to that page, and then I can design it from there. I'm cannot go any further in my progress until I figure how to add a functional link for each sub-topic and how to figure to design that single page. Any suggestions or help would be fantastic. I'm pretty stressed over this. I've tried to find videos but nothing that fits. Thank you.

Kind Regards,

Cassie A.

Answer 1

Hi Cassie,

I'm sorry you've been having a hard time with this project. It sounds really interesting and I'd love to see it when you finish it. As for the issue you are having, in order for you to link to another page through your drop down menu, you should add the line <a href="#">Link 1</a> to the facials button and insert the html page that has information on facials. For example, in your case, the line of code would be <a href="facials.html">Facials</a>. The href holds the link that the button will go to once the user clicks on it. The word "Facials" that is between the two "a" tags is what the user will see.

To design this new html page, just create a new html document called facials.html(or whatever you would like) and start designing. Once you are satisfied with the design, you can link the page to the drop down menu button using the method above. I hope this helps you out and let me know if some part of the explanation doesn't make sense.

Answer 2

Hi Cassie. You have not yet said exactly how you are implementing your drop down menu.

With that said, the simplest thing to do, if your are using the select tag would be to add the attribute:

onchange=location="this.value;"

after the name="xxx" attribute inside the tag.

Then the option tags' value="xxx" attributes get rewritten into value="xxx.html" attributes.

This is what I would call the quick and dirty method. It will get the job done, but there are more elegant ways out there.

Remember to add a back method so that your users can return to the starting point. The back button of the browser would work, but you can control where they return to if you supply the method.

Also, consider how you will reference each destination page file name, relative (a href="index.html") or absolute (a href="http://www.mywebsite.com/index.html").

Don't forget file paths as well, if you are using folders to keep the pages organized. These are also either relative (a href="../index.html" means the file index is found in the next folder up from the current one) or absolute (a href="http://www.mywebsite.com/index.html").

An organized website is easier to modify as business booms. Good luck!