Back to Top
The nuts and bolts for
Creative web development

DMXzone Tabs

“Organize your content in tabs with amazing effects and styles”

You want to organize your content in the best possible way? Now, you can do that with DMXzone Tabs, the extension that gives you the opportunity to divide and style your content into as many sections as needed directly and visually in Dreamweaver! The DMXzone Tabs is for everyone that wants to add any content from simple text to images, videos and even whole pages, all of this rendered live in Dreamweaver design view, so you can switch from tab to tab and edit it right in place.

With the style picker you can choose between the 24 different predefined designs included in this Dreamweaver extension or style it through the CSS to match your website layout. 

Fully customizable, the extension offers amazing effects for a better user experience to stun them right away. The extension is also controllable by behaviors if you want to navigate to a specific tab or start an event within it, and even bind it with other DMXzone extensions.

Overview

Features Highlights:

  • 24 lightweight CSS Designs included - We have chosen to use CSS3 effects like rounded corners and shadows in our CSS designs to make them really pure CSS and very light.
  • Easy to choose style picker - We've included a style picker where you can see a preview of the chosen design
  • Organize your content into multiple tabs - Break your web content into multiple tabs that you can easily navigate between and save space
  • Display any content - You can add rich content into the tabs, such as text, images, videos and even whole pages
  • All tabs are live rendered in Dreamweaver and can be fully navigated in design view! So you can easily visual switch from tab to tab and edit it right in place! Note that this feature requires Dreamweaver CS3+
  • Fully controllable by behaviors - If you want to navigate to a specific tab or start an event within it - it can be easily done with the Control DMXzone Tabs behavior.

Features

DMXzone Tabs Designs

  • 24 lightweight CSS Designs included - We have chosen to use CSS3 effects like rounded corners and shadows in our CSS designs to make them really pure CSS and very light - so no extra images for many weird CSS hacks are loaded. Also you can edit them to fit your website perfectly


  • Easy to choose style picker - We've included a style picker where you can see a preview of the chosen design


  • Organize your content into multiple tabs - Break your web content into multiple tabs that you can easily navigate between and save space


  • Display any content - You can add rich content into the tabs, such as text, images, videos and even whole pages


  • Fully customizable styles - Our tabs are all CSS based so you can easily make your own adjustments in the CSS from within Dreamweaver's CSS editor

Revolutional Dreamweaver integration

  • All tabs are live rendered in Dreamweaver and can be fully navigated in design view! So you can easily visual switch from tab to tab and edit it right in place! Note that this feature requires Dreamweaver CS3+

  • Add, remove or rearrange tabs - You can add, remove and rearrange tabs from the Inline property inspector


  • Fully resizable - The height of the tabs expands depending on the content but the width can be set manually


  • Toggle sections onClick or on mouse over - You can set your tabs to be switched onClick or on hover in order to create a more intuitive navigation


  • Collapsible tabs - You can make the sections collapsible so that when clicked the selected tab will toggle its content closed/open


  • Cool effects - You can customize the animation effect that appears while switching between tabs by toggling its Height and Opacity and adjusting the Speed. These options allow you to add a sliding effect and hide the content during the transitions


  • Auto Rotate - If you need to switch your tabs automatically when the page is loaded, simply choose the Auto Rotate option. Select Continuous to prevent your users from navigating between the tabs manually


  • Inline property inspector - You can easily change all the visual options later on

  • Fully controllable by behaviors - If you want to navigate to a specific tab or start an event within it - it can be easily done with the Control DMXzone Tabs behavior


  • Search Engine Friendly - As the DMXzone Tabs is pure HTML and CSS code it can be nicely indexed by all search engines and web spiders.

