Responsive Dashboard

HTML

              
                <div id="hit-menu" class="col-xs-hide col-sm-hide"></div>
    <div class="menu-mobile-background "></div>
    <div id="header">
        <div class="header-inner">
            <div class="header-topo">
                <button class="button-menu-mobile ">
                    <div class="box-stripes">
                        <span class="stripe-top"></span>
                        <span class="stripe-middle"></span>
                        <span class="stripe-bottom"></span>
                    </div>
                </button>
                <span class="header-nomeEmpresa header-nomeEmpresa_mobile col-xs-show col-sm-show">Dashboard</span>
                <a href="#" class="brand-icon ">LOGO</a>
            </div>
            <div class="header-menu">
                <div class="menu-modulos">
                    <ul class="menu-modulosWrapper ">
                        <li class="menu-modulosBt">
                            <a href="#" class="menu-modulosBt-mainBt">ITEM 01</a>
                            <em class="menu-modulosFeed"></em>
                        </li>
                        <li class="menu-modulosBt">
                            <a href="#" class="menu-modulosBt-mainBt">ITEM 02</a>
                            <em class="menu-modulosFeed"></em>
                        </li>
                        <li class="menu-modulosBt">
                            <a href="#" class="menu-modulosBt-mainBt">ITEM 03</a>
                            <em class="menu-modulosFeed"></em>
                        </li>
                        <li class="menu-modulosBt">
                            <a href="#" class="menu-modulosBt-mainBt">ITEM 04</a>
                            <em class="menu-modulosFeed"></em>
                        </li>
                    </ul>
                </div>

                <div class="clear"></div>
            </div>
        </div>
    </div>
    <div id="menu" class="">
        <div class="menu-header">
            <span class="shape-remove-shadow_green"></span>
            <span class="shape-remove-shadow_white"></span>
            <div class="header-topo">
                <div class="header-controlMenu  col-sm-hide col-xs-hide">
                    <span class="header-nomeEmpresa">Dashboard</span>
                    <button class="header-controlMenuButton">
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 408 408" style="enable-background:new 0 0 408 408;" xml:space="preserve" class="detail convertSvgInline replaced-svg" data-id="61022" data-kw="go10">
<g>
	<g id="arrow-back">
		<path d="M408,178.5H96.9L239.7,35.7L204,0L0,204l204,204l35.7-35.7L96.9,229.5H408V178.5z"></path>
	</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
                    </button>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="header-menu">
                <div class="header-search ">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="imgView" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 485.213 485.213" style="enable-background:new 0 0 485.213 485.213;" xml:space="preserve" class="spt" data-id="34097" data-kw="magnifier12">
<g>
	<g>
		<path d="M363.909,181.955C363.909,81.473,282.44,0,181.956,0C81.474,0,0.001,81.473,0.001,181.955s81.473,181.951,181.955,181.951    C282.44,363.906,363.909,282.437,363.909,181.955z M181.956,318.416c-75.252,0-136.465-61.208-136.465-136.46    c0-75.252,61.213-136.465,136.465-136.465c75.25,0,136.468,61.213,136.468,136.465    C318.424,257.208,257.206,318.416,181.956,318.416z"></path>
		<path d="M471.882,407.567L360.567,296.243c-16.586,25.795-38.536,47.734-64.331,64.321l111.324,111.324    c17.772,17.768,46.587,17.768,64.321,0C489.654,454.149,489.654,425.334,471.882,407.567z"></path>
	</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
                    <input type="text" value="Some search field" /></p>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
        <div class="menu-box">
            <div class="menu-wrapper-inner">
                <div class="menu-wrapper">
                    <div class="menu-slider">
                        <div class="menu">
                            <ul >
                                <li>
                                    <div class="menu-item"><a href="#" class="menu-anchor" data-menu="1">Item menu 1</a>
                                      <svg class="spt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 451.846 451.847" style="enable-background:new 0 0 451.846 451.847;" xml:space="preserve">
<g>
	<path d="M345.441,248.292L151.154,442.573c-12.359,12.365-32.397,12.365-44.75,0c-12.354-12.354-12.354-32.391,0-44.744   L278.318,225.92L106.409,54.017c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.391-12.359,44.75,0l194.287,194.284   c6.177,6.18,9.262,14.271,9.262,22.366C354.708,234.018,351.617,242.115,345.441,248.292z"></path>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
                                  </div>
                                </li>
                                <li>
                                    <div class="menu-item"><a href="#" class="menu-anchor" data-menu="2">Item menu 2</a>
                                      <svg class="spt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 451.846 451.847" style="enable-background:new 0 0 451.846 451.847;" xml:space="preserve">
<g>
	<path d="M345.441,248.292L151.154,442.573c-12.359,12.365-32.397,12.365-44.75,0c-12.354-12.354-12.354-32.391,0-44.744   L278.318,225.92L106.409,54.017c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.391-12.359,44.75,0l194.287,194.284   c6.177,6.18,9.262,14.271,9.262,22.366C354.708,234.018,351.617,242.115,345.441,248.292z"></path>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
                                  </div>
                                </li>
                                <li>
                                    <div class="menu-item"><a href="#" class="">Item menu 3</a></div>
                                </li>
                                <li>
                                    <div class="menu-item"><a href="#" class="menu-anchor"  data-menu="3">Item menu 4</a>
                                  <svg class="spt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 451.846 451.847" style="enable-background:new 0 0 451.846 451.847;" xml:space="preserve">
