 |
| O menu é como na imagem acima |
Fala galera, como vai ? Hoje eu fiz um menu com submenu pronto e fácil de editar ! Basta copiar o código abaixo e colar em seu editor html ou se você usa blogger vai em modelo > editar html e cole acima de <body ou depois.
Para editar as cores é simples, aperte CTRL + F e procure por essas duas linhas e edite as cores com um código hexadecimal:
--menu-color: #ffcc00 ; /* cor do menu */
--menu-text: #333 ; /* cor do texto do menu */
--menu-text: #333 ; /* cor do texto do menu */
Código do menu:
<div class="menu">
<div class="content">
<ul class="submenu">
<li><a href="#">inicio</a></li>
<li><a href="#">contato</a></li>
<li class="dropdown-menu"><a href="#">produtos <i class="seta"></i></a>
<ul class="dropdown">
<li><a href="#">edit</a></li>
<li><a href="#">edit</a></li>
<li><a href="#">edit</a></li>
</ul>
</li>
<li><a href="#">edit</a></li>
<li class="dropdown-menu"><a href="#">clientes <i class="seta"></i></a>
<ul class="dropdown">
<li><a href="#">edit</a></li>
<li><a href="#">edit</a></li>
<li><a href="#">edit</a></li>
<li><a href="#">edit</a></li>
</ul>
</li>
</ul>
</div>
<style type="text/css">
:root {
--menu-color: #ffcc00 ; /* cor do menu */
--menu-text: #333 ; /* cor do texto do menu */
}
.menu{padding:0; width: 100%; background: var(--menu-color); box-sizing: border-box; height: 55px; z-index: 20000000000; letter-spacing: -0.5px; margin-bottom: 10px; text-align: left; font-size:16px; position: relative;}
.menu .content{padding: 4px 45px; position: relative; z-index: 20000000000;}
.menu i.seta::before {
content: "\0276D";
display: inline-block;
font-style: normal;
font-size: 13px;
padding-left: 3px;
font-weight: bold;
position: relative;
}
.submenu{display:block; box-sizing: border-box; font-family: "Helvetica",tahoma,arial,sans-serif; position: relative;}
.menu ul.submenu{}
.menu ul.submenu>li{display: inline; margin-right: 10px;}
.menu ul.submenu li a{color: var(--menu-text); text-decoration: none;}
.menu ul.submenu li a:hover{text-decoration: none;}
.menu ul.submenu li {display: inline-grid;}
/* dropdown config */
.dropdown-menu{display: inline-block;}
.menu ul.submenu>li.dropdown-menu>ul.dropdown{padding:6px 0 0; top:-8000px; position: absolute; background: var(--menu-color); min-width: 120px; box-sizing: border-box; list-style: none; transition: top 1s;}
.menu ul.dropdown>li{display: block;}
.menu ul.submenu li.dropdownmenu>ul.dropdown{position: absolute; left: 5px; top:20px; z-index: 10000000000;}
.menu ul.submenu ul.dropdown a{display:inline-block; min-width: 120px;padding: 5px 6px;}
.menu ul.submenu ul.dropdown a:hover{background: rgba(255,255,255,0.5);}
.menu ul.submenu li.dropdown-menu:hover > ul.dropdown{top:20px; transition: top .0ms;}
</style>
</div><!-- menu -->
Segunda opção (menu rosa):
<div class="menu">
<div class="content">
<ul class="submenu">
<li><a href="#">inicio</a></li>
<li><a href="#">contato</a></li>
<li class="dropdown-menu"><a href="#">produtos <i class="seta"></i></a>
<ul class="dropdown">
<li><a href="#">ofertas</a></li>
<li><a href="#">descontos</a></li>
<li><a href="#">onde encontrar</a></li>
</ul>
</li>
<li><a href="#">edit</a></li>
<li class="dropdown-menu"><a href="#">clientes <i class="seta"></i></a>
<ul class="dropdown">
<li><a href="#">Satisfação</a></li>
<li><a href="#">Comprador do mês</a></li>
<li><a href="#">Vale cupom</a></li>
</ul>
</li>
</ul>
</div>
<style type="text/css">
:root {
--menu-color: #ffaacc; /* cor do menu */
--menu-text: #333; /* cor do texto do menu */
--menu-spacing: 16px; /* espaço do menu */
--sub-color: #ffcddd; /* cor do submenu */
--sub-color-hover: rgba(255,255,255,0.5);
--sub-text: #333; /*texto do submenu */
}
.menu{padding:0; width: 100%; background: var(--menu-color); box-sizing: border-box; height: 55px; z-index: 20000000000; letter-spacing: -0.5px; margin-bottom: 10px; text-align: left; font-size:16px; position: relative;}
.menu .content{padding: 1em 45px; position: relative; z-index: 20000000000;}
.menu i.seta::before {
content: "\0276D"; display: inline-block; font-style: normal; font-size: 13px; padding-left: 3px; font-weight: bold; position: relative;
}
.submenu{
display:block; box-sizing: border-box; font-family: "Helvetica",tahoma,arial,sans-serif; position: relative;
}
.menu ul.submenu{}
.menu ul.submenu>li{display: inline; margin-right: var(--menu-spacing);}
.menu ul.submenu li a{color: var(--menu-text); text-decoration: none;}
.menu ul.submenu li a:hover{text-decoration: none;}
.menu ul.submenu li {display: inline-grid;}
/* dropdown config */
.dropdown-menu{display: inline-block;}
.menu ul.submenu>li.dropdown-menu>ul.dropdown{padding:0px 0 0; top:-8000px; position: absolute; background: var(--sub-color); min-width: 120px; box-sizing: border-box; list-style: none; transition: top 0s;}
.menu ul.dropdown>li{display: block;}
.menu ul.dropdown li:hover {background: var(--sub-color-hover); }
li.dropdown-menu>a {padding-bottom: 22px; }
.menu ul.submenu li.dropdownmenu>ul.dropdown{position: absolute; left: 5px; top:20px; z-index: 10000000000; border-top:45px solid transparent;}
.menu ul.submenu ul.dropdown a{display:inline-block; min-width: 120px;padding: 5px 6px; color: var(--sub-text);}
.menu ul.submenu ul.dropdown a:hover{}
.menu ul.submenu li.dropdown-menu:hover > ul.dropdown{top:38.9px;}
</style>
</div><!-- menu -->
0 comentários:
Postar um comentário
Obrigada por comentar, deixe seu blog no comentário para eu retribuir *-*