Barra de navegação principal
Barra de Navegação Principal
Navegação Tipo 1
- HTML
- CSS
- JS
<nav class="horizontal-menu type1">
<img src="http://amatoolkit.digital-works.com:8080/documents/20181/29004/Logotipo+exemplo/2a74051c-5ec4-46b4-ab92-97925654f89f?t=1484061268151" />
<ul>
<li><a href="#">Link<i class="icone-more"> </i></a>
<ul class="sub-menu">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
.horizontal-menu{
background: #2A2A2A;
display: inline-block;
padding: 33px 28px;
}
.horizontal-menu > ul{
font-size: 0;
float: right;
height: 77px;
}
.horizontal-menu > ul > li{
display: inline-block;
font-size: 14px;
font-family: 'latobold';
padding-right: 18px;
padding-left: 18px;
text-transform: uppercase;
position: relative;
height: calc(100% - 10px);
top: 10px;
cursor: pointer;
}
.horizontal-menu > ul > li i{
font-size: 5px;
margin-left: 5px;
vertical-align: text-top;
line-height: 16px !important;
}
.horizontal-menu > ul > li a{
color: #fff;
}
.horizontal-menu > ul > li:hover > a,
.horizontal-menu > ul > li .sub-menu li:hover a{
color: #2980b9 !important;
}
.horizontal-menu > img{
max-height: 44px;
width: auto;
}
.horizontal-menu.type1 > ul > li .sub-menu{
border: 0;
text-align: left;
padding: 28px 25px!important;
border-radius: 0;
-webkit-box-shadow: inset 0 7px 13px -10px grey;
-moz-box-shadow: inset 0 7px 13px -10px grey;
box-shadow: inset 0 7px 13px -10px grey, 0px 3px 6px 0 rgba(0,0,0,0.15);
top: 39px;
min-width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #fff;
position: absolute;
top: 67px;
left: 50%;
transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
min-width: 132px;
display: none;
}
.horizontal-menu.type1 > ul > li:hover .sub-menu{
display: block;
}
.horizontal-menu.type1 > ul > li .sub-menu li a{
color: #808184;
font-family: "latoregular";
text-transform: none;
padding-bottom: 20px;
display: block;
}
.horizontal-menu.type1 > ul > li .sub-menu li:last-child a{
padding-bottom: 0px;
}
@media only screen and (min-width: 1025px) {
.horizontal-menu>ul{
display: block !important;
}
.horizontal-menu i.icone-burguer{
display: none !important;
}
}
@media only screen and (max-width: 1024px) {
.horizontal-menu>ul{
height: auto;
float: none;
display: none;
}
.horizontal-menu{
position: relative;
}
.horizontal-menu i.icone-burguer {
position: absolute;
top: 43px;
right: 31px;
font-size: 30px;
content: "\e916";
color: #fff;
font-family: 'toolkit_font'!important;
cursor: pointer;
}
.horizontal-menu>ul>li{
display: block;
width: 100%;
height: auto;
line-height: normal;
padding: 10px 0px;
}
.horizontal-menu.type1>ul>li .sub-menu{
position: relative;
top: initial;
left: initial;
transform: initial;
-moz-transform: initial;
-ms-transform: initial;
-o-transform: initial;
min-width: 0px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: transparent;
box-shadow: none;
padding: 0px!important;
}
.horizontal-menu.type1>ul>li .sub-menu li a{
color: #fff;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 15px;
}
.horizontal-menu.type1>ul>li:hover .sub-menu{
display: none;
}
}
@media only screen and (max-width: 440px) {
.horizontal-menu>img{
width: 160px;
}
.horizontal-menu i.icone-burguer{
top: 34px;
}
}
$(document).on("click", ".horizontal-menu>ul>li a", function(e){
e.preventDefault();
e.stopPropagation();
$(this).next('ul.sub-menu').slideToggle();
});
$(document).on("click", ".horizontal-menu i.icone-burguer", function(e){
e.preventDefault();
e.stopPropagation();
$(this).next('ul').slideToggle();
});
Navegação Tipo 2
- HTML
- CSS
<nav class="horizontal-menu type2">
<div class="lang-wrapper"><i class="icon-globe"></i> PT <i class="icone-more"> </i></div>
<img src="http://localhost:8080/documents/20181/29004/Logotipo+exemplo/2a74051c-5ec4-46b4-ab92-97925654f89f?t=1484061268151" /> <i class="icone-burguer"> </i>
<ul>
<li>
<a href="#">Link<i class="icone-more"> </i></a>
<div class="megamenu-wrapper">
<ul class="sub-menu">
<li>MEGA MENU 1</li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Pesquisa</a></li>
<li><a href="#">Página Genérica</a></li>
</ul>
<ul class="sub-menu">
<li>MEGA MENU 2</li>
<li><a href="#">Pesquisa</a></li>
<li><a href="#">Página Genérica</a></li>
<li><a href="#">Pesquisa</a></li>
<li><a href="#">Página Genérica</a></li>
</ul>
</div>
</li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li class="search-icon"><i class="icone-search"> </i></li>
</ul>
</nav>
.horizontal-menu{
background: #2A2A2A;
display: inline-block;
padding: 33px 28px;
}
.horizontal-menu > ul{
font-size: 0;
float: right;
height: 77px;
}
.horizontal-menu > ul > li{
display: inline-block;
font-size: 14px;
font-family: 'latobold';
padding-right: 18px;
padding-left: 18px;
text-transform: uppercase;
position: relative;
height: calc(100% - 10px);
top: 10px;
cursor: pointer;
}
.horizontal-menu > ul > li i{
font-size: 5px;
margin-left: 5px;
vertical-align: text-top;
line-height: 16px !important;
}
.horizontal-menu > ul > li a{
color: #fff;
}
.horizontal-menu > ul > li:hover > a,
.horizontal-menu > ul > li .sub-menu li:hover a{
color: #2980b9 !important;
}
.horizontal-menu > img{
max-height: 44px;
width: auto;
}
.horizontal-menu.type1 > ul > li .sub-menu{
border: 0;
text-align: left;
padding: 28px 25px!important;
border-radius: 0;
-webkit-box-shadow: inset 0 7px 13px -10px grey;
-moz-box-shadow: inset 0 7px 13px -10px grey;
box-shadow: inset 0 7px 13px -10px grey, 0px 3px 6px 0 rgba(0,0,0,0.15);
top: 39px;
min-width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #fff;
position: absolute;
top: 67px;
left: 50%;
transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
min-width: 132px;
display: none;
}
.horizontal-menu.type1 > ul > li:hover .sub-menu{
display: block;
}
.horizontal-menu.type1 > ul > li .sub-menu li a{
color: #808184;
font-family: "latoregular";
text-transform: none;
padding-bottom: 20px;
display: block;
}
.horizontal-menu.type1 > ul > li .sub-menu li:last-child a{
padding-bottom: 0px;
}
.lang-wrapper{
color: #fff;
width: 100%;
text-align: right;
font-size: 12px;
font-family: "latoregular";
margin-bottom: 10px;
}
.lang-wrapper i{
font-size: 4px;
margin-left: 5px;
vertical-align: super;
}
.lang-wrapper i.icon-globe{
height: 19px;
font-size: 19px;
color: #3498DB;
vertical-align: top;
margin-right: 10px;
}
@media only screen and (min-width: 1025px) {
.horizontal-menu>ul{
display: block !important;
}
.horizontal-menu i.icone-burguer{
display: none !important;
}
}
@media only screen and (max-width: 1024px) {
.horizontal-menu>ul,
.horizontal-menu.type2>ul{
height: initial;
float: none !important;
display: none;
}
.horizontal-menu{
position: relative;
}
.horizontal-menu i.icone-burguer {
position: absolute;
top: 43px;
right: 31px;
font-size: 30px;
content: "\e916";
color: #fff;
font-family: 'toolkit_font'!important;
cursor: pointer;
}
.horizontal-menu>ul>li{
display: block;
width: 100%;
height: auto;
line-height: normal;
padding: 10px 0px;
}
.horizontal-menu.type1>ul>li .sub-menu,
.horizontal-menu.type2>ul>li .megamenu-wrapper{
position: relative;
top: initial;
left: initial;
transform: initial;
-moz-transform: initial;
-ms-transform: initial;
-o-transform: initial;
min-width: 0px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: transparent;
box-shadow: none;
padding: 0px!important;
}
.horizontal-menu.type1>ul>li .sub-menu li a,
.horizontal-menu.type2>ul>li .megamenu-wrapper .sub-menu li a{
color: #fff;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 15px;
}
.horizontal-menu.type2>ul>li .megamenu-wrapper .sub-menu li:first-child{
color: #fff;
margin-top: 20px;
}
.horizontal-menu.type1>ul>li:hover .sub-menu,
.horizontal-menu.type2>ul>li:hover .megamenu-wrapper{
display: none;
}
.horizontal-menu.type2 i.icone-burguer{
top: 53px;
right: 15px;
}
.horizontal-menu.type2>ul>li{
top: initial !important;
height: initial;
padding-top: 20px;
}
}
@media only screen and (max-width: 640px) {
.horizontal-menu.type2>ul>li .megamenu-wrapper .sub-menu{
display: block;
width: 100%;
}
.horizontal-menu.type2>ul>li .megamenu-wrapper .sub-menu:first-child{
border-right: 0px;
border-bottom: 1px solid #dfe2e7;
padding-bottom: 25px !important;
}
}
@media only screen and (max-width: 440px) {
.horizontal-menu>img{
width: 160px;
}
.horizontal-menu.type2 i.icone-burguer {
top: 47px;
}
}
Navegação Tipo 3
- HTML
- CSS
<nav class="horizontal-menu type3">
<img src="http://amatoolkit.digital-works.com:8080/documents/20181/29004/Logotipo+exemplo/2a74051c-5ec4-46b4-ab92-97925654f89f?t=1484061268151" />
<i class="icone-burguer"> </i>
<ul>
<li><a href="#"><i class="icon-map-marker"> </i>Link</a></li>
<li><a href="#"><i class="icon-phone"> </i>Link 2</a></li>
<li><a href="#"><i class="icon-calendar"> </i>Link 3</a></li>
</ul>
</nav>
.horizontal-menu{
background: #2A2A2A;
display: inline-block;
padding: 33px 28px;
}
.horizontal-menu > ul{
font-size: 0;
float: right;
height: 77px;
}
.horizontal-menu > ul > li{
display: inline-block;
font-size: 14px;
font-family: 'latobold';
padding-right: 18px;
padding-left: 18px;
text-transform: uppercase;
position: relative;
height: calc(100% - 10px);
top: 10px;
cursor: pointer;
}
.horizontal-menu > ul > li i{
font-size: 5px;
margin-left: 5px;
vertical-align: text-top;
line-height: 16px !important;
}
.horizontal-menu > ul > li a{
color: #fff;
}
.horizontal-menu > ul > li:hover > a,
.horizontal-menu > ul > li .sub-menu li:hover a{
color: #2980b9 !important;
}
.horizontal-menu > img{
max-height: 44px;
width: auto;
}
.horizontal-menu.type1 > ul > li .sub-menu{
border: 0;
text-align: left;
padding: 28px 25px!important;
border-radius: 0;
-webkit-box-shadow: inset 0 7px 13px -10px grey;
-moz-box-shadow: inset 0 7px 13px -10px grey;
box-shadow: inset 0 7px 13px -10px grey, 0px 3px 6px 0 rgba(0,0,0,0.15);
top: 39px;
min-width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #fff;
position: absolute;
top: 67px;
left: 50%;
transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
min-width: 132px;
display: none;
}
.horizontal-menu.type1 > ul > li:hover .sub-menu{
display: block;
}
.horizontal-menu.type1 > ul > li .sub-menu li a{
color: #808184;
font-family: "latoregular";
text-transform: none;
padding-bottom: 20px;
display: block;
}
.horizontal-menu.type1 > ul > li .sub-menu li:last-child a{
padding-bottom: 0px;
}
@media only screen and (min-width: 1025px) {
.horizontal-menu>ul{
display: block !important;
}
.horizontal-menu i.icone-burguer{
display: none !important;
}
}
@media only screen and (max-width: 1024px) { .horizontal-menu>ul{
height: auto;
float: none;
display: none;
}
.horizontal-menu{
position: relative;
}
.horizontal-menu i.icone-burguer {
position: absolute;
top: 43px;
right: 31px;
font-size: 30px;
content: "\e916";
color: #fff;
font-family: 'toolkit_font'!important;
cursor: pointer;
}
.horizontal-menu>ul>li{
display: block;
width: 100%;
height: auto;
line-height: normal;
padding: 10px 0px;
}
.horizontal-menu.type1>ul>li .sub-menu{
position: relative;
top: initial;
left: initial;
transform: initial;
-moz-transform: initial;
-ms-transform: initial;
-o-transform: initial;
min-width: 0px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: transparent;
box-shadow: none;
padding: 0px!important;
}
.horizontal-menu.type1>ul>li .sub-menu li a{
color: #fff;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 15px;
}
.horizontal-menu.type1>ul>li:hover .sub-menu{
display: none;
}
}
@media only screen and (max-width: 440px) {
.horizontal-menu>img{
width: 160px;
}
.horizontal-menu i.icone-burguer{
top: 34px;
}
}
Este website utiliza cookies. Ao continuar a navegação está a aceitar a sua utilização.
Caso pretenda saber mais, consulte a nossa política de privacidade.