<g>
	<path d="M345.441,248.292L151.154,442.573c-12.359,12.365-32.397,12.365-44.75,0c-12.354-12.354-12.354-32.391,0-44.744   L278.318,225.92L106.409,54.017c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.391-12.359,44.75,0l194.287,194.284   c6.177,6.18,9.262,14.271,9.262,22.366C354.708,234.018,351.617,242.115,345.441,248.292z"></path>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg></div>
                                </li>
                                <li>
                                    <div class="menu-item"><a href="#" class="">Item menu 5</a></div>
                                </li>
                                <li>
                                    <div class="menu-item"><a href="#" class="menu-anchor"  data-menu="4">Item menu 6</a>
                                  <svg class="spt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 451.846 451.847" style="enable-background:new 0 0 451.846 451.847;" xml:space="preserve">
<g>
	<path d="M345.441,248.292L151.154,442.573c-12.359,12.365-32.397,12.365-44.75,0c-12.354-12.354-12.354-32.391,0-44.744   L278.318,225.92L106.409,54.017c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.391-12.359,44.75,0l194.287,194.284   c6.177,6.18,9.262,14.271,9.262,22.366C354.708,234.018,351.617,242.115,345.441,248.292z"></path>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
                                  </div>
                                </li>
                            </ul>
                        </div>
                        <div class="submenu menu" data-menu="1">
                            <div class="submenu-back">
                                <div class="menu-item">
                                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  x="0px" y="0px" width="10px" height="10px" viewBox="0 0 451.847 451.847" style="enable-background:new 0 0 451.847 451.847;" xml:space="preserve" class="spt">
<g>
	<path d="M97.141,225.92c0-8.095,3.091-16.192,9.259-22.366L300.689,9.27c12.359-12.359,32.397-12.359,44.751,0   c12.354,12.354,12.354,32.388,0,44.748L173.525,225.92l171.903,171.909c12.354,12.354,12.354,32.391,0,44.744   c-12.354,12.365-32.386,12.365-44.745,0l-194.29-194.281C100.226,242.115,97.141,234.018,97.141,225.92z"></path>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
                                  <a href="#" class="menu-back">BACK</a></div>
                            </div>
                            <ul>
                                <li>
                                    <div class="menu-item"><a href="#" class="menu-anchor" data-menu="5">Subitem</a>
                                  <svg class="spt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 451.846 451.847" style="enable-background:new 0 0 451.846 451.847;" xml:space="preserve">
<g>
	<path d="M345.441,248.292L151.154,442.573c-12.359,12.365-32.397,12.365-44.75,0c-12.354-12.354-12.354-32.391,0-44.744   L278.318,225.92L106.409,54.017c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.391-12.359,44.75,0l194.287,194.284   c6.177,6.18,9.262,14.271,9.262,22.366C354.708,234.018,351.617,242.115,345.441,248.292z"></path>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
                                  </div>
                                </li>
                                <li>
                                    <div class="menu-item"><a href="#">Subitem</a></div>
                                </li>
                                <li>
                                    <div class="menu-item"><a href="#">Subitem</a></div>
                                </li>
                            </ul>
                        </div>
                        <div class="submenu menu" data-menu="2">
                            <div class="submenu-back">
                                <div class="menu-item">
                                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  x="0px" y="0px" width="10px" height="10px" viewBox="0 0 451.847 451.847" style="enable-background:new 0 0 451.847 451.847;" xml:space="preserve" class="spt">
<g>
	<path d="M97.141,225.92c0-8.095,3.091-16.192,9.259-22.366L300.689,9.27c12.359-12.359,32.397-12.359,44.751,0   c12.354,12.354,12.354,32.388,0,44.748L173.525,225.92l171.903,171.909c12.354,12.354,12.354,32.391,0,44.744   c-12.354,12.365-32.386,12.365-44.745,0l-194.29-194.281C100.226,242.115,97.141,234.018,97.141,225.92z"></path>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
                                  <a href="#" class="menu-back">BACK</a></div>
                            </div>
                            <ul>
                                <li>
                                    <div class="menu-item"><a href="#">Subitem</a></div>
                                </li>
                                <li>
                                    <div class="menu-item"><a href="#">Subitem</a></div>
                                </li>
                                <li>
                                    <div class="menu-item"><a href="#">Subitem</a></div>
                                </li>
                            </ul>
                        </div>
                        <div class="submenu menu" data-menu="3">
                            <div class="submenu-back">
                                <div class="menu-item">
                                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  x="0px" y="0px" width="10px" height="10px" viewBox="0 0 451.847 451.847" style="enable-background:new 0 0 451.847 451.847;" xml:space="preserve" class="spt">
<g>
	<path d="M97.141,225.92c0-8.095,3.091-16.192,9.259-22.366L300.689,9.27c12.359-12.359,32.397-12.359,44.751,0   c12.354,12.354,12.354,32.388,0,44.748L173.525,225.92l171.903,171.909c12.354,12.354,12.354,32.391,0,44.744   c-12.354,12.365-32.386,12.365-44.745,0l-194.29-194.281C100.226,242.115,97.141,234.018,97.141,225.92z"></path>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
                                  <a href="#" class="menu-back">BACK</a></div>
                            </div>
                            <ul>
                                <li>
                                    <div class="menu-item"><a href="#" >Subitem</a></div>
                                </li>
                                <li>
                                    <div class="menu-item"><a href="#">Subitem</a></div>
                                </li>
                                <li>
                                    <div class="menu-item"><a href="#">Subitem</a></div>
                                </li>
                            </ul>
                        </div>
                        <div class="submenu menu" data-menu="4">
                            <div class="submenu-back">
                                <div class="menu-item">
                                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  x="0px" y="0px" width="10px" height="10px" viewBox="0 0 451.847 451.847" style="enable-background:new 0 0 451.847 451.847;" xml:space="preserve" class="spt">
