Gustavo_Rallenson_Goncalves_Da_Silva/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

feat:Cria menu desktop

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2022-12-09 18:07:12 -03:00
parent 16916e11c5
commit ea22ba4d63
7 changed files with 183 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/arquivos/sass/partials/_header.scss
View File

@ -2,6 +2,7 @@
/**-- Header ------------------------------********************/
/*-------------------------------------------------------------*/
.page-header{
position: relative;
padding: 28px 0;
background: $black-500;

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

@ -1,18 +1,121 @@
/***************************************************************/
/**-- Menu ------------------------------********************/
/*-------------------------------------------------------------*/
.menu{
align-self: stretch;
&__button{
padding: 0;
border: 0;
outline: 0;
background: transparent;
@include mq(lg,min){
display: none;
}
}
.main-menu{
display: none;
height: 100%;
&__departments{
display: flex;
height: 100%;
margin: 0;
}
&__department{
display: flex;
align-items: center;
margin-right: 40px;
@include mq(lg,min){
&:hover{
.main-menu__department-link{
text-decoration: underline;
font-weight: 700;
color: $blue-500;
}
.submenu{
opacity: 1;
pointer-events: all;
top: 100%;
}
}
}
}
&__department-link{
font-size: 12px;
line-height: 15px;
color:$white-500;
@include mq(lg,min){
&::after{
content: attr(title);
display: block;
height: 0;
overflow: hidden;
font-weight: bold;
visibility: hidden;
}
}
}
}
.submenu{
position: absolute;
top: calc(100% + 32px);
left: 0;
z-index: map-get($map:$z-index, $key: Level-4);
width: 100%;
padding: 30px 0 44px;
background: rgba($white-500, 0.95);
box-shadow: 0px 4px 4px rgba($black-500, 0.02);
opacity: 0;
pointer-events: none;
transition: all 0.2s ease-in-out;
&::before{
content: '';
position: absolute;
left: 0;
bottom:100%;
width: 100%;
height: 28px;
background: transparent;
}
&__title{
margin: 0 0 8px;
line-height: 24px;
font-size: 20px;
}
&__categorias-wrapper{
margin-bottom: 8px;
display: flex;
}
&__categorias{
margin-right: 30px;
}
&__categoria{
padding: 8px 0;
}
&__category-link{
line-height: 15px;
font-size: 12px;
color: $black-500;
transition: color .2s linear;
&:hover{
color: $blue-500
}
}
&__see-all{
display: flex;
align-items: center;
line-height: 15px;
font-weight: 700;
font-size: 12px;
line-height: 15px;
color: $black-500;
i{
margin-left: 9px;
}
}
}
}

2
src/arquivos/sass/utils/_normalize.scss
View File

@ -23,7 +23,7 @@ html {
*/
body {
color: #142032;
color: $black-500;
margin: 0;
}

BIN
src/arquivos/sprite/menu-arrow-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 230 B

70
src/controles-customizados/menuprincipal.html Normal file
View File

@ -0,0 +1,70 @@
<nav class="main-menu">
<ul class="main-menu__departments">
<li class="main-menu__department">
<a class="main-menu__department-link" title="LOREM IPSUM" href="#">LOREM IPSUM</a>
<div class="submenu">
<div class="container">
<h2 class="submenu__title">Lorem IPSUM</h2>
<div class="submenu__categorias-wrapper">
<ul class="submenu__categorias">
<li class="submenu__categoria">
<a class="submenu__category-link" href="">Lorem IPSUM</a>
</li>
<li class="submenu__categoria">
<a class="submenu__category-link" href="">Lorem IPSUM</a>
</li>
<li class="submenu__categoria">
<a class="submenu__category-link" href="">Lorem IPSUM</a>
</li>
<li class="submenu__categoria">
<a class="submenu__category-link" href="">Lorem IPSUM</a>
</li>
</ul>
<ul class="submenu__categorias">
<li class="submenu__categoria">
<a class="submenu__category-link" href="">Lorem IPSUM</a>
</li>
<li class="submenu__categoria">
<a class="submenu__category-link" href="">Lorem IPSUM</a>
</li>
<li class="submenu__categoria">
<a class="submenu__category-link" href="">Lorem IPSUM</a>
</li>
<li class="submenu__categoria">
<a class="submenu__category-link" href="">Lorem IPSUM</a>
</li>
</ul>
</div>
<a class="submenu__see-all" href="">
VER TODAS
<i class="sprite sprite-menu-arrow-icon"></i>
</a>
</div>
</div>
</li>
<li class="main-menu__department">
<a class="main-menu__department-link" title="LOREM IPSUM" href="#">LOREM IPSUM</a>
</li>
<li class="main-menu__department">
<a class="main-menu__department-link" title="LOREM IPSUM" href="#">LOREM IPSUM</a>
</li>
</ul>
</nav>

2
src/template-pagina/Rallenson-home.html
View File

@ -23,9 +23,11 @@
<main class="home"></main>
<footer>
<vtex:template id="Rallenson-footer-newsletter" />
<vtex:template id="Rallenson-footer-links" />
<vtex:template id="Rallenson-footer" />
</footer>
<vtex:template id="Rallenson-loads-footer" />

3
src/template-pagina/sub-templates/Rallenson-header.html
View File

@ -6,9 +6,8 @@
<button class="menu__button">
<i class="sprite sprite-menu-icon" ></i>
</button>
<nav class="main-menu">
</nav>
<vtex.cmc:menuprincipal />
</div>
<a href="/">