3 maneiras criativas de estilizar sua navegação de submenu vertical

Publicados: 2017-08-17

No post de hoje, vamos fornecer três maneiras diferentes de estilizar o submenu de sua navegação vertical. Em uma das postagens anteriores, já mostramos como fazer uma navegação vertical transparente que se sobrepõe ao seu site quando você o olha de um desktop.

Os exemplos que vamos compartilhar serão feitos em cima dessa navegação vertical transparente. Dessa forma, você terá imediatamente a possibilidade de criar sua navegação vertical transparente de A a Z. Ao longo deste post, você experimentará diferentes configurações de estilo que podem dar vida ao seu submenu vertical.

Antes de mostrar os exemplos, pode ser interessante ver o submenu sem nenhuma alteração. Como de costume, o submenu vertical assume as configurações dos itens do menu principal. Sem fazer nenhuma modificação adicional, o submenu se parece com:

Agora, vamos dar uma olhada nos três exemplos que mostraremos como recriar.

Primeiro exemplo:

Segundo exemplo:

Terceiro exemplo:

Passos gerais para alcançar o submenu vertical

Inscreva-se no nosso canal no Youtube

Antes de mergulhar nos diferentes exemplos que fornecemos, trataremos de duas etapas gerais que são necessárias antes de começar. Antes de projetar os itens de submenu de acordo com suas necessidades, você deve fazer duas coisas: adicionar os itens de submenu ao seu menu e procurar os diferentes CSS IDs de nossos itens de submenu. Depois de passarmos por essas etapas, compartilharemos o código CSS de que você precisa para obter os resultados de exemplo.

Como existem três maneiras de adicionar código CSS ao seu site Divi, lidaremos com cada método individualmente. No entanto, você pode usar sua maneira preferida de adicionar o código CSS para cada um dos exemplos.

Adicionar itens de submenu

A primeira coisa que vamos fazer, se você ainda não fez isso, é adicionar os itens do submenu. Em nosso exemplo, adicionamos apenas alguns itens de submenu ao item de menu 'nossos modelos' para mostrar a você como fazê-lo. Você pode, entretanto, aplicar as alterações a outros itens de menu.

Se você estiver no painel do WordPress, vá para Aparência> Menus . Se você já criou um menu, use-o. Caso contrário, comece fazendo um novo menu. Em seguida, adicione os itens do menu principal ao seu menu. Depois de fazer isso, você pode adicionar os itens do submenu. Adicione um item de submenu e simplesmente coloque-o sob o item de menu principal. Faça isso para todos os itens de submenu que você gostaria de adicionar à sua navegação vertical.

Procure os IDs CSS individuais de seus itens de submenu

Em nossos exemplos, teremos que fazer algumas modificações CSS em cada item do submenu individualmente. É por isso que teremos que procurar os IDs CSS no código-fonte. Cada item possui um ID diferente. Você deve modificar o código CSS de acordo com os IDs CSS que são usados especificamente em seu site. Eles podem ser diferentes daqueles usados nesses exemplos. É por isso que mostraremos brevemente onde obter os IDs para que você possa fazer as modificações em seus itens em particular.

Vá para a sua página inicial, coloque o mouse no menu e comece a inspecionar o código. Você verá o ID CSS aparecer no item de menu selecionado. Copie cada um dos IDs CSS da lista do submenu e salve-os para mais tarde.

Agora que você concluiu as duas etapas, pode passar a criar os exemplos que fizemos.

Crie o primeiro exemplo

Nesta parte da postagem, mostraremos exatamente como recriar o primeiro exemplo do submenu vertical. Como você pode ver, a estrutura é muito simples, mas adiciona uma cor extra ao seu site. Os itens do menu principal são simples e usam uma cor de fundo transparente. Você pode, é claro, manter a mesma simplicidade em seu submenu. Ou você pode escolher chamar um pouco mais de atenção para ele.

As cores que estão sendo usadas correspondem à imagem de fundo com a sobreposição de gradiente. Manter esse tipo de consistência de cores em seu submenu é recomendável se você estiver tentando obter um resultado simples e modesto.

Adicionar o código CSS por meio das opções de tema

