Menu Lateral Efeito Sombra

Menu Full Screen CSS

Postado: 28 de março de 2025 Tempo de Leitura: 2 Minutos

Veremos neste artigo como criar efeito de sombra no Menu lateral com html e Css.

Estrutura Base que vamos usar no projeto!

A estrutura base do nosso pequeno projeto para os ícones vai ser composto por apenas dois arquivos, por ser apenas dois arquivos, não será algo muito complexo de realizar, o primeiro arquivo será o index.html e o segundo style.css.

Portanto, crie uma pasta CSS, para inserir o arquivo style.css, a mesma regra serve se você estiver usando scripts crie pastas para organizar o seu projeto seja qual for organização é fundamental para organização e manutenção no futuro.

Nesta seção, projetaremos uma estrutura simples nas tags <ul>, <li>, <span>, e a tag <a> para inserirmos o link de destino.

Essa tag que usaremos para criar o nosso Menu Lateral Efeito Sombra.

A primeira coisa que você deve fazer é colocar todas as tags básicas que são essenciais independente de qual projeto esteja sendo desenvolvido.

Nesta seção, usaremos algumas as tags HTML para montar a estrutura do Menu.

Estrutura Código Html:

HTML

<ul class="menu-lateral">

  <li><span> <a href="#">Home</a> </span></li>
  <li><span> <a href="#">Códigos Html</a> </span></li>
  <li><span> <a href="#">Códigos Css</a> </span></li>
  <li><span> <a href="#">Jquery </a> </span></li>
  <li><span> <a href="#">Contato </a> </span></li>

</ul>

Estrutura Código CSS

Para conseguirmos o efeito desejado no Menu, vamos adicionar algumas propriedades CSS para as tags que foram colocadas na sessão HTML que usamos.

Portanto, você pode criar um arquivo style.css, coloque todo o código que se encontra logo mais abaixo.

Nesta seção, usaremos algumas propriedades CSS para estilizar os nosso menu.

CSS

css.menu-lateral {
  
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5vmin;
  width: 300px;
  background: #fff;
  padding: 20px 20px;

}
  
  .menu-lateral > li {
    display: inline-flex;
    background: #ffbf00;
  }
  
  .menu-lateral > li:is(:hover, :focus-within) > span:not(:active) {
      --sombra: -8px;
    }

  .menu-lateral span  a {

    text-decoration: none;
    color:#000000;

  } 

  .menu-lateral span {
    
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    outline: none;
    font-size: 22px;
    border: 3px solid #000000;
    background: #ffffff;
    padding: 3px 8px;  
    --sombra: 0;
    transform: translateX(var(--sombra)) translateY(var(--sombra));
  
  }
  
  @media (prefers-reduced-motion: no-preference) {
  
  .menu-lateral span {
      will-change: transform;
      transition: transform .2s ease 
  }
    }

* {
  box-sizing: border-box;
  margin: 0;
}

Combinando as Duas seções acima com Html e Css temos o seguinte Resultado!

Veja o Resultado baixo!