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
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.
- Photo Credit Image by Jenny Treviño-Blanquet
How to Use Tabs in Internet Explorer
Keeping multiple tabs open in your Web browser is a simple fact of modern life, whether you're tweeting your way through a...
How to Create Horizontal Tabs
Creating a horizontal tab system on your website can make for a great design feature and is easy for your readers to...
How to Create Multiple Rows of Tabs
Placing tabs on your web pages gives your visitors an way to navigate through the site that is more interesting than a...
How to Open Up Multiple Tabs With Explorer
When you need multiple websites open at once, it is much easier to see what's open by using the multiple tabs feature...
How to Open Up a New Tab in HTML
Keeping visitors on your site long enough to take a good look around is important when creating an online destination. While posting...
How to Convert Multiple Excel Sheets to PDF
Microsoft Excel is a versatile program allowing graphing, calculation, table creation and statistical analysis. Users can create spreadsheets containing text, tables, graphs...