Existem diferentes maneiras de adicionar código CSS à sua página. Você pode, por exemplo, adicionar o código CSS a uma página em particular. Você também pode adicioná-lo a todo o site através das Opções de Tema ou do Customizador de Tema. Para este exemplo, vamos simplesmente adicionar o código por meio das Opções de tema. Se você estiver no painel do WordPress, vá para Divi> Opções de tema> Role a guia geral para baixo e cole o seguinte código na caixa CSS personalizada:

.nav li ul {
border: none !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background-color: rgba(60,105,205,0.1) !important;
border-radius: 5px;
margin-bottom: 10px;
}
.sub-menu #menu-item-205212 {
background-color: rgba(60,105,205,0.3) !important;
border-radius: 5px;
margin-bottom: 10px;
}
.sub-menu #menu-item-205213
{
background-color: rgba(60,105,205,0.5) !important;
border-radius: 5px;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 1px 0px 1px 0 !important;
text-align: center !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 5% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}

#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\e089" !important;
}

Substitua os seguintes IDs CSS no código por aqueles que se aplicam ao seu submenu. Na etapa anterior desta postagem, mostramos onde você pode encontrá-los.

Crie o segundo exemplo

O próximo exemplo vamos mostrar como fazer tem um certo efeito de gradiente nele. As diferentes cores que estão sendo usadas estão de acordo com a imagem de fundo que está sendo usada. Adicionamos um fundo gradiente ao submenu completo e algumas cores transparentes individuais para cada um dos itens do submenu.

Adicione o código CSS para uma página em particular

Embora você provavelmente deseje adicionar esse código a seu site completo, mostraremos como fazer esse exemplo se aplicar a uma página em particular. Se você não quiser adicionar as linhas de código CSS a uma página em particular, sinta-se à vontade para adicioná-lo por meio de Opções de tema (como mostrado no primeiro exemplo) ou por meio do Customizador de tema (como mostrado no próximo exemplo).

Comece abrindo ou criando a página onde deseja adicionar o design do submenu. Agora, clique no seguinte botão no canto direito do Divi builder:

Na tela exibida, copie e cole as seguintes linhas de código CSS no campo CSS personalizado:

.nav li ul {
border: none !important;
background: -webkit-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: -o-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: -moz-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
padding: 3px !important;
width: 80% !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background-color: rgba(255,255,255,0.6) !important;
margin-bottom: 3px;
}
.sub-menu #menu-item-205212 {
background-color: rgba(255,255,255,0.4) !important;
margin-bottom: 3px;
}
.sub-menu #menu-item-205213
{
background-color: rgba(255,255,255,0.2) !important;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 1px 0 1px 0 !important;
text-align: center !important;
color: #000000 !important;
width: 80% !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 10% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}

#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\61" !important;
}

Substitua os seguintes itens de submenu no código CSS pelo seu:

Crie o terceiro exemplo

O último exemplo que vamos compartilhar como fazer tem um efeito de foco. Ao adicionar este efeito de foco ao seu submenu, você se envolverá com o seu público de uma maneira agradável, sem tornar o menu principal muito ocupado. Uma vez que o submenu só aparece ao mover-se sobre o item do menu principal. Seus visitantes, portanto, não serão constantemente confrontados com o efeito.

Adicione o código CSS para uma página por meio do personalizador de tema

No último exemplo, vamos mostrar como adicionar o código CSS por meio do Theme Customizer. Se você estiver no painel do WordPress, vá para Aparência> Personalizar> CSS adicional> e copie e cole as seguintes linhas de código:

.nav li ul {
border: none !important;
width: 95% !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205211:hover {
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
.sub-menu #menu-item-205212 {
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
.sub-menu #menu-item-205212:hover {
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205213
{
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205213:hover
{
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 5px 0 5px 0 !important;
text-align: center !important;
color: #000000 !important;
width: 95% !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 10% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}
#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\61" !important;
}

Pegue os IDs CSS de seus itens de submenu e substitua os do exemplo pelos seus:

É isso! Seu design agora deve ser semelhante ao exemplo mostrado acima.

Pensamentos finais

Neste post, mostramos algumas possibilidades de como ser criativo com sua navegação vertical. Mais especificamente; mostramos como fazer seu submenu vertical parecer ótimo. Se você seguir esta postagem, passo a passo, poderá recriar o submenu vertical perfeitamente. Se você tiver dúvidas ou sugestões; Deixe-nos saber na seção de comentários abaixo!

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!