Multi Level Dynamic Flyout Menu

Multi level dynamic flyout menu

http://jsfiddle.net/f66MM/
This seems to work. All I did was change left:100% in li ul li ul

a {text-decoration: none; font-family: verdana; font-size: 12px}
ul{list-style: none; padding:0; margin:0}

.menu {
    margin:0; padding:0;
    width: 100%; height: auto; 
    background: #ccc;    
    position: absolute;
    top:0; left:0;   
}

.menu li {
    float:left;
    display:block
}

.menu li li {
    float:none;
}

.menu li a {
   padding: 0 5px;   
}

.menu li a:hover {
   background: #bbb
}

.menu li ul {
    padding:0; margin:0;
    background: #ddd;
    width: auto;
    position: absolute;    
    visibility: hidden;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    opacity: 0;
    margin: 20px 0 0 0;    
}

.menu li:hover ul {
    margin:0;
    opacity: 1;
    visibility: visible;
    display:block
}

.menu li ul li {
    clear:both   
}

.menu li ul li a {   
    width: auto;
    display:block;
}

.menu li ul li ul {
    position: absolute;       
    top: 0; left: 100%;    
    margin: 0 0 0 20px;
    display: block;
    visibility: hidden;
    opacity: 0
}

.menu li ul li ul li {
    position: relative;
    display:none;
    visibility: hidden;
    opacity: 0
}

.menu li ul li:hover ul li {
    visibility: visible;
    opacity: 1;
    display:block;
}

Dynamic CSS Dropdown Menu display submenu at same level as parent

Finally figured it out :) The following CSS does the trick.

/* Define some colors for the menu */
nav li {
    background-color: #AB2524;
}

nav li:hover {
    background-color: #801B1B;
}

/* Basic menu declarations */

nav {
    font-size: 0; /* Remove annoying whitespace between Nav Elements (white-space-collapse got moved to CSS4) */
}

nav a {
    font-size: 1rem; /* Restore Font Size */
    padding: 0.5em;
    display: block; /* So we can have padding */
    white-space: nowrap; /* No linebreaks in the menu */
    text-decoration: none;
    color: white;
}

nav ul {
    list-style: none; /* Remove Bullets from Lists */
    padding: 0; /* remove default browser padding */
}

/* Any list item in the menu */
nav li {
    position: relative; /* positioned so this is the reference. Required to be able to have the sub menu show up at the same level */
    display: inline-block;
}

/* All Sub menues */
nav ul ul {
    display: none; /* Hide sub menu by default */
    position: absolute; /* Absolute position to push the sub menu out of the box instead of making the box larger and having the top level menu pushed down */
}

/* Show sub menu on hover */
nav li:hover > ul {
    display: block;
}

/* Any sub menu below the second level (Flyout menues in the dropdown) */
nav ul ul ul {
    left: 100%; /* Pushes the menu to the right of it's parent */
    top: 0; /* Make it appear at the same level as it's parent */
}

/* Make the dropdown menu (first level) at least as wide as it's parent */
nav > ul > li > ul > li {
    min-width: 100%;
}

No floating, no hacks, just plain CSS. Tested in Chrome, Firefox and IE11. Works flawlessly on all of them, even IE. JSFiddle Demo

dynamic multi level dropdown menu php sql

When a menu item, have childrens then echo menu with menu-item-has-children class, otherwise echo a simple menu and move on.

<?php

$get = mysqli_query($db , "SELECT * from menu where parent_id is NULL");
while ($rowmenu = mysqli_fetch_assoc($get)) {
    $id = $rowmenu['id'] ;
    $check = mysqli_query($db , "SELECT * from menu where parent_id = '$id'");
    $haveSubMenu = mysqli_num_rows($check);

    if($haveSubMenu)
        echo '<li class="menu-item menu-item-type-post_type menu-item-object-page  menu-item-656 menu-item-has-children"><a href="'. $rowmenu['link'] . '" >' . $rowmenu['name'] .'</a>' ;
    else
        echo '<li class="menu-item menu-item-type-post_type menu-item-object-page  menu-item-656"><a href="'. $rowmenu['link'] . '" >' . $rowmenu['name'] .'</a>' ;

    if ($haveSubMenu) 
    { 
        echo '<ul class="sub-menu">' ;
        while ( $row2 = mysqli_fetch_assoc($check) ) {
           echo '<li class="menu-item-302"><a href="' . $row2['link'] . '">' . $row2['name'] . '</a></li>' ;
        }
        echo '</ul>' ;
    } else {
        echo '</li>' ;
    }
}

?>

how to create dynamic multi level dropdown in jquery

You may refer here for detail.

It works fine:

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="http://www.dynamicdrive.com/dynamicindex1/uldropdown.js"></script>
        <link rel="stylesheet" href="http://www.dynamicdrive.com/dynamicindex1/uldropdown.css"/>
    </head>
    <body>
        <div id="dropdown" class="uldropdown">
        </div>
        <textarea id="output" style="width: 90%;height:100px;margin-top:1em"></textarea>
        <script>
            var response=[{"Key":"001","Record":{"PrefcatID":"001","parentid":"0","prefname":"org1"}},{"Key":"002","Record":{"PrefcatID":"002","parentid":"0","prefname":"org2"}},{"Key":"003","Record":{"PrefcatID":"003","parentid":"0","prefname":"org3"}},{"Key":"004","Record":{"PrefcatID":"004","parentid":"001","prefname":"suborg1"}},{"Key":"005","Record":{"PrefcatID":"005","parentid":"001","prefname":"suborg2"}},{"Key":"006","Record":{"PrefcatID":"006","parentid":"002","prefname":"suborg1"}},{"Key":"007","Record":{"PrefcatID":"007","parentid":"004","prefname":"subsuborg1"}}];
            var menu = "<div class=\"titletext\">Select a Value</div><ul>";
            menu += fun_filldropdown(response, 0, menu);
            menu += "</ul>";
            $("#dropdown").html(menu);
            dropdown1 = new uldropdown({
                dropid: 'dropdown', // id of menu DIV container
                overlay: true, // true = drop down, false = expanding menu
                onSelect($selected){ // when user selects a value
                    $('#output').val('Selected Text: ' + $selected.text() + '\n\n' + 'Selected Value: ' + parseInt($selected.attr('key')))
                    console.log($selected.text()+","+parseInt($selected.attr("key")))
                }
            });
            function fun_filldropdown(response, parentid,menu)
            {
                var menu = "";      
                var filtered = $.grep(response, function (el) {
                    return el.Record.parentid == parentid.toString();
                });
                //alert(JSON.stringify(filtered));

                $.each(filtered, function(i, item) {

                    if(item.Record.prefname !== undefined)
                        {
                        menu += "<li><a key=\""+item.Key+"\">"+item.Record.prefname+"</a></li>";    
                        }

                    if(response !== undefined)
                    menu += "<ul>"+fun_filldropdown(response,item.Record.PrefcatID)+"</ul>";

                });
                return menu;
            }
        </script>
    </body>
</html> 

---

Related Topics