JSFiddle - React, Tailwind, and code Playground

by mflodin

HTML

<div id="divLeftContent">
    <div id="divNavBar">
        <a id="ctl00_LeftSideBar_NavigationBar_navBarControl_hlHome" class="navSelected" public="true" itemName="home" href="#">
            <div id="home">
                &nbsp;&nbsp;ARTICLES IN LATEST ISSUE&nbsp;&nbsp;
            </div>
        </a>
        <a id="ctl00_LeftSideBar_NavigationBar_navBarControl_hlArticle" class="navSelectable" public="true" itemName="article" href="#">
            <div id="article">
                &nbsp;&nbsp;SEARCH TOPICS&nbsp;&nbsp;
                
            </div>
            <div class="divNavBarSubMenu">
                <a class="navSelectable" href="=10">
                    <div id="Div1" >
                        &nbsp;&nbsp;TOPIC GSMKSMDLK DFKMLKAFl KMFLALKMAF&nbsp;&nbsp;
                    </div>
                </a>
                <a class="navSelectable" href="=10">
                    <div id="Div2">
                        &nbsp;&nbsp;TOPIC POKGK KMFLALKMAF KMFLALKMAF DFKMLKAFl &nbsp;&nbsp;
                    </div>
                </a>
                <a class="navSelectable" href="=10">
                    <div id="Div3">
                        &nbsp;&nbsp;TOPIC SGSDG&nbsp;&nbsp;
                    </div>
                </a>
                <a class="navSelectable" href="=10">
                    <div id="Div4">
                        &nbsp;&nbsp;TOPIC&nbsp;ADSGHJ&nbsp;DFKMLKAFl&nbsp;KMFLALKMAF&nbsp;&nbsp;
                    </div>
                </a>
            </div>
        </a>
        <div id="symposium">
            <a id="ctl00_LeftSideBar_NavigationBar_navBarControl_hlSymposium" class="navSelectable" public="true" itemName="symposium" href="#">
                &nbsp;&nbsp;SYMPOSIA & WORKSHOPS&nbsp;&nbsp;</a>
            <div class="divNavBarSubMenu">
                <a class="navSelectable" href="=10">
                    <div id="Div1" >
                        &nbsp;&nbsp;TOPIC GSMKSMDLK DFKMLKAFl KMFLALKMAF&nbsp;&nbsp;
                  ...

CSS

div.divNavBarSubMenu {
    display:none;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 15; background-color:white; border: solid 1px;
    border-color:#5b9bc9;
}

div.divNavBarSubMenu a div {
    white-space:nowrap;
}


a { text-decoration:none}    
.navSelected div        
{ margin: 3px; 
    border-style:solid; 
    border-width:1px; 
    border-color:#5b9bc9; 
    color:#5b9bc9; 
    font-family:arial,helvetica,sans-serif; 
    font-size:10px; 
    text-decoration:none; 
    line-height:16px;
    font-weight:normal; 
    width:100%; 
    background-color: white;
}
.navSelectable div        
{ margin: 3px; font-family:arial,helvetica,sans-serif; font-size:10px; color:#808285; 
    text-decoration:none; line-height:16px; font-weight:normal; 
    width:100%;
}
.navNotSelectable div    
{   margin: 3px; font-family:arial,helvetica,sans-serif; font-size:10px; color:#cecece; 
    background-color:#FAFAFA; text-decoration:none; line-height:16px; font-weight:normal;
    width:100%;
}

a.navSelectable         
{display:block;}

#divLeftContent
{
    top:101px;
    left:10px;
    width:179px;
    z-index:20;
    position:absolute;
    background-color:white;
}

#divNavBar
{
    top:8px;
    left:8px;
    width:163px;
    z-index:20;
    position:relative;
    background-color:white;
    margin-bottom:20px;
}

JavaScript

var i = null;

var hideMenu = function() {
    $("#divNavBarSubMenu").hide(250, function() {
        $("a.navSelected").children().first().css({
            "border-right": "solid 1px"
        });
    });
}

$("#home").click(function() {
    showMenu($(this));
});

$("#article").click(function() {
    showMenu($(this));
});

$("#symposium").click(function() {
    showMenu($(this));
});

var showMenu = function(clickedElem) {
    clearTimeout(i);
    //get the position of the placeholder element
    var selected = clickedElem; //$("a.navSelected").children().first();
    var pos = selected.offset();
    var width = selected.width();
    selected.css({
        "border-right": "none"
    });
    //show the menu directly over the placeholder
    $(".divNavBarSubMenu").css({
        "left": (pos.left + width) + "px",
        "top": pos.top + "px"
    });
    $(".divNavBarSubMenu").show(250);
    i = setTimeout(function() {
        hideMenu();
    }, 3000);
}

$("#divNavBarSubMenu").mouseover(function() {
    clearTimeout(i);
}).mouseleave(function() {
    clearTimeout(i);
    i = setTimeout(function() {
        hideMenu();
    }, 500);
});

//showMenu();