Loading, please wait...

ARTDESIGN NAVIGATION PANEL

SETTINGS

Attributes

data-plugin-ad-navigation-panel="ad-navigation-panel"

This attribute is required in order to applied the plugin on the desired element
<table class="Panel">
    <tr>
        <td data-plugin-ad-navigation-panel="ad-navigation-panel">
            <div class="PanelButton PanelButtonLeft"></div>
        </td>
        <td class="PanelContent">
            <div>
                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>

data-ad-navigation-panel-options="Right, Blue"

This attribute overwrites the settings of the plugin
<table class="Panel">
    <tr>
        <td class="PanelContent">
            <div>
                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, Blue">
            <div class="PanelButton PanelButtonLeft"></div>
        </td>
    </tr>
</table>

Public Methods

Destroy

<script type="text/javascript">
    var NavigationPanel = $(".ArtDesign").ArtDesignNavigationPanel();
    NavigationPanel.Destroy();
</script>

Default Options

<script type="text/javascript">
    Global: { // Global settings of the element
        ClassPrefix: "NP_", // Put ClassPrefix on the style of the element in order to prevent a conflict with other styles from external CSS file; Must be string; By default: "NP_"
        BackgroundPanel: "#E8EFF5",
        BorderStyle: "solid", // Set the BorderStyle; Must be String; By default: "solid"
        BorderWidth: "0 1px 0 0", // Set the BorderWidth; Must be String; By default: "0 1px 0 0"
        BorderColor: "#A1BDD6", // Click BorderColor without gradient; By default: "#A1BDD6"
        ZIndexPanel: 9999, ////
        Position: "Left", // Set position of the element; Must be string; By default: "Left"
        StartMode: "Open", ////
        WidthOpen: 250, ////
        WidthClose: 40, ////
        WidthUnit: "px", // Set the WidthUnit; Must be string (px, %, auto); By default: "px"
        Height: 100, // Set the Height; Must be integer; By default: 100
        HeightUnit: "%", // Set the HeightUnit; Must be string (px, %, auto); By default: "%"
        AnimationSpeed: 0.5, // Set the AnimationSpeed; Must be integer or decimal; By default: 0.5
        DefaultSlideMode: "Relative", ////
        SwitchSlideMode: true, ////
        SwitchSlideModeWidth: 900 ////
    },
    BrowserSupport: { // Settings for the browser support
        Chrome: 20, // Indicates the require minimum version of the Chrome browser; Must be integer; By default: 20
        Mozilla: 20, // Indicates the require minimum version of the Mozilla browser; Must be integer; By default: 20
        Opera: 20, // Indicates the require minimum version of the Opera browser; Must be integer; By default: 20
        Safari: 5, // Indicates the require minimum version of the Safari browser; Must be integer; By default: 5
        MSIE: 9, // Indicates the require minimum version of the MSIE browser; Must be integer; By default: 9
        MSEdge: 12 // Indicates the require minimum version of the MSEdge browser; Must be integer; By default: 12
    },
    Button: { // Settings for the Button
        AnimationSpeed: 0.25, // Set the AnimationSpeed; Must be integer or decimal; By default: 0.25
        Position: ".PanelButton", // Set position of the element; Must be string; By default: ".PanelButton"
        Icon: "icon-menu-1", // Set the Icon from the ArtDesignIcons PlugIn; Must be string; By default: "icon-menu-1"
        FontSize: 20, // Set the size of the font; Must be integer; By default: 20
        Color: { // Settings for normal and hover color
            Normal: "#A1BDD6",
            Hover: "#A1BDD6"
        }
    }
</script>