Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Multilevel (up to 3 level) Vertical Menu with bootstrap/Jquery

Tags:

jquery

css

twitter-bootstrap

jquery-ui

I am trying to create a navigation menu which is vertical and up to 3-level navigation and last level is toggable menu (when u click on last level menu,a set of submenu appears below that).A sample structure of the menu structure is similar to this

enter image description here

I tried below code but doesn't getting desired output

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap </title>

    <!-- Bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

    <link href="StyleSheet1.css" rel="stylesheet" />
    <!-- Optional theme
    <link rel="stylesheet" href="">
         -->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style type="text/css">
        .dropdown-submenu {
            position: relative;
            border-bottom: 1px solid #ccc;
        }

            .dropdown-submenu > .dropdown-menu {
                top: 0;
                left: 100%;
                margin-top: -6px;
                margin-left: -1px;
                -webkit-border-radius: 0 6px 6px 6px;
                -moz-border-radius: 0 6px 6px;
                border-radius: 0 6px 6px 6px;
            }

            .dropdown-submenu:hover > .dropdown-menu {
                display: block;
            }

            .dropdown-submenu > a:after {
                display: block;
                content: " ";
                float: right;
                width: 0;
                height: 0;
                border-color: transparent;
                border-style: solid;
                border-width: 5px 0 5px 5px;
                border-left-color: #ccc;
                margin-top: 5px;
                margin-right: -10px;
            }

            .dropdown-submenu:hover > a:after {
                border-left-color: #fff;
            }

            .dropdown-submenu.pull-left {
                float: none;
            }

                .dropdown-submenu.pull-left > .dropdown-menu {
                    left: -100%;
                    margin-left: 10px;
                    -webkit-border-radius: 6px 0 6px 6px;
                    -moz-border-radius: 6px 0 6px 6px;
                    border-radius: 6px 0 6px 6px;
                }

        ul {
            list-style: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="col-md-3 column margintop20">
            <ul class="nav nav-pills nav-stacked">

                <li class="dropdown-submenu active">
                    <a tabindex="-1" href="#">Client Advice</a>
                    <ul class="dropdown-menu">

                        <li class="dropdown-submenu"><a tabindex="-1" href="#">Pre-advice</a></li>
                        <li class="dropdown-submenu"><a href="#">Strategy & Technical</a></li>
                        <li class="dropdown-submenu"><a href="#">Research</a></li>
                        <li class="dropdown-submenu active">
                            <a href="#">APL & Products</a>
                            <ul class="dropdown-menu parent">
                                <li style=" border-bottom: 1px solid #ccc;">
                                    <a href="#">
                                        Approved Product List
                                        <span aria-hidden="true" class="glyphicon glyphicon-plus"></span>
                                        <span aria-hidden="true" class="glyphicon glyphicon-minus" style="display:none;"></span>
                                    </a>

                                    <ul class="child">
                                        <li style="padding:10px 15px;">Platforms</li>
                                        <li style="padding: 10px 15px;">Managed Funds</li>
                                        <li style="padding: 10px 15px;">Wealth Protection</li>
                                        <li style="padding: 10px 15px;">Listed Securities</li>
                                        <li style="padding: 10px 15px;">Wealth Protection</li>
                                        <li style="padding: 10px 15px;">Listed Securities</li>
                                        <li style="padding: 10px 15px;">Listed Securities</li>
                                    </ul>

                                </li>
                                <li style=" border-bottom: 1px solid #ccc;"><a href="#">Model Portfolios</a></li>
                                <li style=" border-bottom: 1px solid #ccc;"><a href="#">Non-approved Products</a></li>
                            </ul>
                        </li>
                        <li class="dropdown-submenu"><a href="#">Implementation</a></li>
                        <li class="dropdown-submenu"><a href="#">Review</a></li>
                        <li class="dropdown-submenu"><a href="#">Execution Only</a></li>
                    </ul>
                </li>
                <li class="dropdown-submenu"><a href="#">Personal Development</a></li>
                <li class="dropdown-submenu"><a href="#">Practice</a></li>
                <li class="dropdown-submenu"><a href="#">News</a></li>
            </ul>
        </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script>
        $('.child').hide(); //Hide children by default

        $('.parent').children().click(function () {
            event.preventDefault();
            $(this).children('.child').slideToggle('slow');
            $(this).find('span').toggle();
        });
    </script>
</body>
</html>

Is there any way to create a vertical multilevel menu structure using bootstrap,jquery I haven't got any multilevel menus with vertical orientation .Facing css issues with this code,not able to create similar navigation menu.

like image 865
F11 Avatar asked Apr 27 '15 05:04

F11

2 Answers

This may not be the answer you are looking for but it's what I would do in your case.

I use sometimes bootstrap but, as good as it is, in my humble opinion, people are very often thinking it's a miraculous code that can make you do whatever you want, and lately I am finding people spent more time trying to modified bootstrap css's than making the whole css's from scratch (if you know a bit of basic css), not to say so many webs "looking" so simillar.

For what you want to do I would basically clearing ALL classes in the html and just sniping the elements from the container I could do a menu as you show in the image (well, it needs some extra style like adding the arrow icons, shadows and such, but the point is to show you another way to do it).

html:

<div class="container">        
            <ul class="">

                <li class="">
                    <a tabindex="-1" href="#">Client Advice</a>
                    <ul class="">

                        <li class=""><a tabindex="-1" href="#">Pre-advice</a></li>
                        <li class=""><a href="#">Strategy & Technical</a></li>
                        <li class=""><a href="#">Research</a></li>
                        <li class="">
                            <a href="#">APL & Products</a>
                            <ul class="parent">
                                <li >
                                    <a href="#">
                                        Approved Product List                                        
                                    </a>

                                    <ul class="child">
                                        <li >Platforms</li>
                                        <li >Managed Funds</li>
                                        <li >Wealth Protection</li>
                                        <li >Listed Securities</li>
                                        <li >Wealth Protection</li>
                                        <li >Listed Securities</li>
                                        <li >Listed Securities</li>
                                    </ul>

                                </li>
                                <li ><a href="#">Model Portfolios</a></li>
                                <li ><a href="#">Non-approved Products</a></li>
                            </ul>
                        </li>
                        <li class=""><a href="#">Implementation</a></li>
                        <li class=""><a href="#">Review</a></li>
                        <li class=""><a href="#">Execution Only</a></li>
                    </ul>
                </li>
                <li ><a href="#">Personal Development</a></li>
                <li ><a href="#">Practice</a></li>
                <li ><a href="#">News</a></li>
            </ul>

    </div>

And just this css (please notice that when I call directly a <a> tag you may need to call it a different way:

html, body {
    margin:0;
    padding:0;
    height:100%;
}
* {box-sizing: border-box;}
.container {
    height:100%;
}
a {
    color:#fff;
    text-decoration:none;
    border-bottom:1px dotted #fff;
    padding:0px 0px 20px 0px;
    width:100%;
    display:block;
    height:100%;
}
li {
    padding:20px 20px 0 20px;
    width:100%;
    color:#fff;
}
.container ul {height:100%;}
.container > ul {
    width:250px;
    background-color:#224490;
    position:relative;
    overflow:visible;
}
.container > ul > li {}
.container > ul > li:hover {background-color:#0f1e41;}
.container > ul > li > ul {
    display:none;
    position:absolute;
    right:-250px;
    top:0;
    width:250px;
    background-color:#18316a;
}
.container > ul > li:hover > ul {
    display:block;
}
.container > ul > li > ul >li:hover {background-color:#0f1e41;}
.container > ul > li > ul > li > ul {
    display:none;
    position:absolute;
    right:-250px;
    top:0;
    width:250px;
    background-color:#112551;
}
.container > ul > li > ul > li:hover ul {
    display:block;
}
.container > ul > li > ul > li > ul > li:hover {background-color:#0f1e41;}
.container > ul > li > ul > li ul li ul li {
    border-bottom:1px dotted #fff;
    padding:20px;
}

And I have just kept the classes that activate the script so keep it untouched.

FIDDLE

I hope this can be usefull for you. Feel free to ask any question or if you want something you want to modified (and you can't after, of course, trying) I will try my best to help you.

like image 146
Alvaro Menéndez Avatar answered Nov 18 '22 04:11

Alvaro Menéndez

you can make it like your screenshot: http://codepen.io/MaGiO/pen/YXXzeJ

HTML

<div id="mn-wrapper">
        <div class="mn-sidebar">
            <div class="mn-toggle"><i class="fa fa-bars"></i></div>
            <div class="mn-navblock">
                <ul class="mn-vnavigation">
                    <li class="dropdown-submenu active">
                        <a tabindex="-1" href="#">Client Advice</a>
                        <ul class="dropdown-menu">
                            <li><a tabindex="-1" href="#">Pre-advice</a></li>
                            <li><a href="#">Strategy & Technical</a></li>
                            <li><a href="#">Research</a></li>
                            <li class="dropdown-submenu active">
                                <a href="#">APL & Products</a>
                                <ul class="dropdown-menu parent">
                                    <li style=" border-bottom: 1px solid #ccc;">
                                        <a href="#">
                                            Approved Product List
                                            <span aria-hidden="true" class="glyphicon glyphicon-plus"></span>
                                            <span aria-hidden="true" class="glyphicon glyphicon-minus" style="display:none;"></span>
                                        </a>

                                        <ul class="child">
                                            <li style="padding:10px 15px;">Platforms</li>
                                            <li style="padding: 10px 15px;">Managed Funds</li>
                                            <li style="padding: 10px 15px;">Wealth Protection</li>
                                            <li style="padding: 10px 15px;">Listed Securities</li>
                                            <li style="padding: 10px 15px;">Wealth Protection</li>
                                            <li style="padding: 10px 15px;">Listed Securities</li>
                                            <li style="padding: 10px 15px;">Listed Securities</li>
                                        </ul>

                                    </li>
                                    <li style=" border-bottom: 1px solid #ccc;"><a href="#">Model Portfolios</a></li>
                                    <li style=" border-bottom: 1px solid #ccc;"><a href="#">Non-approved Products</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Implementation</a></li>
                            <li><a href="#">Review</a></li>
                            <li><a href="#">Execution Only</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Personal Development</a></li>
                    <li><a href="#">Practice</a></li>
                    <li><a href="#">News</a></li>
                </ul>
            </div>
            <div class="text-right collapse-button" style="padding:7px 9px;">

            </div>
        </div>
        <div class="container" id="mn-cont">
            <div class="cnt-mcont">
                <h1>Title Page</h1>
            </div>
        </div>
    </div>

CSS

    html{
        height:100%; /* make sure it is at least as tall as the viewport */
    }
    body{
        height:100%; /* force the BODY element to match the height of the HTML element */
        position: relative;
    }
    .dropdown-submenu {
        border-bottom: 1px solid #ccc;
    }
    #mn-wrapper {
      display: table;
      width: 100%;
      position: absolute;
      height: 100%;
    }
    .mn-sidebar {
      display: table-cell;
      position: relative;
      vertical-align: top;
      padding-bottom: 49px;
      background: #272930;
      width: 216px;
      z-index: 2;
    }
    #mn-cont {
      display: table-cell;
      vertical-align: top;

      position: relative;
      padding: 0;
    }
    .container {
      margin-right: auto;
    }
    .cnt-mcont {
      background-color: #F6F6F6;
      color: inherit;
      font-size: 13px;
      font-weight: 200;
      line-height: 21px;
      padding: 15px 30px 30px 30px;
      margin-top: 0;
      height: 101vh;
    }
    .mn-sidebar .mn-toggle {
      display: none;
      padding: 10px 0;
      text-align: center;
      cursor: pointer;
    }
    .mn-vnavigation {
      margin: 0 0 0 0;
      padding: 0;
      border-top: 1px solid #1a1c20;
      border-bottom: 1px solid #2f323a;
    }
    .mn-vnavigation li a {
      border-top: 1px solid #32353e;
      border-bottom: 1px solid #1a1c20;
      display: block;
      padding: 14px 18px 13px 15px;
      color: #fff;
      text-decoration: none;
      font-size: 12px;
      font-weight: 300;
      text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
      white-space: nowrap;
    }
    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
        height: 101vh;
        width: 216px;
        background: #272930;
    }
    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }
    .dropdown-submenu > a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #ccc;
        margin-top: 5px;
        margin-right: -10px;
    }
    .dropdown-submenu:hover > a:after {
        border-left-color: #fff;
    }
    .dropdown-submenu.pull-left {
        float: none;
    }
    .dropdown-submenu.pull-left > .dropdown-menu {
        left: -100%;
        margin-left: 10px;
        -webkit-border-radius: 6px 0 6px 6px;
        -moz-border-radius: 6px 0 6px 6px;
        border-radius: 6px 0 6px 6px;
    }
    ul {
        list-style: none;
    }

JS

$('.child').hide(); //Hide children by default

    $('.parent').children().click(function () {
        event.preventDefault();
        $(this).children('.child').slideToggle('slow');
        $(this).find('span').toggle();
    });

you want something like this?

like image 6
MaGiO Avatar answered Nov 18 '22 02:11

MaGiO
Sign in to Comment

Related questions

How to check if there is already a click/event associated to an element
PHP header() and jquery mobile
Is event.currentTarget always equal to $(this) in jQuery?
DOM : How to detect a new child elements?
Delaying the loading spinner while doing ajax requests in jQuery
Simple click on labels makes double click
How to call jQuery properly from an AngularJS controller
Blocking background content and focus on modal dialog
Accepting the animation
jQuery detach() v/s remove() v/s hide() [closed]
IE8 - input (type="file") get files
JSfiddle: What is my fiddle's javascript (*.js) url ? so I can reuse it by src
cannot call methods on slider prior to initialization attempt to call method 'value'
Bootstrap 3 - Scrollspy with sidebar
How to synchronize scroll between two elements with different height
chosen data-placeholder doesn't display fully for listboxes
jQuery trigger mousedown registered by addEventListener
jQuery, $.ajax with array of urls
How to add HTML content at select2 dropdown box
Cross-Domain Request without CORS or JSONP

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!