DOME UI - 2

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 = "108px";
        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>Manage</li>
            <li>Help</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 class="minimizeTab fa fa-chevron-up" onclick="hideTab()"></span>
</div>
<div id="toolbar" class="toolbar">
    <div class="toolbar-menu">
        <ul id=menu>
            <li>
                <div class="icon fa...

CSS

body, html {
    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: absolute;
    top: 90px;
    left: 0;
    right: 0;
    transition: top 0.25s ease;
    -webkit-transition: top 0.25s ease;
    
    top: 108px;
border: 1px solid;
left: 10px;
right: 10px;
background-color: rgb(173, 216, 230);
}
.toolbarTab .groupContainer {
    height: 100px;
    display: inline-block;
    text-align:center;
    vertical-align:middle;
}
.toolbarTab .groupTitle {
    bottom: 0;
}
.toolbarTab ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.toolbarTab li {
    float: left;
    margin: 0;
    padding-right: 10px;
    padding-left: 10px;
    padding-top:10px;
}
.toolbarTab .minimizeTab {
    position: absolute;
    right:0;
    bottom:0;
    margin-bottom: 10px;
   ...

JavaScript

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

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

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


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');
}