How to Create a Multi Tab Webpage


Multi tab web pages provide an attractive and dynamic interface that users can click through when navigating through a website. Tabbed navigation bars are typically created with a combination of programming languages; however, you can use free, ready-made templates from Dynamic Drive and save yourself time, or the need to have coding knowledge. Learn how to create your own multi tab menus for your web pages and provide an enhanced user experience for web visitors.

Things You'll Need

  • Tabbed menu scripts (available from Dynamic Drive)
  • HTML text editor, such as Dreamweaver
  • Acquire free tabbed menu scripts from the Dynamic Drive Internet source to get the HyperText Markup Language (HTML), Cascading Style Sheets (CSS) and JavaScript code necessary to create the menu. Click the "" link to download the source files to your computer.

  • Double click on the downloaded folder and open the "ddtabdemos.htm" file in an HTML text editor, such as Dreamweaver. This document contains all the tabbed menu examples so you can preview them and see which one you want to use on your website.

  • Add the chosen multi tab to your web page. Each tab option has the associated CSS and HTML code marked with the example number (for instance, Example 1), so you can delete the tab examples that you won't use. Alternatively, you may open an existing web page document and insert the appropriate codes.

  • Edit the navigation bar so that it contains your content and links. Do this by locating the "<li>" list tags in the HTML code and replace the existing URLs and placeholder text with your own. Continue by scrolling down to the "<div>" DIV code to edit the placeholder text that appears when a link is hovered over.

  • Customize the look of your menu by editing the CSS file. Use the "CSS Styles Window" in Dreamweaver to view the style rules, or open the appropriate CSS file provided in the downloaded zip file. View the style sheet and use the text editor's "Properties" window to add or edit styles, such as bar color, according to your preference.

  • Name and save the files. Use your browser's "Preview" function to test out the multi tab web page.

Tips & Warnings

  • Do not remove the credit notices in any of the files, so as not to infringe on the creator's copyright.

Related Searches

  • Photo Credit Image by Jenny Treviño-Blanquet
Promoted By Zergnet



You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!