Produto
PRODUTO
Global Navigation
O elemento de navegação global permite a navegação pelas seções de primeiro nível da plataforma Stoodi, além de exibir os componentes de busca e avatar. O componente de navegação fica sempre posicionado na extremidade esquerda da página, podendo variar entre os estados colapsado e aberto.
Desktop
Menu em seus estados de collapsed, expanded e segundo nível 
Mobile
Menu 
Código
HTML 
Exibir código
Copiar código
Exibir código
<div class="global-navigation collapsed">
<div class="header-mobile">
<a href="#" class="toggle-navigation"><img src="/img/toggle-header-mobile.svg"></a>
<div class="search-mobile"><input type="text"><img src="/img/search-icon-nav.svg"></div>
</div>
<div class="content-nav">
<div class="toggle-navigation"><a href="#"><img src="/img/toggle.svg"></a></div>
<div class="logo"><img src="/img/logotipo.svg"></div>
<div class="avatar-name"><a href="#" class="toggle-profile"><img src="/img/avatar-example.png"><span>
Aleksei Salles
<i></i></span></a>
</div>
<div class="level-2">
<a href="#" class="back"><i class="icon"></i>
Voltar
</a>
<ul>
<li>
<a href="#">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd" transform="translate(2 2)">
<path id="strokes" stroke="#9B9B9B" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7.09 7a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
<circle id="strokes" cx="10" cy="15" r="1" fill="#9B9B9B"></circle>
<circle id="strokes" cx="10" cy="10" r="10" stroke="#9B9B9B" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle>
</g>
</svg>
</i>
Ajuda
</a>
</li>
<li>
<a href="#">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="a15" d="M4.581 19.419l3.803-1.268a1 1 0 0 1 .767.056A7.382 7.382 0 0 0 12.5 19a7.502 7.502 0 0 0 6.707-4.15A7.38 7.38 0 0 0 20 11.502l.002-.448C19.792 7.248 16.752 4.21 13 4h-.503a7.385 7.385 0 0 0-3.35.795A7.5 7.5 0 0 0 5 11.503a7.38 7.38 0 0 0 .793 3.346 1 1 0 0 1 .056.767L4.58 19.42zM22 11.499a9.376 9.376 0 0 1-1.005 4.248A9.5 9.5 0 0 1 12.503 21a9.38 9.38 0 0 1-3.87-.824L3.317 21.95a1 1 0 0 1-1.265-1.265l1.773-5.318A9.498 9.498 0 0 1 8.249 3.007 9.377 9.377 0 0 1 12.5 2l.555.002C17.88 2.268 21.732 6.12 22 11v.499z"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b15" fill="#fff">
<use xlink:href="#a15"></use>
</mask>
<use id="icon-layer" fill="#9B9B9B" fill-rule="nonzero" xlink:href="#a15"></use>
<path d="M0 0h24v24H0z" mask="url(#b15)"></path>
<g id="icon" fill="#9B9B9B" mask="url(#b15)">
<path d="M0 0h24v24H0z"></path>
</g>
</g>
</svg>
</i>
Fale conosco
</a>
</li>
<li>
<a href="#">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="a14" d="M21 21a1 1 0 0 1-2 0v-2a3 3 0 0 0-3-3H8a3 3 0 0 0-3 3v2a1 1 0 0 1-2 0v-2a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v2zm-9-9a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b14" fill="#fff">
<use xlink:href="#a14"></use>
</mask>
<use id="icon-layer" fill="#9B9B9B" fill-rule="nonzero" xlink:href="#a14"></use>
<path d="M0 0h24v24H0z" mask="url(#b14)"></path>
<g id="icon" fill="#9B9B9B" mask="url(#b14)">
<path d="M0 0h24v24H0z"></path>
</g>
</g>
</svg>
</i>
Editar dados
</a>
</li>
<li>
<a href="#">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="a12" d="M10 21a1 1 0 0 1 0 2H5a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h5a1 1 0 0 1 0 2H5a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h5zm8.586-8H9a1 1 0 0 1 0-2h9.586l-2.293-2.293a1 1 0 1 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L18.586 13z"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b12" fill="#fff">
<use xlink:href="#a12"></use>
</mask>
<use id="icon-layer" fill="#9B9B9B" fill-rule="nonzero" xlink:href="#a12"></use>
<path d="M0 0h24v24H0z" mask="url(#b12)"></path>
<g id="icon" fill="#9B9B9B" mask="url(#b12)">
<path d="M0 0h24v24H0z"></path>
</g>
</g>
</svg>
</i>
Sair
</a>
</li>
</ul>
</div>
<div class="search-global-navigation">
<div class="text-field"><input type="text" placeholder=" " class="text-input"><label>Buscar</label><span class="icon"><img src="/img/search-icon-nav.svg"></span></div>
</div>
<ul class="list-global-navigation level-1">
<li>
<a href="#">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="a1" d="M11.553 1.106a1 1 0 0 1 .894 0l10 5a1 1 0 0 1 0 1.788l-10 5a1 1 0 0 1-.894 0l-10-5a1 1 0 0 1 0-1.788l10-5zM12 3.118L4.236 7 12 10.882 19.764 7 12 3.118zm0 17.764l9.553-4.776a1 1 0 0 1 .894 1.788l-10 5a1 1 0 0 1-.894 0l-10-5a1 1 0 0 1 .894-1.788L12 20.882zm9.553-9.776a1 1 0 0 1 .894 1.788l-10 5a1 1 0 0 1-.894 0l-10-5a1 1 0 0 1 .894-1.788L12 15.882l9.553-4.776z"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h24v24H0z"></path>
<mask id="b1" fill="#fff">
<use xlink:href="#a1"></use>
</mask>
<use id="icon-layer" fill="#7f7f7f" fill-rule="nonzero" xlink:href="#a1"></use>
<g id="icon" fill="#7f7f7f" mask="url(#b1)">
<path d="M0 0h24v24H0z"></path>
</g>
</g>
</svg>
</i>
Matérias
</a>
</li>
<li>
<a href="#">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="a2" d="M19 3H6.5A1.5 1.5 0 0 0 5 4.5v15A1.5 1.5 0 0 0 6.5 21H19V3zM6.5 1H20a1 1 0 0 1 1 1v20a1 1 0 0 1-1 1H6.5A3.5 3.5 0 0 1 3 19.5v-15A3.5 3.5 0 0 1 6.5 1zM5 19.5a1 1 0 0 1-2 0A3.5 3.5 0 0 1 6.5 16H20a1 1 0 0 1 0 2H6.5A1.5 1.5 0 0 0 5 19.5z"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b2" fill="#fff">
<use xlink:href="#a2"></use>
</mask>
<use id="icon-layer" fill="#9B9B9B" fill-rule="nonzero" xlink:href="#a2"></use>
<path d="M0 0h24v24H0z" mask="url(#b2)"></path>
<g id="icon" fill="#9B9B9B" mask="url(#b2)">
<path d="M0 0h24v24H0z"></path>
</g>
</g>
</svg>
</i>
Plano de estudos
</a>
</li>
<li>
<a href="#">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="a3" d="M19 12a1 1 0 0 1 2 0v7a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3h11a1 1 0 0 1 0 2H4a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7zm-8 .586L21.293 2.293a1 1 0 0 1 1.414 1.414l-11 11a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 1.414-1.414L11 12.586z"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b3" fill="#fff">
<use xlink:href="#a3"></use>
</mask>
<use id="icon-layer" fill-rule="nonzero" xlink:href="#a3"></use>
<path d="M0 0h24v24H0z" mask="url(#b3)"></path>
<g id="icon" fill="#9B9B9B" mask="url(#b3)">
<path d="M0 0h24v24H0z"></path>
</g>
</g>
</svg>
</i>
Correção de redação
</a>
</li>
<li>
<a href="#">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="a4" d="M3 6a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H3zm0-2h11a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3zm14.72 8L22 15.057V8.943L17.72 12zM24 7v10a1 1 0 0 1-1.581.814l-7-5a1 1 0 0 1 0-1.628l7-5A1 1 0 0 1 24 7z"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b4" fill="#fff">
<use xlink:href="#a4"></use>
</mask>
<use id="icon-layer" fill-rule="nonzero" xlink:href="#a4"></use>
<path d="M0 0h24v24H0z" mask="url(#b4)"></path>
<g id="icon" fill="#9B9B9B" mask="url(#b4)">
<path d="M0 0h24v24H0z"></path>
</g>
</g>
</svg>
</i>
Monitorias ao vivo
</a>
</li>
<li>
<a href="#">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="a5" d="M14 1a1 1 0 0 1 .707.293l6 6A1 1 0 0 1 21 8v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h8zm-.414 2H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8.414L13.586 3zM15 7h5a1 1 0 0 1 0 2h-6a1 1 0 0 1-1-1V2a1 1 0 0 1 2 0v5zm1 5a1 1 0 0 1 0 2H8a1 1 0 0 1 0-2h8zm0 4a1 1 0 0 1 0 2H8a1 1 0 0 1 0-2h8zm-6-8a1 1 0 0 1 0 2H8a1 1 0 1 1 0-2h2z"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b5" fill="#fff">
<use xlink:href="#a5"></use>
</mask>
<use id="icon-layer" fill="#9B9B9B" fill-rule="nonzero" xlink:href="#a5"></use>
<path d="M0 0h24v24H0z" mask="url(#b5)"></path>
<g id="icon" fill="#9B9B9B" mask="url(#b5)">
<path d="M0 0h24v24H0z"></path>
</g>
</g>
</svg>
</i>
Simulados
</a>
</li>
<li class="title-divider">
Explorar
</li>
<li>
<a href="#">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="a6" d="M4 4a1 1 0 0 0-1 1v6a9 9 0 1 0 18 0V5a1 1 0 0 0-1-1H4zm0-2h16a3 3 0 0 1 3 3v6c0 6.075-4.925 11-11 11A11 11 0 0 1 1 11V5a3 3 0 0 1 3-3zm11.293 7.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.317.086l-2.6-2a1 1 0 0 1 1.218-1.586l1.906 1.465 3.379-3.38z"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b6" fill="#fff">
<use xlink:href="#a6"></use>
</mask>
<use id="icon-layer" fill="#9B9B9B" fill-rule="nonzero" xlink:href="#a6"></use>
<path d="M0 0h24v24H0z" mask="url(#b6)"></path>
<g id="icon" fill="#9B9B9B" mask="url(#b6)">
<path d="M0 0h24v24H0z"></path>
</g>
</g>
</svg>
</i>
Provas
</a>
</li>
<li>
<a href="#">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="a7" d="M12 23C5.925 23 1 18.075 1 12S5.925 1 12 1s11 4.925 11 11-4.925 11-11 11zm0-2a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM11 9.869v4.262L14.197 12 11 9.869zm-.445-2.701l6 4a1 1 0 0 1 0 1.664l-6 4A1 1 0 0 1 9 16V8a1 1 0 0 1 1.555-.832z"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b7" fill="#fff">
<use xlink:href="#a7"></use>
</mask>
<use id="icon-layer" fill="#9B9B9B" fill-rule="nonzero" xlink:href="#a7"></use>
<path d="M0 0h24v24H0z" mask="url(#b7)"></path>
<g id="icon" fill="#9B9B9B" mask="url(#b7)">
<path d="M0 0h24v24H0z"></path>
</g>
</g>
</svg>
</i>
Vídeoaulas
</a>
</li>
<li>
<a href="#">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="a8" d="M7.3 3h9.4a3 3 0 0 1 2.744 1.784l3.47 7.81A1 1 0 0 1 23 13v5a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3v-5a1 1 0 0 1 .086-.406l3.47-7.81A3 3 0 0 1 7.3 3zm10.316 2.595A1 1 0 0 0 16.7 5H7.3a1 1 0 0 0-.916.595L3 13.212V18a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-4.788l-3.384-7.617zm-2.448 6.85A1 1 0 0 1 16 12h6a1 1 0 0 1 0 2h-5.465l-1.703 2.555A1 1 0 0 1 14 17h-4a1 1 0 0 1-.832-.445L7.465 14H2a1 1 0 0 1 0-2h6a1 1 0 0 1 .832.445L10.535 15h2.93l1.703-2.555z"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b8" fill="#fff">
<use xlink:href="#a8"></use>
</mask>
<use id="icon-layer" fill="#9B9B9B" fill-rule="nonzero" xlink:href="#a8"></use>
<path d="M0 0h24v24H0z" mask="url(#b8)"></path>
<g id="icon" fill="#9B9B9B" mask="url(#b8)">
<path d="M0 0h24v24H0z"></path>
</g>
</g>
</svg>
</i>
Banco de exercícios
</a>
</li>
<li>
<a href="#">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="a9" d="M18 19.057V5a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v14.057l5.419-3.87a1 1 0 0 1 1.162 0L18 19.056zM5.581 21.814A1 1 0 0 1 4 21V5a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v16a1 1 0 0 1-1.581.814L12 17.229l-6.419 4.585z"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b9" fill="#fff">
<use xlink:href="#a9"></use>
</mask>
<use id="icon-layer" fill="#9B9B9B" fill-rule="nonzero" xlink:href="#a9"></use>
<path d="M0 0h24v24H0z" mask="url(#b9)"></path>
<g id="icon" fill="#9B9B9B" mask="url(#b9)">
<path d="M0 0h24v24H0z"></path>
</g>
</g>
</svg>
</i>
Resumos
</a>
</li>
<li>
<a href="#">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="a10" d="M11 13.586V2a1 1 0 0 1 2 0v11.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L11 13.586zM2 17a1 1 0 0 1 2 0v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3a1 1 0 0 1 2 0v3a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-3z"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b10" fill="#fff">
<use xlink:href="#a10"></use>
</mask>
<use id="icon-layer" fill="#9B9B9B" fill-rule="nonzero" xlink:href="#a10"></use>
<path d="M0 0h24v24H0z" mask="url(#b10)"></path>
<g id="icon" fill="#9B9B9B" mask="url(#b10)">
<path d="M0 0h24v24H0z"></path>
</g>
</g>
</svg>
</i>
Downloads
</a>
</li>
</ul>
</div>
</div>
SASS Exibir código
Copiar código
Exibir código
$width: 320px;
$width-mobile: 80%;
.global-navigation {
.header-mobile{
@media(min-width: $MQMobile){
display: none!important;
}
position: fixed;
top: 0;
width: 100%;
left: 0;
height: 64px;
background-color: #ebebeb;
z-index: 999;
a.toggle-navigation {
position: absolute;
left: 20px;
top: 10px;
}
.search-mobile {
position: absolute;
right: 20px;
top: 12px;
input{
-webkit-appearance: none;
height: 40px;
border-radius: 4px;
background-color: transparent;
border: solid 1px transparent;
font-size: 1em;
font-family: Lato;
font-weight: bold;
letter-spacing: normal;
color: #1e2a54;
position: relative;
box-sizing: border-box;
padding: 0 20px;
width: 0;
transition: .4s;
top: 0;
&:focus{
border: solid 1px #9b9b9b;
width:200px;
outline: none;
}
}
img {
width: 23px;
height: 23px;
position: absolute;
right: 10px;
top: 8px;
pointer-events: none;
}
}
}
> .content-nav{
background-color: #f7f7f7;
position: fixed;
left: 0;
height: 100%;
top: 0;
z-index: 999;
padding: 20px;
transition: .4s;
box-sizing: border-box;
width: $width;
@media(max-width: $MQMobile){
width: $width-mobile;
box-shadow: 3px 0 12px 0 rgba(0, 0, 0, 0.4);
}
.toggle-navigation {
position: absolute;
right: -23px;
z-index: 999;
@media(max-width: $MQMobile){
display: none;
}
}
.logo{
width: 100%;
text-align: center;
transition: .4s;
overflow: hidden;
@media(max-width: $MQMobile){
display: none;
}
img {
width: 149px;
max-width: initial;
}
}
.avatar-name {
margin-top: 20px;
float: left;
transition: .4s;
width: 100%;
overflow: hidden;
a{
width: 250px;
float: left;
font-family: Lato;
font-size: 1em;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1.5;
letter-spacing: normal;
color: #1e2a54;
transition: .4s;
white-space: nowrap;
img {
float: left;
width: 50px;
}
span {
float: left;
padding: 15px 20px;
white-space: nowrap;
overflow: hidden;
i{
position: absolute;
right: 20px;
margin-top: 4px;
background-image: url(/img/chevron-profile.svg);
background-repeat: no-repeat;
width: 20px;
height: 20px;
transform: rotate(-90deg);
transform: .4s;
opacity: 1s;
}
}
}
}
.level-2{
position:fixed;
height:100%;
width:0%;
left:$width;
background-color: #ebebeb;
top: 0;
transition: .4s;
overflow: hidden;
@media(max-width: $MQMobile){
width: $width-mobile;
left:-100%;
z-index: 9999;
box-shadow: 3px 0 12px 0 rgba(0, 0, 0, 0.4);
}
.back{
font-family: Lato;
font-size: 1em;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1.5;
letter-spacing: normal;
color: #1e2a54;
padding-left: 40px;
position: absolute;
top: 40px;
left: 20px;
i{
position: absolute;
left: 8px;
margin-top: -1px;
background-image: url(/img/chevron-profile.svg);
background-repeat: no-repeat;
width: 20px;
height: 20px;
transform: rotate(90deg);
}
@media(min-width: $MQMobile){
display: none;
}
}
&.expand{
width: $width;
@media(max-width: $MQMobile){
left:0;
width: $width-mobile;
}
}
ul{
float: left;
list-style: none;
margin: 0 0 0 20px;
margin-top: 95px;
padding: 0;
width: 100%;
@media(max-width: $MQMobile){
overflow-y: auto;
max-height: 65%;
}
li{
display: block;
position: relative;
&.title-divider{
margin-top: 15px;
margin-bottom: 15px;
transition: .4s;
}
a{
position: relative;
display: block;
line-height: 44px;
color: #7f7f7f;
font-family: Lato;
font-size: 0.75em;
font-weight: bold;
text-transform: uppercase;
padding-left: 5px;
transition: .4s;
white-space: nowrap;
i.icon {
float: left;
margin-right: 18px;
position: relative;
top: 8px;
}
&:hover{
color: #3153f5;
text-decoration: none;
#icon-layer,#icon{
fill: #3153f5;
}
#strokes{
stroke: #3153f5;
}
}
}
}
}
}
.search-global-navigation{
margin-top: 20px;
float: left;
width: 100%;
@media(max-width: $MQMobile){
display: none;
}
.text-field{
transition: .4s;
input{
box-sizing: border-box;
background-color: transparent;
transition: .4s;
}
span{
transition: .6s;
}
}
label{
background-color: transparent;
}
}
.list-global-navigation{
float: left;
list-style: none;
margin: 0;
margin-top: 30px;
padding: 0;
width: 100%;
li{
display: block;
position: relative;
&.title-divider{
margin-top: 15px;
margin-bottom: 15px;
transition: .4s;
}
&:hover{
&:before{
content: "";
height: 100%;
width: 5px;
border-radius: 0 2px 2px 0;
background-color: #3153f5;
left: -20px;
top: 0;
position: absolute;
}
}
a{
position: relative;
display: block;
font-family: Lato;
font-size: 0.75em;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 44px;
letter-spacing: normal;
color: #7f7f7f;
text-transform: uppercase;
padding-left: 5px;
transition: .4s;
white-space: nowrap;
i.icon {
float: left;
margin-right: 18px;
position: relative;
top: 8px;
}
&:hover{
color: #3153f5;
text-decoration: none;
#icon-layer,#icon{
fill: #3153f5;
}
}
}
}
}
}
@media(max-width: $MQMobile){
> .content-nav {
left: 0%;
}
&.collapsed > .content-nav{
left: -100%;
}
}
@media(min-width: $MQMobile){
&.collapsed > .content-nav{
width: 80px;
.logo {
overflow: hidden;
width: 49px;
transition: .4s;
}
.avatar-name{
width: 50px;
i{
opacity: 0;
}
}
.text-field{
width: 67px;
left: -7px;
input{
width: 60px;
padding: 0;
}
label{
color: transparent;
}
.icon{
right: 24px;
}
}
.list-global-navigation li {
a{
display: block;
overflow: hidden;
padding-left: 11px;
}
&.title-divider{
opacity: 0;
}
}
}
}
}
@media(max-width: $MQMobile){
.mask-navigation{
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
width: 100%;
height: 100%;
z-index: 99;
left: 0;
top: 0;
}
}
JS Exibir código
Copiar código
Exibir código
$('body').on('click', '.mask-navigation', function(e){
$('.global-navigation .level-2').removeClass('expand');
$('.global-navigation').addClass('collapsed');
$('.header-mobile').fadeIn('fast');
$(this).fadeOut('fast', function(){
$(this).remove();
});
});
$('body').on('click', '.global-navigation .toggle-navigation', function(e){
e.preventDefault();
$('body').find('.mask-navigation').remove();
if($('.global-navigation').hasClass('collapsed')){
$('.header-mobile').fadeOut('fast');
$('.global-navigation').after('<div class="mask-navigation"></div>');
}else{
$('.header-mobile').fadeIn('fast');
}
if(!$('.global-navigation .level-2').hasClass('expand'))
$('.global-navigation').toggleClass('collapsed');
else{
$('.global-navigation .level-2').removeClass('expand');
setTimeout(function(){
$('.global-navigation').toggleClass('collapsed');
}, 400);
}
});
$('body').on('click', '.global-navigation .toggle-profile', function(e){
e.preventDefault();
$('.global-navigation .level-2').toggleClass('expand');
});
$('body').on('click', '.global-navigation .back', function(e){
e.preventDefault();
$('.global-navigation .level-2').toggleClass('expand');
});