Loading, please wait...

ARTDESIGN NAVIGATION PANEL

Description

ArtDesign Navigation Panel is JavaScript PlugIn which turns td element into navigation panel
Open and Close
Relative and absolute
Full support of all advanced Web browsers
5 predefined styles
Set the style with attribute
Set multiple styles to one element, each of them overwrites the previous
Opportunity to define an unlimited number of own styles
Integration with ArtDesign Icons
Hover / Click Animations
Listening for Click Events
Public Methods: Destroy

Demo

This is Content. Resize and Show / Hide Navigation Panel. This is Content. Resize and Show / Hide Navigation Panel. This is Content. Resize and Show / Hide Navigation Panel. This is Content. Resize and Show / Hide Navigation Panel. This is Content. Resize and Show / Hide Navigation Panel.


This is Content. Resize and Show / Hide Navigation Panel. This is Content. Resize and Show / Hide Navigation Panel. This is Content. Resize and Show / Hide Navigation Panel. This is Content. Resize and Show / Hide Navigation Panel. This is Content. Resize and Show / Hide Navigation Panel.

HTML

<div class="ArtDesign">
    <table class="Panel PanelBorder1">
        <tr>
            <td data-plugin-ad-navigation-panel="ad-navigation-panel">
                <div class="PanelButton PanelButtonLeft"></div>
            </td>
            <td class="PanelContent">
                <div class="PanelBorder2">
                    This is Content. Resize and Show / Hide Navigation Panel. This is Content. Resize and Show / Hide Navigation Panel. This is Content. Resize and Show / Hide Navigation Panel. This is Content. Resize and Show / Hide Navigation Panel. This is Content. Resize and Show / Hide Navigation Panel.
                </div>
            </td>
        </tr>
    </table>
    <br><br>
    <table class="Panel PanelBorder1">
        <tr>
            <td class="PanelContent">
                <div class="PanelBorder2">
                    This is Content. Resize and Show / Hide Navigation Panel. This is Content. Resize and Show / Hide Navigation Panel. This is Content. Resize and Show / Hide Navigation Panel. This is Content. Resize and Show / Hide Navigation Panel. This is Content. Resize and Show / Hide Navigation Panel.
                </div>
            </td>
            <td data-plugin-ad-navigation-panel="ad-navigation-panel" data-ad-navigation-panel-options="Right">
                <div class="PanelButton PanelButtonRight"></div>
            </td>
        </tr>
    </table>
</div>

JavaScript

<script type="text/javascript">
    $(document).ready(function() {
        $(".ArtDesign").ArtDesignNavigationPanel();
    });
</script>