Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Tab Panel Magic 2 Responsive Menu

Powered by the Automagically Responsive Widget from your Friends at PVII

See Finished Page | Tutorials Home | Tab Panel Magic Home | Buy Now ($95) | Upgrade from TPM1 ($60)

You've got a problem. Your client, Niles, wants a horizontal menu with 10 links, which fit very nicely in a single row on his 25-inch widescreen monitor. Niles also requires the menu to work on his sister Angelica's iPhone.

The Solution? Use Tab Panel Magic 2—the automagically responsive widget from PVII. TPM2 allows you to create a tabbed menu bar without panels, making it a perfect solution for a single-level menu bar. Scrolling tabs ensure that your menu will be accessible and usable in all desktop and mobile devices.

Tab Panel Magic (TPM2) is the only tabbed panel widget for Dreamweaver that works flawlessly in mobile devices without modifications. One of the more powerful options in TPM2 is Scrolling Tabs, which allow you to have an unlimited number of tabs displayed on a single row. If there is not enough horizontal room to display them all, the excess tabs are hidden and you can access them by using convenient arrow controls to scroll them into or out of view. On a phone, you can have as many tabs as you need and they will never take up more than a single row of vertical space.

Before you begin the tutorial

Update to the latest version of TPM2

This tutorial requires Tab Panel Magic version 2.3.3 (or higher). If you need to update, please read this page first: Tab Panel Magic 2 Updates

Download the work files

Download the work folder pvii-miracle-tab-menu.zip and save it inside a defined Dreamweaver site. Unzip the folder. Inside you will find the following 2 files and an images folder:

  • images
  • workpage.htm
  • tpm-responsive-menu.css

Open the workpage.htm file.

Create your Tab Panel

Below the first heading you will find the placeholder text:

Insert Tab Panel Here

Place your cursor at the end of the line and switch to Code View

Select the text and delete it, leaving your cursor on the now empty line.

Open the TPM2 interface.

Select Trigger Text in the Panels box and change its label to Home in the Trigger Text box.

Place a check in the box next to Link Only - No Associated Content Panel

Use the Add button to create 6 or 7 additional panel labels. You can leave them as the default Trigger Text for now or you may customize them if you wish.

Make sure you place a check in the box next to Link Only - No Associated Content Panel for each panel label you add.

The Link Path can be left blank for now. The system will automatically enter a null javascript:; link as a placeholder. You can return to the interface at any time to set your links to real pages.

In the Options section, set Scrolling to Normal Scrolling

Set Style Theme to 12-White Raspberry

Click OK to build your widget

Switch back to Design View

Link the page CSS

We've provided a CSS file in the download that you will now link to your page.

Choose Format > CSS Styles > Attach Style Sheet...

In the File/URL box enter tpm2-responsive-tutorial.css

Leave Add as set to Link and Media can be left blank.

Click OK to complete the link.

You will see the results of linking the CSS file immediately.

Dreamweaver Design View will show the tabs on multiple lines. Preview in a browser to see how the tabs display and behave.

CSS analysis

The tpm-responsive-menu.css file contains several CSS rules that provide a few small tweaks to the default White Raspberry TPM2 style theme. The tweaks are described by comments in the actual CSS file.

The CSS file also contains 3 CSS media queries that tweak width, padding, and font size for mobile devices. This is done for stylistic purposes only. The Tab Panel will work perfectly in mobile devices without the media queries.

/*1 Column for Narrow Browser Windows and Smartphones in both orientations*/

@media only screen and (min-width: 0px) and (max-width: 979px) {
body {
min-width: 0px;
margin: 6px;
}
#layout, .masthead, .footer {
width: auto;
}
#content img {
max-width: 100%;
}
}

/*Exception rules for Smartphones*/

@media only screen and (max-device-width: 480px) {
body {font-size: .75em; margin: 0px;}
#layout {padding: 0px; border-radius: 0px;}
#content {padding: 1em;}
h2 {margin: 0px;}
.masthead {padding: 1em; font-size: .5em; margin: 0px;}
#p7TPM_1.p7TPM12 {padding: 10px 0px 0px 0px;}
}

/*Exception rules for Smartphones in Landscape orientation only*/

@media only screen and (max-device-width: 480px) and (orientation : landscape) {
body {font-size: .5em !important;}
.p7TPM_arrows_12 a, .p7TPM_tabs_12 a, .p7TPM_tabs_12 a:visited {font-size: .85em;}
}

/*Landscape Tablet Exceptions to adjust font size*/

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
body {
font-size: .85em;
}
}

Viewport Meta Tag

If this shrunken page scenario and its tiny text are not acceptable, there is a meta tag you can use that will tell the mobile browser to display the page inside its viewport without shrinking the text. We've included this meta tag in the finished-page file you downloaded:

<meta name="viewport" content="width=device-width" />

The syntax of the included tag is xhtml, matching the page DOCTYPE. If you convert your page to an HTML DOCTYPE using Dreamweaver's File > Convert feature, the syntax will be automatically changed for you.