JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<script>
    //Create element hack for older browsers
    document.createElement("nav");
</script>

<nav class="pluginBar">
    <ul class="pluginBarLeft">
        <li><a href="http://localhost/" style="background: url(https://s-static.ak.facebook.com/rsrc.php/v1/zP/r/Jgg_sgLJ2EV.png) no-repeat center;" title="Home"></a></li>
    </ul>
    
    <ul class="pluginBarRight">
        <li>
            <span>Menu 1</span>
            <div>This is my test content - Number 1</div> 
        </li>
        <li>
            <span>Menu 2</span>
            <div>This is my test content - Number 2</div>
        </li>
        <li><span>Logout</span></li>
    </ul>
</nav>

CSS

nav {
    display:block; /* Create element hack for older browsers */
}

nav.pluginBar {
position: absolute;
width: 100%;
top: 0px;
left: 0px;
height: 35px;
background: #2d2d2d;
box-shadow: 0px 0px 5px #fff;
border-bottom: solid 1px #666;
}

nav.pluginBar ul.pluginBarLeft {
list-style:none;
display: inline-block;
*display: inline; /* Invalid CSS, but necessary for IE7 to only give the unordered list the width it needs (not 100% by default) :( */
height: 35px;
}

nav.pluginBar ul.pluginBarLeft li {
    display: inline-block;
    *display: inline; /* Invalid CSS, but necessary for IE7 to display each of the unordered list item in-line :( */
    zoom: 1; /* Invalid CSS again, but necessary for IE7 to treat the unordered list item as block-level elements :( */
    vertical-align : top;
    height: 35px;
    color: #999;
}

nav.pluginBar ul.pluginBarLeft li:hover {
    background: #555;
}

nav.pluginBar ul.pluginBarLeft li a {
    margin: 0px 5px 0px 5px;
    display: block;
    height: 35px;
    min-width: 20px;
    cursor: pointer;    
}

nav.pluginBar ul.pluginBarLeft li span {
    margin: 0px 5px 0px 5px;
    padding-top: 8px;
    display: block;
    height: 27px;
    min-width: 20px;
    cursor: pointer;    
}

nav.pluginBar ul.pluginBarRight {
    position: absolute;
    top: 0px;
    right: 0px;
    list-style:none;
    display: inline-block;
    *display: inline; /* Invalid CSS, but necessary for IE7 to only give the unordered list the width it needs (not 100% by default) :( */
    height: 35px;
    padding-left: 47px;
}

nav.pluginBar ul.pluginBarRight li {
    display: inline-block;
    *display: inline; /* Invalid CSS, but necessary for IE7 to display each of the unordered list item in-line :( */
    zoom: 1; /* Invalid CSS again, but necessary for IE7 to treat the unordered list item as block-level elements :( */
    vertical-align : top;
    height: 35px;
    color: #999;
    clear: both;
}

nav.pluginBar ul.pluginBarRight li:hover {
    background:...

JavaScript

$(document).ready(function() {
    //Listen for clicks on the navigation bar's right-side links, to display a pop-down menu
    $('.pluginBarRight li span').click(function() {
        //Onbtain a reference to the trigger and it's content container
        var trigger = $(this);
        var container = trigger.siblings('div');

        //Modify the CSS to best display the pop-down on the right side of the screen, then show it
        var offset = trigger.parent().offset().left + trigger.parent().outerWidth();

        container.css({
            'left': offset + 'px'
        }).show();
    });
});