Back to Top
The nuts and bolts for
Creative web development

Sliding Panels

“Present your content in stunning Panels!”

So you like the way iPad and iPhone work? Having great bouncing scrollable areas, minimalistic scrollbars, amazing sliding pages? Great gestures touch interfaces and stunning styles? Well you can have all that now on your regular browsers as well as touch devices with the new Sliding Panels extension from DMXzone!

Based on CSS and jQuery – fully cross browser, this extension offers support for native gestures on touch devices as well mouse gestures on regular browsers! Now you can scroll by swiping with your mouse on your browser or finger when using an iPad, iPhone or other touch device!

Divide your content in great looking pages that can be naturally slided left or right, with cool navigation and displayed in 15 styles! Every content page is fully visually editable in Dreamweaver so you can put any content in it! 

Features

Features in Detail

  • 15 stylish CSS Designs Included - Various styles to fit your web site perfectly
    • Lightweight CSS3 Designs - 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

  • Amazing Sideward Scrolling Effect - You can scroll by swiping with your mouse on your browser or finger touch and swipe when using an iPad, iPhone or other touch device.

  • Full Support for Gestures and Page Scrolling - You can turn on/off the bouncing scrollable areas and the gestures that allow you to scroll by swiping with your mouse on your browser or finger when using an iPad, iPhone or other touch device

  • Scrollbar appearance - Integrated fancy on demand scrollbar for each Sliding Panels design.


  • Customizable animation - Adjust the Panels appearance by speed, deceleration and interval.

  • Organize in Panels - Divide your content for a better preview
    • Multiple Panels - Divide your content in multiple panels and have a great tabs/menu like navigation between the sections

  • Side Navigation buttons - You can also choose if you want to have side navigation arrow buttons, where should they be positioned top, bottom and on both sides.

  • Auto Paginating - Quick access to all the pages in the Sliding Panels

  • Show any content – You can preview any kind of content in your Sliding Panels, such as text, images and videos, even a whole web page.

  • Pure CSS Panels - Doesn't require any plugins and works on all modern browsers

  • Search Engine Friendly - as the Sliding Panels is pure HTML and CSS code it can be nicely indexed by all search engines and web spiders

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


  • Fully customizable - Don't like to supply styles? Well it is all CSS based so you can easily make your own adjustments in the CSS from within Dreamweaver's CSS editor

  • Fully Controllable by behaviors - You want to navigate to specific position, start or stop the Panel - it can be easily done with the Control Sliding Panels behavior.

  • Need auto sliding – Well,  just do set the Auto Play - and then the user will navigate manually only

  • Full support for keyboard and mouse wheel navigation (optional)

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

 

Showcases


  • Travel Blog Showcase

    For this showcase we used Sliding Panels to present the content in awesome sliding pages. You can scroll by swiping with your mouse on your browser or finger when using an iPad, iPhone or other ...

  • Responsive Sliding Panels Bikes Showcase

    For this showcase we created a responsive bikes catalog with the Sliding Panels extension, which is greatly displayed on any mobile device as well as on a desktop browser. On mobile devices, when the ...

  • Project Gallery Showcase

    If you wish to display the showcase on your mobile device, simply scan the QRcode or use this shorten URL - http://goo.gl/7RbGZ

  • Web Design Studio Showcase

    For this showcase we used customized menu for the navigation (Universal CSS Navigation Menu) and Sliding Panels with custom buttons that navigate the panels through the Behavior connector.

  • Underwater Photos Showcase

    In this showcase you can see how we combined the Advanced CSS Animator which navigates the Sliding Panels and also gives the images' thumbnails some great effects on mouse over.

  • Sliding Cookbook Showcase

    For our demo we used Sliding Menu as navigation, where you can go through the pages. The whole book is 'wrapped' in Sliding Panels and the images are greatly presented in HTML5 Slideshow. *Preview ...

  • Interior Design Showcase

    The showcase has been created with the Sliding Panels extension especially for iPad but it also looks amazing on any browser!

  • Hotel Template

    The design is created with some of the finest DMXzone extension: HTML5 Slideshow, Universal CSS Navigation Menu, Sliding Panels, DMXzone Calendar and HTML5 Image Enhancer. You can download this ...

  • HTML5 MP3 Player & Sliding Panels Showcase

    The showcase has been created by combining two extensions - Sliding Panels and HTML5 MP3 Player. The MP3 Player is implemented as a Title in the Sliding Panels. To complete the experience Sliding ...

  • HTML5 Suite

    In this showcase we've used seven out of nine extensions packed in the HTML5 Suite to create a Website. We've also added tips, so you can explore each detail how it's been made and which extensions ...

  • Sliding Site Showcase

    In this showcase we've combined all the extensions included in the bundle. The site is designed in Sliding Panels with a Universal CSS Navigation Menu. The products open in a stylish Lightbox window ...

  • 2010 FiFa World Cup South Africa Showcase

    The showcase will show you all teams presented in CSS Image Gallery. Use your mouse to slide the panels from team to team.

  • Patterns Showcase

    This is a showcase of how you can combine Sliding Panels with Animated Thumbnail Gallery. Use your mouse to navigate through the Panels.

  • Recipies Showcase

    Use your mouse to navigate through the panels and experience the full power of Sliding Panels!

  • Features in Detail

    In this showcase, we've created a page full of any content, where you have the opportunity to explore the 15 different CSS Styles we've packed in the Sliding Panels, as well as to set navigation ...

  • Features in Detail

    The showcase presents a combination of Sliding Panels extension and Universal CSS Transforms: Flip. Use your mouse to navigate through the panels and open the images with the amazing Flip Effect!