Showcases


  • Summer Guest Estate Showcase

    For this showcase we used DMXzone Metro UI Theme Pack in order to style the DMXzone Calendar 2 and DMXzone Tabs.

  • Creative Studio Showcase

    For this showcase we used DMXzone Tabs to organize the page content and the 'blind' effect on open and close.

  • Online Cookbook Showcase

    For this online cookbook showcase, we divided the content into DMXzone Tabs to separate the different types of recipes. Also, the beautiful, fully responsive design for different devices is executed ...

  • Surfing Club Showcase

    For this showcase we used the DMXzone Bootstrap extension in order to create a responsive grid layout so that our page looks awesome on mobile devices, tablets and desktop browsers. Also we used the ...

  • Green Business Page Showcase

    For this showcase we used the DMXzone Bootstrap extension to create a fully responsive design layout suitable for mobile devices, tablets and desktop browsers. We also included the DMXzone Nivo ...

  • Watches Shop with Different Options Showcase

    In this showcase we used Universal CSS Navigation Menu for the website navigation, DMXzone Tabs for the additional information and the Sliding PayPal Shopping Cart for the purchase process. The ...

  • Metro Design Showcase

    For this showcase we used 4 awesome Dreamweaver extension in order to create a Metro design. It contains DMXzone Tabs with animated content (Advanced CSS Animator), which are customized with the ...

  • HTML5 3D Flipping Gallery Store Showcase

    For this showcase page we used HTML5 3D Flipping Gallery in order to create a flipping image for the selected product. The trigger is on click and the flip direction is set to right. On the back we ...

  • Watches Shop Showcase

    Here, you can see how we combined DMXzone Tabs and Universal CSS Navigation Menu in a website showcase. Both the tabs and the menu are customized through the CSS to match the website design and in ...

  • Wine Shop Sales Page for Facebook

    Building easy Fan Gates is one of the most efficient ways to increase your online presence across the social networking platforms. If you want to make your space within Facebook more attractive ...

  • Harley Website Showcase

    In this showcase we used HTML5 Slideshow as a header to present different pictures and DMXzone Tabs in order to separate the content into categories for better preview.

  • DMXzone Tabs Showcase

    In this showcase website you can see how easy it is to put all of your content on one page with the help of DMXzone Tabs, where you can divide it in categories, add images, tables and more.

Videos


Requirements

Type: Behavior
License: External link
Product: Dreamweaver CS3, Dreamweaver CS4, Dreamweaver CS5/CS5.5 and CS6, Dreamweaver CS5.5, Dreamweaver CC
Platform: Win XP/2000/2003/2008/7, Mac OS X, Mac OS X 10.4+
Browser: Opera 9.5, Chrome 9+, IE 8, Opera 10+, IE 9, Safari 5+, Firefox 3.6, Chrome 10+, Opera 11
Used Technologies: jQuery UI
Screen Shot: External link
Tags: tabs, jqueryUI, css, dreamweaver, extension

The DMXzone Tabs runs on Dreamweaver 8 but we do not support it officially.

History

Version 1.1.2

  • Full Dreamweaver CC and Extension Manager CC support
  • Included new Behavior Connector with restyled UI and better Mac OSX Support
  • Updated the automatic file copy and update component for better Dreamweaver CC support
  • Improved compatibility with the latest jQuery
  • Included latest jQuery 1.10.1
  • Improved Windows 8 compatibility

Version 1.1.1

  • Included updated jQuery UI to 1.10.1 for more speed, power and greater user experience
  • Included updated jQuery to 1.8.3 that includes the unbelievable 13 versions
  • Updated jQuery UI Themes
  • Improved support for new addition styling themes, like the DMXzone Metro UI Theme Pack
  • Improved style picker dialog to pick up automatically new available styles
  • Removed rotation options due to deprecation
  • Added new transition options
  • New height handling option supporting Fill, Content and Auto
  • Removed enable and disable events due to deprecation

Version 1.0.1

  • Improved Style chooser for DW CS6 on Mac OSX
  • Included the latest jQuery UI 1.8.23
  • Improved file compression for even smaller file sizes
  • Improved Dreamweaver integration
  • Improved installer for DW CS 5.5+ and Mac DW CS6 

George Petrov

George PetrovGeorge Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. His expertise in countless languages and technologies gives inspiration and teach valuable lessons on his website – DMXzone.com, which is visited daily by more than 30.000 people and is most popular for its over high-quality Dreamweaver extensions and templates.

See All Postings From George Petrov >>

Share this Article

Reviews

great extension - counterpart for accordeon

works great and as expected! Regrettably it lacks any support for dynamic content. Websites nowadays use php/mysql a lot. Creaton of static tabs is easy and very well designed, though.

DMXZone Tabs

I just purchased the DMXZone Tabs: This is a preliminary review because I just purchased and installed the tabs control and just had to tell about my initial experience with it.  I want to congratulate DMX Zone on this outstanding tab control.  First, I had no issues with installation (after I recalled my user id and password, that is, to complete the install). After installation I restarted Dreamweaver (I'm running CS3).  Before using the control I downloaded the PDF just to be sure I properly added the component to my test page.  At first, it didn't work because I didn't add it correctly.  So I removed all the code and started again. After following the very clear instructions in the PDF it worked perfectly.  Be certain to follow the instruction in the PDF, they are very clear and simple, you should have no issue with it.  After adding the tab control I played with it to add additional tabs, and then changed content in each tab.  Wow! is all I can say.  This is a dynamite control and for the price it is a tremendous bargain.  Thanks DMX Zone for this control and the great price!