Box TOP TOOLBAR v1

by secretgspot

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/flexie/1.0.0/flexie.min.js"></script>
<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->
<header class="box horizontal pack-justify gradientGrey">

    <section id="header-logo" class="box align-center">
        <h1 id="site-logo" data-title="SEARCHREV"> <a href="#">SEARCHREV</a></h1>
    </section>
    
    <section id="header-client" class="box align-center">
        <div id='client_list'></div>
        <form name="SearchrevClientRedirector" class="hide">
        <select id="client_select" name="client_select">
            <option>Youtube very long client Super Cool</option>
            <option>Youtube very long client Super Cool</option>
            <option>Youtube very long client Super Cool</option>
            <option>Youtube very long client Super Cool</option>
            <option>Youtube very long client Super Cool</option>
            <option>Youtube very long client Super Cool</option>
        </select>
        </form>
    </section>
    
    <section id="header-buttons" class="box flex1 align-center">
        <ul class="button-group ">
        
        <!-- HOME -->
        <li class="group-li"><a class="toolbar-button" href="javascript: goTo('/product_summary.php?client_id=<% $client_id %>',0);">Campaigns</a></li>
        
        <!-- NAVIGATOR -->
        <li class="group-li"><a class="toolbar-button" href="javascript: goTo('/navigator.php',0);">Navigator</a></li>
        
        <!-- REPORTS -->
        <li class="group-li menu">
        <a class="toolbar-button menu-button" href="/searchrev_reports.php">Reports</a>
            <ol class="menu-dropdown left">
            <li><a class="" href="/reporting_product_main.php?client_id=<%$client_id%>&network_id=<%$network_id%>&client_group_ids="><span>Account</span></a></li>
            <li><span onclick="reportCenterWindow('new', <% $client_id %>);">Schedule</span></li>
            <li><a...

CSS

.box {display: -webkit-box;display: -moz-box;display: -o-box;display: box;}

/* Flex */
.flex1 {-webkit-box-flex: 1;-moz-box-flex: 1;-o-box-flex: 1;box-flex: 1;}
.flex2 {-webkit-box-flex: 2;-moz-box-flex: 2;-o-box-flex: 2;box-flex: 2;}
.flex3 {-webkit-box-flex: 3;-moz-box-flex: 3;-o-box-flex: 3;box-flex: 3;}

/* Orient */
.box.horizontal {-webkit-box-orient: horizontal;-moz-box-orient: horizontal;box-orient: horizontal;}
.box.vertical {-webkit-box-orient: vertical;-moz-box-orient: vertical;box-orient: vertical;}

/* Align, start | end | center | baseline | stretch */
.align-center {-webkit-box-align: center;-moz-box-align: center;box-align: center;}
.align-start {-webkit-box-align: start;-moz-box-align: start;box-align: start;}
.align-end {-webkit-box-align: end;-moz-box-align: end;box-pack: end;}
.align-stretch {-webkit-box-align: stretch;-moz-box-align: stretch;box-align: stretch;}
.align-baseline {-webkit-box-align: baseline;-moz-box-align: baseline;box-align: baseline;}

/* Pack, start | end | center | justify */
.pack-center {-webkit-box-pack: center;-moz-box-pack: center;box-pack: center;}
.pack-start {-webkit-box-pack: start;-moz-box-pack: start;box-pack: start;}
.pack-end {-webkit-box-pack: end;-moz-box-pack: end;box-pack: end;}
.pack-justify {-webkit-box-pack: justify;-moz-box-pack: justify;box-pack: justify;}

/* Order, <number> */
.order-1 {-moz-box-ordinal-group: 1;-webkit-box-ordinal-group: 1;box-ordinal-group: 1;}
.order-2 {-moz-box-ordinal-group: 2;-webkit-box-ordinal-group: 2;box-ordinal-group: 2;}
.order-3 {-moz-box-ordinal-group: 3;-webkit-box-ordinal-group: 3;box-ordinal-group: 3;}
.order-4 {-moz-box-ordinal-group: 4;-webkit-box-ordinal-group: 4;box-ordinal-group: 4;}
.order-5 {-moz-box-ordinal-group: 5;-webkit-box-ordinal-group: 5;box-ordinal-group: 5;}


/* OTHER NONE BOX STYLES */
header.box {margin: 0;padding: 0; font-family: arial, serif; font-size: 14px; box-shadow: 0 0 1px #aaa;}
section.box {margin: 0;padding: 0;}

#site-logo {...

JavaScript

//Header Drop-Down menu
$(".menu").hover(function() {
   $(this).children().addClass("active");
}, function() {
   $(this).children().removeClass("active");
});