Videos

Basic Usage

Controlling the Sliding Panels Navigation

With this movie we will show you how to control the Sliding Panels navigation with Dreamweaver Behaviors..

Creating Simple Sliding Panels

With this movie we will show you the basic features and how to create simple Sliding Panels.

Creating Dynamic Sliding Panels

With this movie we will show you how to create Sliding Panels that retrieve their content from a database using standard Dreamweaver Recordset and Repeat Regions.

Bundle Usage

Inserting a CSS Image Gallery within Sliding Panels

With this movie we will show you how to insert CSS Image Gallery within the Sliding Panels.


HTML5 Slideshow Video

Navigate the Sliding Panels with HTML5 Slideshow

With this movie Brian Wood will show you how to navigate your Sliding Panels with HTML5 Slideshow and display info.

Requirements

Type: Behavior
License: External link
Product: Dreamweaver 8, Dreamweaver CS3, Dreamweaver CS4, Dreamweaver CS5/CS5.5 and CS6, Dreamweaver CC
Platform: Win XP/2000/2003/2008/7, Mac OS X
Browser: IE 6, Opera 7, Opera 8, Opera 9, Safari 2.0, IE 7, Opera 9.5, Safari 3, Chrome 9+, IE 8, Safari 4+, Opera 10+, iPad, Firefox 4+


History

Version 1.0.10

  • Included the latest jQuery 1.11.1
  • Improved for Dreamweaver CC 2014
  • Improved for DMXzone Extension Manager

Version 1.0.9

  • 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.0.8

  • Now the iPhone and iPad designs are fully responsive! When the navigation bar does not fit, it can be scrolled with gestures! Also on arrow navigation the current selection is updated and the navigation bar automatically scrolls if needed.
  • Improved Form handling in Sliding Panels
  • Improved Dreamweaver CS6 compatibility
  • Improved installer for Dreamweaver CS 6.1 (Adobe Creative Cloud) compatibility

Version 1.0.7

  • Improved integration with dynamic data
  • Improved DW integration
  • Included the latest mouse wheel plug-in
  • Latest jQuery 1.7.2 included
  • Improved installer for DW CS 5.5+

Version 1.0.6

  • Improved compatibility with newest jQuery 1.6+ versions
  • Improved mouse wheel handling for the newest jQuery
  • Included latest jQuery 1.6.3
  • Optimized source and files for smaller size
  • Improved automatic shared file copy, synchronization and upload from Dreamweaver
  • Improved working in Dreamweaver templates

Version 1.0.5

  • Improved compatibility with newest jQuery versions
  • Smaller JavaScript files by better compression
  • Improved jQuery version recognition and include
  • Improved related files include method
  • Compatibility now with site root relative links Dreamweaver option for making all includes site root relative

Version 1.0.4

  • Included new jQuery 1.4.4
  • Improved depended file includes
  • Improved includes and cleanup of styles
  • Fixed scrollTo for anchors

Version 1.0.3

  • Allow dragging on images when sliding on regular browsers, even if images have links
  • Fixed click events within the panels
  • Improved compatibility with Animated Thumbnail gallery
  • Smart linking to case sensitive styles folder

Version 1.0.2

  • Improved working in Dreamweaver templates
  • Improved links working inside the panels when used on iPhone and iPad

Version 1.0.1

  • Focus improved on form fields within the panels
  • Behavior icon changes now when behaviors are selected

Update Procedure:

Just open a page using the Sliding Panels. You will see a progress bar indicating new files are being copied. After that a dialog will popup with the list of the new files. Depending on if you have remote site defined and you have site synchronization enabled, the files will be automatically synchronized or you will be presented an option to upload all files.

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 most popular for its over high-quality Dreamweaver extensions and templates.

See All Postings From George Petrov >>

Share this Article

Reviews

excellent tool and easy to deploy

Within minutes we had the sliding panels working within our website template. The Sliding Panels Dreamweaver interface is intuitive and offers great flexibility. For beginners its plugin and upload, for advanced users, complete access to CSS for customization. Very happy with the tool and DMXZONE!