Loading, please wait...

ARTDESIGN DROP DOWN

SETTINGS

Attributes

data-plugin-ad-drop-down="ad-drop-down"

This attribute is required in order to applied the plugin on the desired element
<div data-plugin-ad-drop-down="ad-drop-down" data-ad-drop-down-selector="div">
    <div data-ad-drop-down-current="current">Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
</div>

data-ad-drop-down-selector="div"

data-ad-drop-down-selector="link"

data-ad-drop-down-selector="select"

data-ad-drop-down-selector="radio"

data-ad-drop-down-selector="checkbox"

This attribute specifies the type of the elements
<div data-plugin-ad-drop-down="ad-drop-down" data-ad-drop-down-selector="div">
    <div data-ad-drop-down-current="current">This is Div 1</div>
    <div>This is Div 2</div>
    <div>This is Div 3</div>
</div>
<div data-plugin-ad-drop-down="ad-drop-down" data-ad-drop-down-selector="link">
    <a href="#" data-ad-drop-down-current="current">This is Link 1</a>
    <a href="#">This is Link 2</a>
    <a href="#">This is Link 3</a>
</div>
<select data-plugin-ad-drop-down="ad-drop-down" data-ad-drop-down-selector="select">
    <option value="Select1" selected>This is Select 1</option>
    <option value="Select2">This is Select 2</option>
    <option value="Select3">This is Select 3</option>
</select>
<div data-plugin-ad-drop-down="ad-drop-down" data-ad-drop-down-selector="radio">
    <input type="radio" name="Radio" value="Radio 1" data-ad-drop-down-label="This is Radio 1"/>
    <input type="radio" name="Radio" value="Radio 2" data-ad-drop-down-label="This is Radio 2" checked="checked"/>
    <input type="radio" name="Radio" value="Radio 3" data-ad-drop-down-label="This is Radio 3"/>
</div>
<div data-plugin-ad-drop-down="ad-drop-down" data-ad-drop-down-selector="checkbox">
    <input type="checkbox" name="CheckBox" value="CheckBox 1" data-ad-drop-down-label="This is CheckBox 1" checked="checked"/>
    <input type="checkbox" name="CheckBox" value="CheckBox 2" data-ad-drop-down-label="This is CheckBox 2"/>
    <input type="checkbox" name="CheckBox" value="CheckBox 3" data-ad-drop-down-label="This is CheckBox 3"/>
</div>

data-ad-drop-down-options="InnerShadow, Blue"

This attribute overwrites the settings of the plugin only for the specific element
<div data-plugin-ad-drop-down="ad-drop-down" data-ad-drop-down-selector="div" data-ad-drop-down-options="InnerShadow, Blue">
    <div data-ad-drop-down-current="current">Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
</div>

data-ad-drop-down-icon="icon-info"

This attribute adds an icon to the drop down
<div data-plugin-ad-drop-down="ad-drop-down" data-ad-drop-down-selector="div">
    <div data-ad-drop-down-current="current" data-ad-drop-down-icon="icon-info">Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
</div>

data-ad-drop-down-current="current"

This attribute makes the element active - for all types (Div, Link, Select, Radio, CheckBox)
<div data-plugin-ad-drop-down="ad-drop-down" data-ad-drop-down-selector="div">
    <div data-ad-drop-down-current="current">Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
</div>

disabled="disabled"

This attribute enables Disable mode
<div data-plugin-ad-drop-down="ad-drop-down" data-ad-drop-down-selector="div" disabled="disabled">
    <div data-ad-drop-down-current="current">Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
</div>
<div data-plugin-ad-drop-down="ad-drop-down" data-ad-drop-down-selector="div">
    <div data-ad-drop-down-current="current">Div 1</div>
    <div disabled="disabled">Div 2</div>
    <div>Div 3</div>
</div>

Public Methods

Destroy

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

Default Options