<g>
	<path d="M97.141,225.92c0-8.095,3.091-16.192,9.259-22.366L300.689,9.27c12.359-12.359,32.397-12.359,44.751,0   c12.354,12.354,12.354,32.388,0,44.748L173.525,225.92l171.903,171.909c12.354,12.354,12.354,32.391,0,44.744   c-12.354,12.365-32.386,12.365-44.745,0l-194.29-194.281C100.226,242.115,97.141,234.018,97.141,225.92z"></path>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
                                  <a href="#" class="menu-back">BACK</a></div>
                            </div>
                            <ul>
                                <li>
                                    <div class="menu-item"><a href="#">Subitem</a></div>
                                </li>
                                <li>
                                    <div class="menu-item"><a href="#">Subitem</a></div>
                                </li>
                                <li>
                                    <div class="menu-item"><a href="#">Subitem</a></div>
                                </li>
                            </ul>
                        </div>
                        <div class="submenu menu" data-menu="5">
                            <div class="submenu-back">
                                <div class="menu-item">
                                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  x="0px" y="0px" width="10px" height="10px" viewBox="0 0 451.847 451.847" style="enable-background:new 0 0 451.847 451.847;" xml:space="preserve" class="spt">
<g>
	<path d="M97.141,225.92c0-8.095,3.091-16.192,9.259-22.366L300.689,9.27c12.359-12.359,32.397-12.359,44.751,0   c12.354,12.354,12.354,32.388,0,44.748L173.525,225.92l171.903,171.909c12.354,12.354,12.354,32.391,0,44.744   c-12.354,12.365-32.386,12.365-44.745,0l-194.29-194.281C100.226,242.115,97.141,234.018,97.141,225.92z"></path>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
                                  <a href="#" class="menu-back">BACK</a></div>
                            </div>
                            <ul>
                                <li>
                                    <div class="menu-item"><a href="#">Subitem</a></div>
                                </li>
                                <li>
                                    <div class="menu-item"><a href="#">Subitem</a></div>
                                </li>
                                <li>
                                    <div class="menu-item"><a href="#">Subitem</a></div>
                                </li>
                            </ul>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="conteudo">
        <div class="conteudo-inner">
            <div class="conteudo-wrapper">
                <div class="conteudo-titleSection">
                    <strong class="conteudo-title">Title section</strong>
                    <div class="breadcrumb">
                        <a href="#" class="breadcrumb-link">Bread</a>
                        <span class="breadcrumb-separator">.</span>
                        <a href="#" class="breadcrumb-link">Bread 2</a>
                        <span class="breadcrumb-separator">.</span>
                        <a href="#" class="breadcrumb-link breadcrumb-link_ativo">Active Section</a>
                    </div>
                </div>
                <div class="conteudo-box">
                    <div class="conteudo-boxInner">
                        Lorem ipsum donec sidenuc
                        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS

              
                /*fonts*/
@import url('https://fonts.googleapis.com/css?family=Roboto:400,300,500,700');
/**/

.clear{clear:both !important; float:none !important; margin:0px !important; padding:0px !important; height:0px !important; width:0px !important}
.clearfix:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix {display: inline-block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}

img { display:block;}

