Boa.
Alguém possui algum exemplo reutilizável de um menu similar ao desse site: www.boali.com.br
Ou poderia me direcionar para que eu consiga fazê-lo?
Só com CSS é possível usando pseudo-elementos
, transform
e transitions
, Para alinhar tudo vc pode usar display:flex
De uma estudada nesse modelo que pode te ajudar no futuro, e se precisar trabalhe o CSS para ficar responsivo ao seu gosto, apesar de ele já ficar bem alinhado...
OBS: Como usei display:flex
e positions:relative/absolute
, precisei fazer a cor laranja sobre o background precisei fazer uma gambeta usando box-shadow
, se vc for usar jQuery tem outras formas pra fazer isso. Pode ser que com CSS tenha um jeito melhor tb, mas dessa forma acho que ficou legal.
html, body {
height: 100%;
width: 100%;
margin: 0;
}
.menu {
height: 100vh;
max-width: 100vw;
background-image: url(http://unsplash.it/600/400);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.menu a {
position: relative;
display: inline-block;
text-align: center;
font-size: 1rem;
font-family: sans-serif;
text-shadow: 0 0 .5em rgba(0, 0, 0, 0.75);
color: #fff;
font-weight: bold;
text-decoration: none;
margin: 0 1rem;
}
.menu a:nth-child(1),.menu a:nth-child(2) ,.menu a:nth-child(3) {
z-index: 20;
}
.menu a:hover {
z-index: 25;
}
.menu a::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scaleX(0);
display: inline-block;
width: 100px;
height: 200px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
overflow: hidden;
box-shadow: 0 0 0 200vw rgba(255, 123, 0, 0);
transition: transform 500ms ease, box-shadow 200ms linear;
z-index: -1;
}
.menu a:hover::after {
transform: translate(-50%, -50%) scaleX(1);
box-shadow: 0 0 0 200vw rgba(255, 123, 0, 0.5);
}
.menu a:nth-of-type(1)::after {
background-image: url(http://unsplash.it/100/200);
}
.menu a:nth-of-type(2)::after {
background-image: url(http://unsplash.it/101/200);
}
.menu a:nth-of-type(3)::after {
background-image: url(http://unsplash.it/102/200);
}
<section class="menu">
<a href="#">item menu1</a>
<a href="#">item menu2</a>
<a href="#">item menu3</a>
</section>
<section>
<h1>meu menu</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut excepturi eaque odit, magni aspernatur atque architecto recusandae, repudiandae distinctio obcaecati perferendis ab voluptate. Ipsa dolores deserunt consequatur nesciunt hic! Aperiam, dolorum atque dolor cum ea nemo, doloremque maxime tempora a ipsum, deleniti sequi est recusandae. Et tempora officiis voluptas impedit dolor dolorem vitae iure ex reprehenderit, odit aspernatur possimus quasi quibusdam, voluptates quo voluptate consequatur? Temporibus neque laborum laboriosam quae tempora eaque earum iste praesentium consectetur labore optio doloremque illum, esse accusamus molestiae saepe distinctio nihil, pariatur at! Beatae tempora iusto dolores quae, eos quaerat labore temporibus iste, illum quidem qui sapiente officia nisi ea mollitia provident earum, repellendus aut. Adipisci iure aut, pariatur magni labore culpa a repudiandae autem. Ducimus minima voluptatum excepturi reiciendis commodi cum fugit nam atque reprehenderit molestias dicta sint corrupti eum, cupiditate dolor impedit exercitationem est iusto repudiandae. Asperiores voluptates provident perspiciatis officiis, repellendus atque aut, dolores itaque at impedit reprehenderit consequatur quasi nobis, autem suscipit dolorum sit. Sapiente maiores explicabo earum cupiditate aliquid sunt totam aliquam nobis delectus nostrum voluptatibus pariatur nisi ab vel quae suscipit, recusandae debitis! Necessitatibus quibusdam modi omnis? Iure quidem unde eveniet at perspiciatis nam facere maxime suscipit ratione! Quidem!
</p>
</section>
F12
você consegue acessar o código fonte para ter uma noção de como é feito.width: 0;
, assim a imagem não aparece, no:hover
do item aumenta esse valor sempre mantendo centralizado