Menu de Categorias com ver mais categorias Exibe o menu com algumas categorias e a opção de ver mais categorias. Ao passar o mouse sobre "+ categorias" é possível ver o restante delas.
Snippet para criar um menu exibindo 6 categorias, e as demais dentro do contexto mais categorias.
HTML CSS
Copy {#
# Menu de categorias com ver mais categorias
# elements/snippets/menu_more_categories.html
#}
{% set more_quantity = 6 %}
{% if categories | length > more_quantity %}
{% set show_categories = categories | slice(0, more_quantity) %}
{% set more_categories = categories | slice(more_quantity) %}
{% else %}
{% set show_categories = categories %}
{% set more_categories = null %}
{% endif %}
< nav class = "nav" >
< div class = "container" >
< ul class = "list" >
{% for category in show_categories %}
< li class = "first-level" >
< a href = "{{ category.link }}" title = "{{ category.name }}" >
{{ category.name }}
</ a >
</ li >
{% endfor %}
{% if more_categories %}
< li class = "first-level sub" >
< span role = "button" title = "Departamentos" >
+ Categorias
</ span >
< ul class = "sub-list second-level" >
{% for category in more_categories %}
< li >
< a href = "{{ category.link }}" title = "{{ category.name }}" >{{ category.name }}</ a >
</ li >
{% endfor %}
</ ul >
</ li >
{% endif %}
</ ul >
</ div >
</ nav >
Copy .nav {
position : relative ;
background-color : #fff ;
}
.nav .container {
max-width : 1200 px ;
margin : 0 auto ;
}
.nav .list {
display : flex ;
justify-content : space-between ;
}
.nav .list ,
.nav .list > .first-level {
position : relative ;
}
.nav .list > li > a ,
.nav .list > li > span {
position : relative ;
display : flex ;
justify-content : center ;
align-items : center ;
font-size : 1.12 rem ;
font-weight : 600 ;
text-align : center ;
cursor : pointer ;
color : #000 ;
z-index : 2 ;
transition : ease-out 0.2 s ;
}
.nav .list .second-level {
position : absolute ;
top : 100 % ;
min-width : 275 px ;
width : auto ;
padding : 2.0625 rem 2.5 rem ;
opacity : 0 ;
visibility : hidden ;
background-color : #f5f5f5 ;
box-shadow : 0 4 px 8 px rgb (0 0 0 / 6 % ) ;
}
.nav .first-level:hover .second-level {
opacity : 1 ;
visibility : visible ;
}
.nav .list > li .sub > .sub-list > li a {
display : block ;
font-size : 0.875 rem ;
line-height : 1.25 rem ;
color : #000 ;
}
Caso queira aumentar ou diminuir a quantidade de categorias a serem exibidas antes de criar o mais categorias, basta alterar o numero da variável more_quantiy
Copy {% set more_quantity = 6 %}
Como usar
Copie o código acima e crie um arquivo separado, ex: elements/snippets/menu_more_categories.html
Faça a chamada desse arquivo onde desejar:
Copy {% element('snippets/menu_more_categories') %}
Copie o código CSS e cole em sua folha de estilo.
Last updated 12 months ago