luizfelipe9627/vtex-cms-template-atualizado
1
0
Fork 0
forked from M3-Academy/vtex-cms-template-atualizado
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Luiz Felipe Silva 2022-12-07 23:30:07 -03:00
parent ef2fed1679
commit 5665b5a31f
3 changed files with 54 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/arquivos/sass/partials/_menu.scss
View File

@ -12,6 +12,42 @@
} }
.main-menu { .main-menu {
display: none; &__departments {
display: flex;
align-items: center;
}
&__department {
margin-right: 40px;
@include mq(lg, min) {
&:hover {
.main-menu__department-link {
font-weight: 600;
color: $blue-500;
text-decoration: underline;
}
}
}
}
&__department-link {
font-size: 12px;
line-height: 15px;
color: $white-500;
@include mq(lg, min) {
// Técnica usada para quando aplicar bold no hover o elemento não mexer toda a tela.
&::after {
display: block;
// O conteúdo vai ser o atributo title.
content: attr(title);
height: 0;
overflow: hidden;
font-weight: bold;
visibility: hidden;
}
}
}
} }
} }

15
src/controles-customizados/menuPrincipal.html Normal file
View File

@ -0,0 +1,15 @@
<nav class="main-menu">
<ul class="main-menu__departments">
<li class="main-menu__department">
<a href="#" class="main-menu__department-link" title="LOREM IPSUM">LOREM IPSUM</a>
</li>
<li class="main-menu__department">
<a href="#" class="main-menu__department-link" title="LOREM IPSUM">LOREM IPSUM</a>
</li>
<li class="main-menu__department">
<a href="#" class="main-menu__department-link" title="LOREM IPSUM">LOREM IPSUM</a>
</li>
</ul>
</nav>

9
src/template-pagina/sub-templates/luizfelipe-header.html
View File

@ -7,13 +7,8 @@
<i class="sprite sprite-menu-icon"></i> <i class="sprite sprite-menu-icon"></i>
</button> </button>
<nav class="main-menu"> <!-- Está chamando o arquivo HTML presente em controles customizados. -->
<ul> <vtex.cmc:menuPrincipal/>
<li><a href="/">LOREM IPSUM</a></li>
<li><a href="/">LOREM IPSUM</a></li>
<li><a href="/">LOREM IPSUM</a></li>
</ul>
</nav>
</div> </div>
<a href="/"> <a href="/">