JSFiddle - React, Tailwind, and code Playground

by ahmadka

HTML

<link rel="stylesheet" href="173.254.28.69/~bluraysp/filtertest11/css/bootstrap.css">
<script src="173.254.28.69/~bluraysp/filtertest11/js/jquery.menu-aim.js"></script>
<script src="173.254.28.69/~bluraysp/filtertest11/js/bootstrap.min.js"></script>
<div class="nav-collapse collapse">
    <ul class="nav">
        <li class="active"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Explore the Monkeys</a> 
            <!-- jQuery-menu-aim: this <ul> defines the dropdown main menu and its contents.
                  This is just one of many possible examples for defining the menu's HTML.
                  jQuery-menu-aim is agnostic to your HTML structure, it only fires events to
                  be used as you please.
                -->
            <ul class="dropdown-menu" role="menu">
                <li data-submenu-id="submenu-patas"> <a href="#">Patas</a> 
                    <!-- jQuery-menu-aim: each class="popover" div defines submenu content. There are a million and one ways to do this, places to structure the HTML, etc. This is just one example. jQuery-menu-aim is agnostic to your HTML structure, it only fires events to be used as you please. -->
                    <div id="submenu-patas" class="popover">
                        
<h3 class="popover-title">Patas</h3>

                        <div class="popover-content">
                            <img src="173.254.28.69/~bluraysp/filtertest11/aim/img/patas.png">
                        </div>
                    </div>
                </li>
                <li data-submenu-id="submenu-snub-nosed"> <a href="#">Golden Snub-Nosed</a>

                    <div id="submenu-snub-nosed" class="popover">
                        
<h3 class="popover-title">Golden Snub-Nosed</h3>

                        <div class="popover-content">
                            <img src="173.254.28.69/~bluraysp/filtertest11/aim/img/snub-nosed.png">
                        </div>
                    </div>
            ...

CSS

.popover {
    width: 400px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    overflow: hidden;
}
.popover-content {
    text-align: center;
}
.popover-content img {
    height: 212px;
    max-width: 250px;
}
.dropdown-menu {
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}
.dropdown-menu > li > a:hover {
    background-image: none;
    color: white;
    background-color: rgb(0, 129, 194);
    background-color: rgba(0, 129, 194, 0.5);
}
.dropdown-menu > li > a.maintainHover {
    color: white;
    background-color: #0081C2;

JavaScript

var $menu = $(".dropdown-menu");

// jQuery-menu-aim: <meaningful part of the example>
// Hook up events to be fired on menu row activation.
$menu.menuAim({
    activate: activateSubmenu,
    deactivate: deactivateSubmenu
});
// jQuery-menu-aim: </meaningful part of the example>

// jQuery-menu-aim: the following JS is used to show and hide the submenu
// contents. Again, this can be done in any number of ways. jQuery-menu-aim
// doesn't care how you do this, it just fires the activate and deactivate
// events at the right times so you know when to show and hide your submenus.
function activateSubmenu(row) {
    var $row = $(row),
        submenuId = $row.data("submenuId"),
        $submenu = $("#" + submenuId),
        height = $menu.outerHeight(),
        width = $menu.outerWidth();

    // Show the submenu
    $submenu.css({
        display: "block",
        top: -1,
        left: width - 3, // main should overlay submenu
        height: height - 4 // padding for main dropdown's arrow
    });

    // Keep the currently activated row's highlighted look
    $row.find("a").addClass("maintainHover");
}

function deactivateSubmenu(row) {
    var $row = $(row),
        submenuId = $row.data("submenuId"),
        $submenu = $("#" + submenuId);

    // Hide the submenu and remove the row's highlighted look
    $submenu.css("display", "none");
    $row.find("a").removeClass("maintainHover");
}

$(document).click(function () {
    // Simply hide the submenu on any click. Again, this is just a hacked
    // together menu/submenu structure to show the use of jQuery-menu-aim.
    $(".popover").css("display", "none");
    $("a.maintainHover").removeClass("maintainHover");
});