.oldBrowser{display: none !important}
.center{width:960px; margin:0 auto; text-align:left; position: relative;}
.inner-center{ padding: 0 10px;}
body { background:#f3f4f5; font-family: 'Roboto', sans-serif; font-size:15px; line-height:20px; color:#333333;  font-weight: 300;}

a{ text-decoration:none;}
.brand-icon{ color:#ffffff; font-weight:bold;}

.box-right{ float: right;}
button, input[type="submit"]{
    background:none;
    border: none;
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
}

.header-controlMenuButton svg{ fill:#ffffff;}

#hit-menu{ position: fixed; left: 0; top: 0; z-index: 10000; width: 20px; height: 100%; background-color: transparent; display: none;}

/*HEADER*/
#header{ position: fixed; height: 110px; width: 100%; left:0; top: 0; z-index: 10;}
.header-topo{ background-color: #008658; height: 60px; position: relative;}

#header .brand-icon{ position: absolute; top: 50%; right: 50%; width: 80px; height: 24px; margin: -12px -40px 0 0;}
.header-controlMenuButton{ position: absolute; left: 200px; height: 60px; width: 60px; background-color: #00784f; text-align: center; cursor: pointer;}
.header-controlMenuButton .spt{ display: inline-block;}
.header-controlMenuButton:hover{ background-color: #005a3b;}
.header-search{ width: 260px; float: left; position: absolute; left: 0;}
.header-search .spt{ float: left; margin: 15px 25px 0 17px;}
.header-search input{ float: left;font-family: 'Roboto', sans-serif; color: #9a9a9a; font-size: 14px; margin-top: 15px; border: none;}
.header-menu{ height: 50px;}
#header .menu-modulos{ float: left; width: 100%; height: 50px;}
#header .menu-modulos .menu-modulosInner{ padding: 0 120px 0 280px;}
#header .menu-modulos .menu-modulosWrapper{ overflow-x: scroll;}
#header .menu-modulos .menu-modulosBt{ position: relative; display: inline-block; padding: 0 10px; margin: 0 5px;}
#header .menu-modulos .menu-modulosBt-mainBt{ display: block; font-weight: normal; text-align: center; padding: 15px 0; font-size: 14px; color: #848484;}
#header .menu-modulos .menu-modulosFeed{ position: absolute; width: 100%; bottom: 0; height: 2px; left: 0; display: none; background-color: #008658;}
#header .menu-modulos .menu-modulosBt:hover .menu-modulosFeed{ display: block;}
#header .menu-modulos .menu-modulosBt:hover .menu-modulosBt-mainBt{ color: #333333;}

.header-nomeEmpresa{  margin: 17px 0 0 20px; float: left; color: #ffffff; font-size: 20px; line-height: 25px; font-weight: 300;}
.header-nomeEmpresa_mobile{ margin: 20px 0 0 5px; display: none;}

.button-menu-mobile{ height: 80px; display: none; opacity: 0; cursor: pointer;}
.button-menu-mobile{ height: 60px;float: left; width: 40px; margin-left: 10px; display: none;}
.button-menu-mobile .box-stripes{ position: relative; width: 20px;}
.button-menu-mobile span{ position: absolute; width: 100%; background-color: #ffffff; height: 2px; top: 0;}
#header .stripe-top{ margin-top: -6px;}
#header .stripe-bottom{ margin-top: 6px;}

#header .header-inner{ /*margin-left: 260px; */position: relative; background-color: #ffffff; border-bottom: 1px solid #e4e5e6;
    -webkit-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.1);
    -moz-box-shadow:    0px 2px 2px 0px rgba(50, 50, 50, 0.1);
    box-shadow:         0px 2px 2px 0px rgba(50, 50, 50, 0.1);}


/*------*/

/*MENU*/
#menu{ position: fixed; top: 0; left: 0; height: 100%; z-index: 100; background-color: #ffffff;width: 260px;}
#menu .menu-wrapper-inner{ padding-top: 110px;}
#menu .menu-wrapper{ position: relative; overflow-x: hidden;}
#menu .menu{ width: 260px; float: left;}
#menu .menu-item{ position: relative;}
#menu .menu-item:hover{ background-color: #fafafa;}
#menu .menu-item a{  padding: 15px 30px;font-size: 14px; line-height: 18px; font-weight: normal; color: #333333; display: block;}
#menu .menu-item .spt{ position: absolute; right: 25px; top: 50%; margin-top: -5px;}
#menu .menu-slider{ position: relative; width: 2000px; left:0;}
#menu .submenu{ display: none;}
#menu .submenu-back{ border-bottom: 1px solid #eeeeee;}
#menu .submenu-back .spt{ left: 25px;}
#menu .submenu-back a{ padding-left: 40px; font-size: 12px;}
.header-menu{position: relative;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    width: auto;
    white-space: nowrap;}
.menu-box{overflow: auto; position: relative; height: 100%;}

.menu-header{ position: absolute; z-index: 10; border-bottom: 1px solid #e4e5e6; width: 100%; background-color: #ffffff;
    -webkit-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.1);
    -moz-box-shadow:    0px 2px 2px 0px rgba(50, 50, 50, 0.1);
    box-shadow:         0px 2px 2px 0px rgba(50, 50, 50, 0.1);
}

.shape-remove-shadow_white{ position: absolute; background: #ffffff; height: 50px; width:10px; right: -3px; top: 60px;}
.shape-remove-shadow_green{ position: absolute; background: #008658; height: 60px; width:10px; right: -3px; top: 0;}

.menu-mobile-background{ opacity: 0; display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 100; background:rgba(0,0,0,.8);}

/*menu fechado*/

/********/
#conteudo{ width: 100%; position: relative;}
#conteudo .conteudo-inner{ padding: 110px 0 0 260px;}
#conteudo .conteudo-wrapper{ padding: 40px;}
#conteudo .conteudo-box{ background-color: #ffffff; border-bottom: 1px solid #e4e5e6;
    -webkit-box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.1);
    -moz-box-shadow:    0px 2px 8px 0px rgba(50, 50, 50, 0.1);
    box-shadow:         0px 2px 8px 0px rgba(50, 50, 50, 0.1);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;}

#conteudo .conteudo-title{ font-size: 24px; line-height: 28px; color: #008658; font-weight: 300; margin-bottom: 5px; display: block;}
#conteudo .conteudo-titleSection{ margin-bottom: 15px;}
#conteudo .breadcrumb-link{ color: #929394; display: inline-block; font-size: 14px;}
#conteudo .breadcrumb-separator{ display: inline-block;}
#conteudo .breadcrumb-link_ativo{ color: #afb0b1;}
#conteudo .conteudo-boxInner{ padding: 20px 20px 100px 20px;}

.button-actions{ position: fixed; bottom: 0; right: 40px; cursor: pointer;}
.borderradius .button-actions{ background-color: #008658; width: 56px; height: 56px; bottom: 20px; right: 60px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow:    0px 4px 10px 0px rgba(0, 0, 0, 0.6);
    box-shadow:         0px 4px 10px 0px rgba(0, 0, 0, 0.6);}
.borderradius .button-actions .spt{ display: none;}
.borderradius .button-actions .plus{position: absolute; width: 14px; height: 14px; top:50%; left: 50%; margin: -7px 0 0 -7px;}
.borderradius .button-actions .plus .vert{ position: absolute; height: 100%; width: 2px; background-color: #ffffff; left: 6px; top: 0;}
.borderradius .button-actions .plus .hor{position: absolute; width: 100%; height: 2px; background-color: #ffffff; left: 0; top: 6px;}
.borderradius .button-actions:hover{ background-color:#006945;}

.borderradius .button-actions.active .vert{ display: none;}

.boxWrapperActions{ position: fixed; bottom: 90px; right: 80px;}
.boxWrapperActions-wrapper{ display: none;}
.boxWrapperActions-box{ border: 1px solid #bebebe;}
.boxWrapperActions .boxWrapperActions-box{ background-color: #ffffff; border-color:#e6e6e6; min-width: 130px;
    -webkit-box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:    0px 6px 30px 0px rgba(0, 0, 0, 0.3);
    box-shadow:         0px 6px 30px 0px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;}

.boxWrapperActions .boxWrapperActions-title{ border-bottom: 1px solid #dcdcdc; padding: 12px 20px; font-weight: 400;}
.boxWrapperActions ul{ padding: 15px 0;}
.boxWrapperActions ul li:hover{ background-color: #eeeeee;}
.boxWrapperActions ul li a{ padding: 5px 20px; display: block;}

.boxOptions{ position: absolute; right: 0; top: 0; padding-right: 10px;}
.boxOptions .boxOptions-item_language{ float: left;}
.boxOptions .boxOptions-item_user{ float: left;}
.boxOptions .boxOptions-button{ height: 50px; padding: 0 10px; cursor: pointer;}
.boxOptions .boxOptions-button.active,
.boxOptions .boxOptions-button:hover{ background-color: #ececec;}
.boxOptions .boxOptions-item{ position: relative;}
.boxOptionsWrapper{ position: absolute; right: 0; top: 60px;}
.boxOptionsWrapper-container{ display: none;}
.boxOptionsWrapper-content{ background-color: #ffffff; border-color:#e6e6e6; min-width: 130px;
    -webkit-box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:    0px 6px 30px 0px rgba(0, 0, 0, 0.3);
    box-shadow:         0px 6px 30px 0px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;}
.boxOptionsWrapper-content ul li:hover{ background-color: #eeeeee;}
.boxOptionsWrapper-content ul li a{ padding: 5px 20px; display: block; font-size: 14px;}

@media screen and (max-width: 768px) {
    #header .brand-icon{ right: 0; margin-right: 20px;}
    #header .menu-modulos .menu-modulosWrapper{ margin-left: 0 !important;  }

    #menu{ z-index: 999;}

    #menu{ left: -260px; opacity: 0;}
    #hit-menu{ display: block;}
    #header .button-menu-mobile{ display: block; opacity: 1;}
    #header .menu-modulos .menu-modulosInner{ padding: 0;}

    .shape-remove-shadow_green,
    .shape-remove-shadow_white{ display: none;}
    #conteudo .conteudo-inner{ padding-left: 0 !important;}

    #conteudo .conteudo-wrapper{ padding: 20px 10px;}
    .header-nomeEmpresa_mobile{ font-size: 14px; }

    .borderradius .button-actions{ right: 30px; width: 40px; height: 40px;}
    .borderradius .boxWrapperActions{bottom: 60px; right: 80px;}

}





/****************************/
/*RESPOSIVE*/
/****************************/

.resp-box{ float:left; width: 100%;}

.col-1
{ width:100%;}

.col-2,
.col-1-2,
.col-5-10,
.col-4-8,
.col-3-6,
.col-2-4
{ width:50%;}

.col-3,
.col-1-3,
.col-3-9,
.col-2-6
{ width:33.3333%;}

.col-4,
.col-1-4,
.col-2-8
{ width:25%;}

.col-5,
.col-1-5,
.col-2-10
{ width:20%;}

.col-6,
.col-1-6
{ width:16.6666%;}

.col-7,
.col-1-7
{ width:14.2857%;}

.col-8,
.col-1-8
{ width:12.5%;}

.col-9,
.col-1-9
{ width:11.1111%;}

.col-10,
.col-1-10
{ width:10%;}

.col-2-3{ width:66.6666%;}

.col-2-5{ width:40%;}

.col-2-7{ width:28.5714%;}

.col-2-9{ width:22.2222%;}

.col-3-4{ width:75%;}
.col-3-5{ width:60%;}

.col-3-7{ width:42.8571%;}
.col-3-8{ width:37.5%;}

.col-3-10{ width:30%;}

.col-4-5{ width:80%;}
.col-4-6{ width:66.6666%;}
.col-4-7{ width:57.1428%;}

.col-4-9{ width:44.4444%;}
.col-4-10{ width:40%;}

.col-5-6{ width:83.3333%;}
.col-5-7{ width:71.4285%;}
.col-5-8{ width:62.5%;}
.col-5-9{ width:55.5555%;}

.col-6-7{ width:82.7142%;}
.col-6-8{ width:75%;}
.col-6-9{ width:66.6666%;}
.col-6-10{ width:60%;}

.col-7-8{ width:87.5%;}
.col-7-9{ width:77.7777%;}
.col-7-10{ width:70%;}

.col-8-9{ width:88.8888%;}
.col-8-10{ width:80%;}

.col-9-10{ width:90%;}

/*--------------	Media queries	------------------*/
/*
	* < 568px
*/
@media screen and (max-width: 35.5em) {
.col-xs-1
{ width:100% !important;}

.col-xs-hide{ display:none !important;}
.col-xs-show{ display:block !important;}

.col-xs-2,
.col-xs-1-2,
.col-xs-5-10,
.col-xs-4-8,
.col-xs-3-6,
.col-xs-2-4
{ width:50%;}

.col-xs-3,
.col-xs-1-3,
.col-xs-3-9,
.col-xs-2-6
{ width:33.3333%;}

.col-xs-4,
.col-xs-1-4,
.col-xs-2-8
{ width:25%;}

.col-xs-5,
.col-xs-1-5,
.col-xs-2-10
{ width:20%;}

.col-xs-6,
.col-xs-1-6
{ width:16.6666%;}

.col-xs-7,
.col-xs-1-7
{ width:14.2857%;}

.col-xs-8,
.col-xs-1-8
{ width:12.5%;}

.col-xs-9,
.col-xs-1-9
{ width:11.1111%;}

.col-xs-10,
.col-xs-1-10
{ width:10%;}

.col-xs-2-3{ width:66.6666%;}

.col-xs-2-5{ width:40%;}

.col-xs-2-7{ width:28.5714%;}

.col-xs-2-9{ width:22.2222%;}

.col-xs-3-4{ width:75%;}
.col-xs-3-5{ width:60%;}

.col-xs-3-7{ width:42.8571%;}
.col-xs-3-8{ width:37.5%;}

.col-xs-3-10{ width:30%;}

.col-xs-4-5{ width:80%;}
.col-xs-4-6{ width:66.6666%;}
.col-xs-4-7{ width:57.1428%;}

.col-xs-4-9{ width:44.4444%;}
.col-xs-4-10{ width:40%;}

.col-xs-5-6{ width:83.3333%;}
.col-xs-5-7{ width:71.4285%;}
.col-xs-5-8{ width:62.5%;}
.col-xs-5-9{ width:55.5555%;}

.col-xs-6-7{ width:82.7142%;}
.col-xs-6-8{ width:75%;}
.col-xs-6-9{ width:66.6666%;}
.col-xs-6-10{ width:60%;}

.col-xs-7-8{ width:87.5%;}
.col-xs-7-9{ width:77.7777%;}
.col-xs-7-10{ width:70%;}

.col-xs-8-9{ width:88.8888%;}
.col-xs-8-10{ width:80%;}

.col-xs-9-10{ width:90%;}
}

/*
	* > 568px e < 768
*/
@media (min-width: 35.5em) and (max-width: 48em) {
.col-sm-1
{ width:100% !important;}

.col-sm-hide{ display:none !important;}
.col-sm-show{ display:block !important;}

.col-sm-2,
.col-sm-1-2,
.col-sm-5-10,
.col-sm-4-8,
.col-sm-3-6,
.col-sm-2-4
{ width:50%;}

.col-sm-3,
.col-sm-1-3,
.col-sm-3-9,
.col-sm-2-6
{ width:33.3333%;}

.col-sm-4,
.col-sm-1-4,
.col-sm-2-8
{ width:25%;}

.col-sm-5,
.col-sm-1-5,
.col-sm-2-10
{ width:20%;}

.col-sm-6,
.col-sm-1-6
{ width:16.6666%;}

.col-sm-7,
.col-sm-1-7
{ width:14.2857%;}

.col-sm-8,
.col-sm-1-8
{ width:12.5%;}

.col-sm-9,
.col-sm-1-9
{ width:11.1111%;}

.col-sm-10,
.col-sm-1-10
{ width:10%;}

.col-sm-2-3{ width:66.6666%;}

.col-sm-2-5{ width:40%;}

.col-sm-2-7{ width:28.5714%;}

.col-sm-2-9{ width:22.2222%;}

.col-sm-3-4{ width:75%;}
.col-sm-3-5{ width:60%;}

.col-sm-3-7{ width:42.8571%;}
.col-sm-3-8{ width:37.5%;}

.col-sm-3-10{ width:30%;}

.col-sm-4-5{ width:80%;}
.col-sm-4-6{ width:66.6666%;}
.col-sm-4-7{ width:57.1428%;}

.col-sm-4-9{ width:44.4444%;}
.col-sm-4-10{ width:40%;}

.col-sm-5-6{ width:83.3333%;}
.col-sm-5-7{ width:71.4285%;}
.col-sm-5-8{ width:62.5%;}
.col-sm-5-9{ width:55.5555%;}

.col-sm-6-7{ width:82.7142%;}
.col-sm-6-8{ width:75%;}
.col-sm-6-9{ width:66.6666%;}
.col-sm-6-10{ width:60%;}

.col-sm-7-8{ width:87.5%;}
.col-sm-7-9{ width:77.7777%;}
.col-sm-7-10{ width:70%;}

.col-sm-8-9{ width:88.8888%;}
.col-sm-8-10{ width:80%;}

.col-sm-9-10{ width:90%;}
}

/*
	* > 768px e < 1024px
*/
@media (min-width: 48em) and (max-width: 64em) {
.col-md-1
{ width:100% !important;}

.col-md-hide{ display:none !important;}
.col-md-show{ display:block !important;}

.col-md-2,
.col-md-1-2,
.col-md-5-10,
.col-md-4-8,
.col-md-3-6,
.col-md-2-4
{ width:50%;}

.col-md-3,
.col-md-1-3,
.col-md-3-9,
.col-md-2-6
{ width:33.3333%;}

.col-md-4,
.col-md-1-4,
.col-md-2-8
{ width:25%;}

.col-md-5,
.col-md-1-5,
.col-md-2-10
{ width:20%;}

.col-md-6,
.col-md-1-6
{ width:16.6666%;}

.col-md-7,
.col-md-1-7
{ width:14.2857%;}

.col-md-8,
.col-md-1-8
{ width:12.5%;}

.col-md-9,
.col-md-1-9
{ width:11.1111%;}

.col-md-10,
.col-md-1-10
{ width:10%;}

.col-md-2-3{ width:66.6666%;}

.col-md-2-5{ width:40%;}

.col-md-2-7{ width:28.5714%;}

.col-md-2-9{ width:22.2222%;}

.col-md-3-4{ width:75%;}
.col-md-3-5{ width:60%;}

.col-md-3-7{ width:42.8571%;}
.col-md-3-8{ width:37.5%;}

.col-md-3-10{ width:30%;}

.col-md-4-5{ width:80%;}
.col-md-4-6{ width:66.6666%;}
.col-md-4-7{ width:57.1428%;}

.col-md-4-9{ width:44.4444%;}
.col-md-4-10{ width:40%;}

.col-md-5-6{ width:83.3333%;}
.col-md-5-7{ width:71.4285%;}
.col-md-5-8{ width:62.5%;}
.col-md-5-9{ width:55.5555%;}

.col-md-6-7{ width:82.7142%;}
.col-md-6-8{ width:75%;}
.col-md-6-9{ width:66.6666%;}
.col-md-6-10{ width:60%;}

.col-md-7-8{ width:87.5%;}
.col-md-7-9{ width:77.7777%;}
.col-md-7-10{ width:70%;}

.col-md-8-9{ width:88.8888%;}
.col-md-8-10{ width:80%;}

.col-md-9-10{ width:90%;}
}

/*
	* 1024px e 1280px
*/

@media (min-width: 64em) and (max-width: 80em) {
.col-lg-1
{ width:100% !important;}

.col-lg-hide{ display:none !important;}
.col-lg-show{ display:block !important;}

.col-lg-2,
.col-lg-1-2,
.col-lg-5-10,
.col-lg-4-8,
.col-lg-3-6,
.col-lg-2-4
{ width:50%;}

.col-lg-3,
.col-lg-1-3,
.col-lg-3-9,
.col-lg-2-6
{ width:33.3333%;}

.col-lg-4,
.col-lg-1-4,
.col-lg-2-8
{ width:25%;}

.col-lg-5,
.col-lg-1-5,
.col-lg-2-10
{ width:20%;}

.col-lg-6,
.col-lg-1-6
{ width:16.6666%;}

.col-lg-7,
.col-lg-1-7
{ width:14.2857%;}

.col-lg-8,
.col-lg-1-8
{ width:12.5%;}

.col-lg-9,
.col-lg-1-9
{ width:11.1111%;}

.col-lg-10,
.col-lg-1-10
{ width:10%;}

.col-lg-2-3{ width:66.6666%;}

.col-lg-2-5{ width:40%;}

.col-lg-2-7{ width:28.5714%;}

.col-lg-2-9{ width:22.2222%;}

.col-lg-3-4{ width:75%;}
.col-lg-3-5{ width:60%;}

.col-lg-3-7{ width:42.8571%;}
.col-lg-3-8{ width:37.5%;}

.col-lg-3-10{ width:30%;}

.col-lg-4-5{ width:80%;}
.col-lg-4-6{ width:66.6666%;}
.col-lg-4-7{ width:57.1428%;}

.col-lg-4-9{ width:44.4444%;}
.col-lg-4-10{ width:40%;}

.col-lg-5-6{ width:83.3333%;}
.col-lg-5-7{ width:71.4285%;}
.col-lg-5-8{ width:62.5%;}
.col-lg-5-9{ width:55.5555%;}

.col-lg-6-7{ width:82.7142%;}
.col-lg-6-8{ width:75%;}
.col-lg-6-9{ width:66.6666%;}
.col-lg-6-10{ width:60%;}

.col-lg-7-8{ width:87.5%;}
.col-lg-7-9{ width:77.7777%;}
.col-lg-7-10{ width:70%;}

.col-lg-8-9{ width:88.8888%;}
.col-lg-8-10{ width:80%;}

.col-lg-9-10{ width:90%;}
}

/*
	* ≥ 1280px
*/
@media (min-width: 80em){
.col-xl-1
{ width:100% !important;}

.col-xl-hide{ display:none !important;}
.col-xl-show{ display:block !important;}

.col-xl-2,
.col-xl-1-2,
.col-xl-5-10,
.col-xl-4-8,
.col-xl-3-6,
.col-xl-2-4
{ width:50%;}

.col-xl-3,
.col-xl-1-3,
.col-xl-3-9,
.col-xl-2-6
{ width:33.3333%;}

.col-xl-4,
.col-xl-1-4,
.col-xl-2-8
{ width:25%;}

.col-xl-5,
.col-xl-1-5,
.col-xl-2-10
{ width:20%;}

.col-xl-6,
.col-xl-1-6
{ width:16.6666%;}

.col-xl-7,
.col-xl-1-7
{ width:14.2857%;}

.col-xl-8,
.col-xl-1-8
{ width:12.5%;}

.col-xl-9,
.col-xl-1-9
{ width:11.1111%;}

.col-xl-10,
.col-xl-1-10
{ width:10%;}

.col-xl-2-3{ width:66.6666%;}

.col-xl-2-5{ width:40%;}

.col-xl-2-7{ width:28.5714%;}

.col-xl-2-9{ width:22.2222%;}

.col-xl-3-4{ width:75%;}
.col-xl-3-5{ width:60%;}

.col-xl-3-7{ width:42.8571%;}
.col-xl-3-8{ width:37.5%;}

.col-xl-3-10{ width:30%;}

.col-xl-4-5{ width:80%;}
.col-xl-4-6{ width:66.6666%;}
.col-xl-4-7{ width:57.1428%;}

.col-xl-4-9{ width:44.4444%;}
.col-xl-4-10{ width:40%;}

.col-xl-5-6{ width:83.3333%;}
.col-xl-5-7{ width:71.4285%;}
.col-xl-5-8{ width:62.5%;}
.col-xl-5-9{ width:55.5555%;}

.col-xl-6-7{ width:82.7142%;}
.col-xl-6-8{ width:75%;}
.col-xl-6-9{ width:66.6666%;}
.col-xl-6-10{ width:60%;}

.col-xl-7-8{ width:87.5%;}
.col-xl-7-9{ width:77.7777%;}
.col-xl-7-10{ width:70%;}

.col-xl-8-9{ width:88.8888%;}
.col-xl-8-10{ width:80%;}

.col-xl-9-10{ width:90%;}
}

JS

              
                //Resize browser width to see what happens
//----------------------------------------------------------
var MAX_WIDTH = 1000;
var MENU_CLASS = "menu-hide";
var menu_width;
var statusHitMenu = false;
var not_loaded = false;
var statusMenu = "open";//checa se o menu está aberto ou não
var CLASS_MENU_RETRAIDO = "menu-retraido";
//----------------------------------------------------------
jQuery(document).ready(
function ()
{
    initMenu();
    $(window).resize(resizeWindow);
    resizeWindow();

    //----------------------------
    $(".button-actions").click(function(){
        if($(this).hasClass('active'))
        {
            $(".boxWrapperActions-wrapper").removeClass('active');
            $(".boxWrapperActions-wrapper").stop(true,true).slideUp(300);
            $(".button-actions").removeClass('active');
        }
        else
        {
            $(".boxWrapperActions-wrapper").addClass('active');
            $(".boxWrapperActions-wrapper").stop(true,true).slideDown(300);
            $(".button-actions").addClass('active');
        }

        return false;
    });

    $("#bt_item_user").click(function(){
        if($(this).hasClass('active'))
        {
            $("#bt_item_user").removeClass('active');
            $(".boxOptions-item_user .boxOptionsWrapper-container").stop(true,true).fadeOut(300);
        }
        else
        {
            $("#bt_item_user").addClass('active');
            $(".boxOptions-item_user .boxOptionsWrapper-container").stop(true,true).fadeIn(300);
        }

        return false;
    });
});



function retrairMenu ()
{
    var _timer = 300;

    $('body').addClass(CLASS_MENU_RETRAIDO);
    var _anim_01 = {left:-280,opacity:0};

    $("#menu").stop(true,true).animate(_anim_01,_timer);
    $("#hit-menu").stop(true,true).show();
    $('#header .button-menu-mobile').stop(true,true).show();
    $('#header .button-menu-mobile').stop(true,true).animate({opacity:1},_timer);
    $("#header .menu-modulos .menu-modulosInner").stop(true,true).animate({paddingLeft:0},_timer);
    $("#conteudo .conteudo-inner").stop(true,true).animate({paddingLeft:0},_timer);

    hideBackgroundMenuMobile();
}

function expandirMenu ()
{
    $('body').removeClass(CLASS_MENU_RETRAIDO);
    var _anim_01 = {left:0,opacity:1};

    $("#menu").stop(true,true).animate(_anim_01);
    $("#hit-menu").stop(true,true).hide();
    $("#conteudo .conteudo-inner").stop(true,true).animate({paddingLeft:260});

    $('#header .button-menu-mobile').stop(true,true).animate({opacity:0},function(){
        $('#header .button-menu-mobile').stop(true,true).hide();
    });
    $("#header .menu-modulos .menu-modulosInner").stop(true,true).animate({paddingLeft:280});

    if(($(window).width()<=768))
    {
        showBackgroundMenuMobile ();
    }

}

function resizeWindow ()
{
    var _w = $(window).width();


    if(_w > MAX_WIDTH)//expandir menu
    {
        if($('body').hasClass(CLASS_MENU_RETRAIDO))
        {
            if(statusMenu != "closed")
            {
                expandirMenu ();
            }
        }
        if(statusMenu == "open_by_menu_mobile")
        {
            statusMenu = "open";
        }
    }
    else//retrair menu
    {
        if(!$('body').hasClass(CLASS_MENU_RETRAIDO))
        {
            if(statusMenu != "open_by_menu_mobile")
            {
                retrairMenu ();
            }
        }
    }

    if(_w >= 768)
    {
        if($('.menu-mobile-background').hasClass("on"))
        {
            hideBackgroundMenuMobile ();
        }
    }
    else
    {
        if(statusMenu == "open_by_menu_mobile")
        {
           showBackgroundMenuMobile();
        }
    }
}

function initMenu ()
{
    menu_width = $("#menu .menu").width();

    $(".menu-back").click(function(){

        var _pos = $(".menu-slider").position().left + menu_width;
        var _obj = $(this).closest(".submenu");

        $(".menu-slider").stop().animate({left: _pos}, 300, function ()
        {
            _obj.hide();
        });

        return false;
    });

    $(".menu-anchor").click(function(){
        var _d = $(this).data('menu');
        $(".submenu").each(function(){

            var _d_check = $(this).data('menu');

            if(_d_check == _d)
            {
                $(this).show();
                var _pos = $(".menu-slider").position().left - menu_width;

                $(".menu-slider").stop(true,true).animate({left: _pos}, 300);
                return false;
            }
        });

        return false;
    });

   $(".header-controlMenuButton").click(function()
    {
        statusMenu = "closed";
        retrairMenu ();
        return false;
    });

    $(".button-menu-mobile").click(function(){
        statusMenu = "open_by_menu_mobile";
        expandirMenu();
        return false;
    });

    $(".menu-mobile-background").mousedown(function(){
        retrairMenu();
    });

    $('#hit-menu').mouseenter(function(){
        statusHitMenu = true;
        expandirMenu();
    });

    $('#menu').mouseleave(function(){
        if(statusHitMenu)
        {
            statusHitMenu = false;
            retrairMenu();
        }
    });

}

function hideBackgroundMenuMobile ()
{
    $('.menu-mobile-background').removeClass("on");
    $('.menu-mobile-background').stop(true,true).animate({opacity:0},function(){
        $('.menu-mobile-background').stop(true,true).hide();
        $('.menu-mobile-background').removeAttr('style');
    });
}

function showBackgroundMenuMobile ()
{
    $('.menu-mobile-background').addClass("on");
    $('.menu-mobile-background').stop(true,true).show();
    $('.menu-mobile-background').stop(true,true).animate({opacity:1});
}

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions