Loading, please wait...

ARTDESIGN MENU

Description

ArtDesign Menu is a JavaScript PlugIn, which presents ul > li structure in the menu form
Vertical Mode and Horizontal mode - Horizontal + Vertical (Responsive)
Opportunity for an unlimited number of nested contents, by default: 3
Full support of all advanced Web browsers
Full style control only with JavaScript, without using CSS
Full style control - Size (width, height), Margin and Padding, Background (background color, gradient), Border (width, color, radius), Text(font, size, color)
Hover / Click Animations
Listening for click events

Demo

HTML

<div id="Menu">
    <ul>
        <li>
            <div>
                <span>Menu One</span>
            </div>
            <ul>
                <li>
                    <div>
                        <a href="#One-One">
                            <span>Menu One > One</span>
                        </a>
                    </div>
                </li>
                <li>
                    <div>
                        <a href="#One-Two">
                            <span>Menu One > Two</span>
                        </a>
                    </div>
                </li>
                <li>
                    <div>
                        <a href="#One-Three">
                            <span>Menu One > Three</span>
                        </a>
                    </div>
                </li>
            </ul>
        </li>
        <li>
            <div>
                <span>Menu Two</span>
            </div>
            <ul>
                <li>
                    <div>
                        <span>Menu Two > One</span>
                    </div>
                    <ul>
                        <li>
                            <div>
                                <a href="#Two-One-One" class="CurrentLink">
                                    <span>Menu Two > One > One</span>
                                </a>
                            </div>
                        </li>
                        <li>
                            <div>
                                <a href="#Two-One-Two">
                                    <span>Menu Two > One > Two</span>
                                </a>
                            </div>
                        </li>
                        <li>
                            <div>
                                <a href="#Two-One-Three">
                                    <span>Menu Two > One > Three</span>
                                </a>
                            </div>
                        </li>
                    </ul>
                </li>
                <li>
                    <div>
                        <a href="#Two-Two">
                            <span>Menu Two > Two</span>
                        </a>
                    </div>
                </li>
                <li>
                    <div>
                        <a href="#Two-Two-Three">
                            <span>Menu Two > Three</span>
                        </a>
                    </div>
                </li>
            </ul>
        </li>
        <li>
            <div>
                <span>Menu Three</span>
            </div>
            <ul>
                <li>
                    <div>
                        <a href="#Three-One">
                            <span>Menu Three > One</span>
                        </a>
                    </div>
                </li>
                <li>
                    <div>
                        <a href="#Three-Two">
                            <span>Menu Three > Two</span>
                        </a>
                    </div>
                </li>
                <li>
                    <div>
                        <a href="#Three-Three">
                            <span>Menu Three > Three</span>
                        </a>
                    </div>
                </li>
            </ul>
        </li>
        <li>
            <div>
                <span>Menu Four</span>
            </div>
            <ul>
                <li>
                    <div>
                        <a href="#Four-One">
                            <span>Menu Four > One</span>
                        </a>
                    </div>
                </li>
                <li>
                    <div>
                        <a href="#Four-Two">
                            <span>Menu Four > Two</span>
                        </a>
                    </div>
                </li>
                <li>
                    <div>
                        <a href="#Four-Three">
                            <span>Menu Four > Three</span>
                        </a>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</div>

JavaScript

<script type="text/javascript">
    $(document).ready(function() {
        $("#Menu").ArtDesignMenu();
    });
</script>