Bootstrap Snippet Ace Responsive Menu Vertical using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
    <nav>
        <!-- Menu Toggle btn-->
        <div class="menu-toggle">
            <h3>Menu</h3>
            <button type="button" id="menu-btn">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <!-- Responsive Menu Structure-->
        <!--Note: declare the Menu style in the data-menu-style="horizontal" (options: horizontal, vertical, accordion) -->
        <ul id="respMenu" class="ace-responsive-menu" data-menu-style="vertical">
            <li>
                <a href="javascript:;">
                    <i class="fa fa-home" aria-hidden="true"></i>
                    <span class="title">Home</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <i class="fa fa-cube" aria-hidden="true"></i>
                    <span class="title">About Us</span>
                </a>
                <!-- Level Two-->
                <ul>
                    <li>
                        <a href="#">Sub Item One</a>
                    </li>
                    <li>
                        <a href="#">Sub Item Two</a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 
Ace Responsive Menu Plugin
Version: 1.0
Author: Samson Onna
E-mail: samson3d@gmail.com
----------------------------------------*/
/* Import Fonts
----------------------------------------*/
@import url(http://fonts.googleapis.com/css?family=Roboto);
/* Ace Responsive Menu
----------------------------------------*/
a {
    text-shadow: none;
    color: #0d638f;
}
ul {
    margin: 0px;
    padding: 0px;
}
.ace-responsive-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #333;  
    float:left;
    width:100%;
    font-family: 'Roboto', sans-serif;
    border-bottom: 3px solid #FD5025;        
}
.ace-responsive-menu li{
    list-style: none;
}
.ace-responsive-menu li ul {
    display:none;
}
.ace-responsive-menu > li {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 
Ace Responsive Menu Plugin
Version: 1.0
Author: Samson.Onna 
Email : samson3d@gmail.com
----------------------------------------*/
(function ($) {
    $.fn.aceResponsiveMenu = function (options) {
        //plugin's default options
        var defaults = {
            resizeWidth: '768',
            animationSpeed: 'fast',
            accoridonExpAll: false
        };
        //Variables
        var options = $.extend(defaults, options),
            opt = options,
            $resizeWidth = opt.resizeWidth,
            $animationSpeed = opt.animationSpeed,
            $expandAll = opt.accoridonExpAll,
            $aceMenu = $(this),
            $menuStyle = $(this).attr('data-menu-style');
        // Initilizing        
        $aceMenu.find('ul').addClass("sub-menu");
        $aceMenu.find('ul').siblings('a').append('<span class="arrow "></span>');
        if ($menuStyle == 'accordion') { $(this).addClass('collapse'); }
        // Window resize on menu breakpoint 
        if ($(window).innerWidth() <= $resizeWidth) {
            menuCollapse();
        }
        $(window).resize(function () {
            menuCollapse();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Ace Responsive Menu Vertical"
Bootstrap 4.0.0 Snippet by foysal991

Related: See More

Questions / Comments:

"Ace Responsive Menu Vertical" Bootstrap 4.0.0 Snippet by foysal991

Related: See More

Questions / Comments:

"Ace Responsive Menu Vertical"
Bootstrap 4.0.0 Snippet by foysal991