deglier / AwesomeMenu

menu que muda a corde fundo da barra de menu com uma cor diferente pra cada item do menu

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

AwesomeMenu

Menu que muda a cor de fundo da barra de menu com uma cor diferente pra cada item do menu em evento de hover

Linguagens: CSS / HTML / JavaScript(jQuery).

Um valor é passado pelo atributo data-bg presente em cada tag <a> com a finalidade de muda o brackground-color da tag <nav class="menu"> quando há evento de hover sobre um item do menu.

Demo aqui.

Como funciona:

HTML:
<nav class="menu">
    <a href='#' data-bg="rgb(166,5,32)">item do menu</a>
</nav>

Onde data-bg armazena o brackground-color.

JavaScript
$(document).ready(function(){
    $("a").hover(
        function(){
            var cor = $(this).attr("data-bg"),
                estiloHover = {'background-color' : cor};
            $("nav.menu").css(estiloHover);
        }, function(){
            $("nav").css("background-color", "#000");
    });
});

Licença Creative Commons
AwesomeMenu de Deglier Amorim está licenciado com uma Licença Creative Commons - Atribuição 4.0 Internacional.

About

menu que muda a corde fundo da barra de menu com uma cor diferente pra cada item do menu


Languages

Language:CSS 64.8%Language:HTML 25.2%Language:JavaScript 10.0%