<script type="text/javascript">
    General: { // General settings of the element
        ClassPrefix: "DD_" // 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: "DD_"
    },
    Global: { // Global settings of the element
        MaxWidth: "800px", // Set the MaxWidth of the element; Must be string (px, %, auto); By default: "800px"
        Width: "100%", // Set the Width; Must be string (px, %, auto); By default: "100%"
        Height: "33px", // Set the Height; Must be string (px, %, auto); By default: "33px"
        Margin: "0 0 10px 0", // Set the Margin (top, right, bottom, left); Must be String; By default: "0 0 10px 0"
        MaxHeightContent: 303, // Set the MaxHeight of the content of the element; Must be string (px, %, auto); By default: 303
        Float: "", // Positions element to the left or right; Must be string (left, right); By default: ""
        CursorDisable: "not-allowed", // Set Cursor style on CSS while it is on the disabled mode; Must be string; By default: "not-allowed"
        OpacityDisable: 0.7, // Set the opacity of the element while it is on the disabled mode; Must be decimal; By default: 0.7
        Cursor: "pointer", // Set Cursor style on CSS; Must be string; By default: "pointer"
        ScrollBarTheme: "DefaultDropDown", // When the content of the DropDown menu is bigger it activates ScrollBar PlugIn; Must be string; By default: "DefaultDropDown"
        AnimationSpeed: 0.5, // Set the AnimationSpeed; Must be decimal; By default: 0.5
        AnimationContentSpeed: 500, // Set the AnimationSpeed of the content; Must be integer; By default: 500
        ZIndex: 999, // It specifies the stack order of an elements; Must be integer or string (auto, initial, inherit); By default: 999
        MainWrap: true // If it is true it wrap all elements into div; By Default: true
    },
    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
    },
    Preview: { // Setting for the preview of the dropdown menu
        Float: "Left", // Positions element to the left or right; Must be string (left, right); By default: "left"
        PaddingLeft: "20px", // Set the left padding of the element; Must be string (px, %, auto); By default: "20px"
        PaddingRight: "20px", // Set the right padding of the element; Must be string (px, %, auto); By default: "20px"
        SpaceElements: "20px", // Set the space between the elements; Must be string (px, %, auto); By default: "20px"
        MainBackground: { // Setting for the MainBackground colors animation
            Animation: true, // If it is true, it sets the following settings for MainBackground colors animation; normal, hover and click; By default: true
            Normal: {
                BackgroundColor: "#FCFCFC" // Normal background color without gradient; By default: "#FCFCFC"
            },
            Hover: {
                BackgroundColor: "#6488AA" // Hover background color without gradient; By default: "#6488AA"
            },
            Click: {
                BackgroundColor: "#52708C" // Click background color without gradient; By default: "#52708C"
            }
        },
        Text: { // Settings of the text of the element
            Animation: true, // If it is true, it sets the following settings for Text animation; By default: true
            FontFamily: "sans-serif", // Set the FontFamily property which specifies the font for an element; Must be serif, sans-serif or monospace; By default: "sans-serif"
            FontSize: "14px", // Set the size of the font; Must be string; By default: "14px"
            FontWeight: "normal", // Set the weight of the font; Must be string (normal, bold, bolder, lighter, number, initial, inherit); By default: "normal"
            FontStyle: "normal", // Set the style of the font; Must be string (normal, italic, oblique, initial, inherit); By default: "normal"
            LineHeight: "2.4em", // The line-height property specifies the line height of the element, negative values are not allowed; Must be integer or decimal; By default: "2.4em"
            Normal: {
                Color: "#6488AA" // Normal color; By default: "#6488AA"
            },
            Hover: {
                Color: "#FCFCFC" // Hover color without gradient; By default: "#FCFCFC"
            },
            Click: {
                Color: "#FCFCFC" // Click color; By default: "#FCFCFC"
            },
            TextNotSelect: "-----" // Set the default preview when the content is not selected; Must be string; By default: "-----"
        },
        Icon: { // Setting for the Icon
            Animation: true, // If it is true, it sets the following settings for Icon animation; By default: true
            Float: "Left", // Positions element to the left or right; Must be string (left, right); By default: "left"
            PaddingHorizontal: "5px", // Set the horizontal padding of the element; Must be string (px, %, auto); By default: "5px"
            FontSize: "20px", // Set the size of the font; Must be string; By default: "20px"
            LineHeight: "1.8em", // The line-height property specifies the line height of the element, negative values are not allowed; Must be integer or decimal; By default: "1.8em"
            Normal: {
                Color: "#6488AA" // Normal color; By default: "#6488AA"
            },
            Hover: {
                Color: "#FCFCFC" // Hover color without gradient; By default: "#FCFCFC"
            },
            Click: {
                Color: "#FCFCFC" // Click color; By default: "#FCFCFC"
            }
        },
        OpenCloseButton: { // Settings for OpenCloseButton
            Animation: true, // If it is true, it sets the following settings for OpenCloseButton; By default: true
            Icon: "icon-menu-1", // Set the Icon of the element; By default: "icon-menu-1"
            FontSize: "20px", // Set the size of the font; Must be string; By default: "20px"
            PaddingHorizontal: "20px", // Set the horizontal padding of the element; Must be string (px, %, auto); By default: "20px"
            PaddingVertical: "-1px", // Set the vertical padding of the element; Must be string (px, %, auto); By default: "-1px"
            Normal: {
                Color: "#6488AA" // Normal color; By default: "#6488AA"
            },
            Hover: {
                Color: "#FCFCFC" // Hover color without gradient; By default: "#FCFCFC"
            },
            Click: {
                Color: "#FCFCFC" // Click color; By default: "#FCFCFC"
            }
        },
        Background: { //Settings for the background animation of the element
            Animation: false, // If it is true, it sets the following settings for Background animation; By default: false
            Normal: { // background setting for Normal mode(for different browsers)
                BackgroundColor: "transparent",
                MozLinearGradient: "-moz-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
                WebkitGradient: "-webkit-gradient(left top, left bottom, color-stop(0%, rgba(transparent)), color-stop(100%, rgba(transparent)))",
                WebkitLinearGradient: "-webkit-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
                OLinearGradient: "-o-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
                MSLinearGradient: "-ms-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
                LinearGradient: "linear-gradient(to bottom, rgba(transparent) 0%, rgba(transparent) 100%)",
                FilterGradient: "progid:DXImageTransform.Microsoft.gradient(startColorstr='transparent', endColorstr='transparent', GradientType=0)"
            },
            Hover: { // background setting for Hover mode(for different browsers)
                BackgroundColor: "transparent",
                MozLinearGradient: "-moz-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
                WebkitGradient: "-webkit-gradient(left top, left bottom, color-stop(0%, rgba(transparent)), color-stop(100%, rgba(transparent)))",
                WebkitLinearGradient: "-webkit-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
                OLinearGradient: "-o-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
                MSLinearGradient: "-ms-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
                LinearGradient: "linear-gradient(to bottom, rgba(transparent) 0%, rgba(transparent) 100%)",
                FilterGradient: "progid:DXImageTransform.Microsoft.gradient(startColorstr='transparent', endColorstr='transparent', GradientType=0)"
            },
            Click: { // background setting for Click mode(for different browsers)
                BackgroundColor: "transparent",
                MozLinearGradient: "-moz-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
                WebkitGradient: "-webkit-gradient(left top, left bottom, color-stop(0%, rgba(transparent)), color-stop(100%, rgba(transparent)))",
                WebkitLinearGradient: "-webkit-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
                OLinearGradient: "-o-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
                MSLinearGradient: "-ms-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
                LinearGradient: "linear-gradient(to bottom, rgba(transparent) 0%, rgba(transparent) 100%)",
                FilterGradient: "progid:DXImageTransform.Microsoft.gradient(startColorstr='transparent', endColorstr='transparent', GradientType=0)"
            }
        },
        Shadow: { // Settings for the Shadow of the element
            Outer: { // Setting for the outer shadow of the element
                Animation: false, // If it is true it sets the following settings for normal, hover and click; By default: false
                Normal: {
                    Shadow: "0px 0px 0px 0px rgba(0, 0, 0, 0)"
                },
                Hover: {
                    Shadow: "0px 0px 0px 0px rgba(0, 0, 0, 0)"
                },
                Click: {
                    Shadow: "0px 0px 0px 0px rgba(0, 0, 0, 0)"
                }
            },
            Inner: { // Setting for the inner shadow of the element
                Animation: false, // If it is true it sets the following settings for normal, hover and click; By default: false
                Normal: {
                    Shadow: "inset 0px 0px 0px 0px rgba(0, 0, 0, 0)"
                },
                Hover: {
                    Shadow: "inset 0px 0px 0px 0px rgba(0, 0, 0, 0)"
                },
                Click: {
                    Shadow: "inset 0px 0px 0px 0px rgba(0, 0, 0, 0)"
                }
            }
        },
        Border: { // Settings for the animation of the Border
            Animation: false, // If it is true it set the following settings for normal, hover and click; By Default: false
            BorderStyle: "solid", // Set the BorderStyle; Must be String; By default: "solid"
            Normal: { // Settings for Normal BorderStyle animation
                BorderWidth: "1px", // Set the BorderWidth; Must be String; By default: "1px"
                BorderRadius: "0px", // Set the BorderRadius; Must be String; By default: "0px"
                BorderRadiusInner: "0px", // Set the BorderRadiusInner; Must be String; By default: "0px"
                BorderColor: "#6488AA" // Set the BorderColor; Must be String; By default: "#6488AA"
            },
            Hover: { // Settings for Hover BorderStyle animation
                BorderWidth: "1px", // Set the BorderWidth; Must be String; By default: "1px"
                BorderRadius: "0px", // Set the BorderRadius; Must be String; By default: "0px"
                BorderRadiusInner: "0px", // Set the BorderRadiusInner; Must be String; By default: "0px"
                BorderColor: "#6488AA" // Set the BorderColor; Must be String; By default: "#6488AA"
            },
            Click: { // Settings for Click BorderStyle animation
                BorderWidth: "1px", // Set the BorderWidth; Must be String; By default: "1px"
                BorderRadius: "0px", // Set the BorderRadius; Must be String; By default: "0px"
                BorderRadiusInner: "0px", // Set the BorderRadiusInner; Must be String; By default: "0px"
                BorderColor: "#6488AA" // Set the BorderColor; Must be String; By default: "#6488AA"
            }
        }
    },
    Content: { //Setting for the Content of the drowpdown menu
        Background: "#FCFCFC", // Set the Background color; Must be String; By default: "#FCFCFC"
        Position: "Bottom", // Set the position of the element; Must be string; By default: "Bottom"
        BorderStyle: "solid", // Set the BorderStyle; Must be String; By default: "solid"
        BorderWidth: "1px", // Set the BorderWidth; Must be String; By default: "1px"
        BorderRadius: "0 0 6px 6px", // Set the BorderRadius (top, right, bottom, left); Must be String; By default: "0 0 6px 6px"
        BorderColor: "#6488AA", // Set the BorderColor; Must be String; By default: "#6488AA"
        Element: {
            Float: "Left", // Positions element to the left or right; Must be string (left, right); By default: "left"
            Height: 33, // Set the Height; Must be string (px, %, auto); By default: 33
            Separator: { // Settings for the separator
                Height: 1, // Set the Height; Must be string (px, %, auto); By default: 1
                Color: "#6488AA", // Set the color; Must the String; By default: "#6488AA"
                Style: "solid" // Set the Style; Must be String; By default: "solid"
            },
            Padding: { // Settings for the Padding
                Left: "20px", // Set the left padding of the element; Must be string (px, %, auto); By default: "20px"
                Right: "20px" // Set the right padding of the element; Must be string (px, %, auto); By default: "20px"
            },
            Background: { // Setting for the MainBackground colors animation
                Animation: true, // If it is true, it sets the following settings for MainBackground colors animation; normal, hover and click; By default: true
                Normal: {
                    BackgroundColor: "#FCFCFC" // Normal background color without gradient; By default: "#FCFCFC"
                },
                Hover: {
                    BackgroundColor: "#6488AA" // Hover background color without gradient; By default: "#6488AA"
                },
                Click: {
                    BackgroundColor: "#52708C" // Click background color without gradient; By default: "#52708C"
                }
            },
            Text: { // Settings of the text of the element
                Animation: true, // If it is true, it sets the following settings for Text animation; By default: true
                FontFamily: "sans-serif", // Set the FontFamily property which specifies the font for an element; Must be serif, sans-serif or monospace; By default: "sans-serif"
                FontSize: "14px", // Set the size of the font; Must be string; By default: "14px"
                FontWeight: "normal", // Set the weight of the font; Must be string (normal, bold, bolder, lighter, number, initial, inherit); By default: "normal"
                FontStyle: "normal", // Set the style of the font; Must be string (normal, italic, oblique, initial, inherit); By default: "normal"
                LineHeight: "2.3em", // The line-height property specifies the line height of the element, negative values are not allowed; Must be integer or decimal; By default: "2.3em"
                Normal: {
                    Color: "#6488AA" // Normal color; By default: "#6488AA"
                },
                Hover: {
                    Color: "#FCFCFC" // Hover color without gradient; By default: "#FCFCFC"
                },
                Click: {
                    Color: "#FCFCFC" // Click color; By default: "#FCFCFC"
                }
            },
            Icon: { // Setting for the Icon
                Animation: true, // If it is true, it sets the following settings for Icon animation; By default: true
                Position: "Left", // Set the position of the element; Must be string (Left or Right); By default: "Left"(Left or Right)
                FontSize: "20px", // Set the size of the font; Must be string; By default: "20px"
                LineHeight: "1.6em", // The line-height property specifies the line height of the element, negative values are not allowed; Must be integer or decimal; By default: "1.6em"
                PaddingHorizontal: "5px", // Set the horizontal padding of the element; Must be string (px, %, auto); By default: "5px"
                Normal: {
                    Color: "#6488AA" // Normal color; By default: "#6488AA"
                },
                Hover: {
                    Color: "#FCFCFC" // Hover color without gradient; By default: "#FCFCFC"
                },
                Click: {
                    Color: "#FCFCFC" // Click color; By default: "#FCFCFC"
                }
            }
        }
    }
</script>