DOME UI - 3

by Nick Karnik

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<script>
    function showMenu() {
        document.getElementById('toolbar').style.top = 0;
    }

    function hideMenu() {
        document.getElementById('toolbar').style.top = "-250px";
    }

    function handleMenuClick(t, e) {
        hideMenu();
    }

    function hideTab() {
        document.getElementById('toolbarTab').style.top = "-200px";
        document.getElementById('toolbarTabMaximize').style.display = "inline";
    }

    function showTab() {
        document.getElementById('toolbarTab').style.top = "70px";
        document.getElementById('toolbarTabMaximize').style.display = "none";
    }
</script>
<div>
    <div class="menubar">
         <h2><a href="#null" class="nav-idm"><em>IDM</em><span>COMPS</span><span id=Module>SIMULATION</span></a><span class="chevron fa fa-chevron-down" onclick="showMenu()"></span>
</h2>

        <!-- <span id="ModuleClass" class="fa fa-2x fa-cubes fa-fw"></span>  
     -->
        <!-- <span id="Module" class="title">SIMULATION</span>
     -->
        <!-- <span class="separator2"></span> -->
    </div>
    <div class=toolbarTabView> <span class=tabs>
        <ul>
            <li>New</li>
            <li>Load</li>
        </ul>            
        </span>

<span class=contextualMenu>
    <ul>
        <li>Campaign</li>
        <li>Config</li>
        <li>Demographics</li>
        <li>Schema</li>
    </ul>
    </span>

<span id="toolbarTabMaximize" class="maximizeTab fa fa-chevron-down" onclick="showTab()"></span>

    </div>
    <div id=toolbarTab class=toolbarTab>
        <ul>
            <li> <span class=groupContainer>
                <div class="groupBody fa fa-x fa-file-text-o"></div>
                <div class=groupTitle>Schema</div>
            </span>

            </li>
            <li> <span>
                
            </span>
 <span class=text>Config</span>

            </li>
        </ul> <span...

CSS

body, html {
    margin: 0;
}
.submenudiv {
  position: relative;
    top: -350px;
    height: 140px;
    width:140px;
    
    display: block;
    color: rgb(255, 255, 255);
    margin-left: -20px;
    background: rgb(102, 102, 102);
    text-align: center;
    vertical-align: bottom;
    //padding: 20px;
    border: 1px solid gray;
}
.submenu {
    position: absolute;
    right:10px;
    bottom:10px;
    background: linear-gradient(to right, #21374c 0%, #004966 30%, #21374c 100%);

}
.contextualMenu {
    border-left: 1px solid rgb(24, 60, 84);
    height: 30px;
    position: absolute;
    /* left: 140px; */
    margin-left: 30px;
    padding-left: 30px;
}
.contextualMenu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menubar {
    z-index:1000;
    position:relative;
    top:0;
    left:0;
    right:0;
    height: 45px;
    background: linear-gradient(to right, #21374c 0%, #004966 30%, #21374c 100%);
}
.menubar .chevron {
    padding: 0;
    color: #0072a2;
}
.menubar .title {
    padding: 0;
    font-size:x-large;
    //line-height: 0px;
}
.menubar span {
    //color:white;
    //height:50px;
    padding: 10px;
    //text-align: center;
    //vertical-align:superscript;
}
.menubar h2 {
    margin-top: 0;
    height: 40px;
    //float: left;
    display: inline-block;
    margin: 0.5em 30px;
    font-size: 1.5em;
    line-height: 1;
    //border-bottom: 1px dotted transparent;
    font-weight: normal;
    margin-top: 0;
    height: 30px;
}
.menubar h2 a {
    color: #0072a2;
    z-index:1000;
}
.menubar h2 a em {
    cursor: pointer;
    padding-right: 0.3em;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    color: #0094d1;
}
.menubar h2 a span {
    cursor: pointer;
    font-weight: normal;
    font-family:"Calibri", "Source Sans Pro", sans-serif;
    display: inline-block;
    color: #0072a2;
    text-decoration: none;
}
.toolbarTab {
    z-index:0;
    border-bottom: 1px solid gray;
    height: 90px;
    position:...

JavaScript

document.getElementById('menu').addEventListener('click', function (e) {

    if(e.target.tagName == "SPAN")
    {
        showSubmenu(e.target);
        return;
    }
    
    if (e.target.tagName != "LI" && e.target.tagName != "DIV") {
        return;
    }

    setModule(e.target);
    hideMenu();
}, false);

function showSubmenu(target) {
    document.getElementById('submenudiv').style.left = target.parentElement.clientLeft;
    document.getElementById('submenudiv').style.top = "42px";
    dococument.getElementById('submenu').classList.remove('fa-chevron-down');
    dococument.getElementById('submenu').classList.remove('fa-chevron-up');
}

function hideSubmenu() {
    document.getElementById('submenudiv').style.top = "-250px";
}

function setModule(target) {
    target = (target.tagName != "LI") ? target.parentElement : target;

    document.getElementById('Module').innerText = target.innerText;

    //    document.getElementById('ModuleClass').className = target.firstElementChild.className.replace('5x', '2x');
}