Barra de Navegação Principal

Código
Ocultar Código
  • 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">&nbsp;</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();
});

Código
Ocultar Código
  • HTML
  • CSS

<nav class="horizontal-menu type2">
    <div class="lang-wrapper"><i class="icon-globe"></i> PT <i class="icone-more">&nbsp;</i></div>
    <img src="http://localhost:8080/documents/20181/29004/Logotipo+exemplo/2a74051c-5ec4-46b4-ab92-97925654f89f?t=1484061268151" /> <i class="icone-burguer">&nbsp;</i>
   
    <ul>
        <li>
            <a href="#">Link<i class="icone-more">&nbsp;</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">&nbsp;</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
Código
Ocultar Código
  • 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">&nbsp;</i>
    <ul>
        <li><a href="#"><i class="icon-map-marker">&nbsp;</i>Link</a></li>
        <li><a href="#"><i class="icon-phone">&nbsp;</i>Link 2</a></li>
        <li><a href="#"><i class="icon-calendar">&nbsp;</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;
    }
}