Menu Colorido CSS 2

Menu interessante e elegante, ideal para todos os tipos de sites, tanto pessoais como profissionais. Neste tutorial você vai aprender a criar um menu com abas coloridas para utilizar em seu site ou até mesmo em um sistema.

Por | @oficinadanet Programação

Neste tutorial você vai aprender a criar um menu com abas coloridas para utilizar em seu site ou até mesmo em um sistema.

Exemplo de utilização:








Vamos começar


Primeiro de tudo temos que criar o html, copiar e colar o código abaixo você < head > tag de vocês html:


Criando o código CSS


Ok, agora nós estamos fazendo para projetar o < div id = "colormenu" >, copiar e colar o código abaixo na sua cabeça>
#colormenu {
    margin:5px;
    padding:5px;
}


Denominando a colormenu # um


Agora vamos estilo colormenu # um, adicione o CSS abaixo:
#colormenu a{
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    padding:6px 20px 9px 20px;
    font-size:20px;
    color:#000;
    text-decoration:none;
    font-weight:bold;
    text-transform: lowercase;
}


text-transform: lowercase; isso vai mudar todas as letras em minúsculas
text-decoration:none; isso vai remover o sublinhado de decoração
padding:6px 20px 9px 20px; estrutura é "padding: inferior direito superior esquerdo".

Denominando a tag span azul


Agora deixa o estilo do < span class = "blue" >, adicione o CSS abaixo:
#colormenu .blue a{
    border-top:6px solid #326abd;
}


Quando a rolagem do mouse


quando o mouse é rollover mudar a cor de fundo, adicionar o CSS seguinte:
#colormenu .blue a:hover{
    color:#FFF;
    background-color:#326abd;
    -webkit-border-bottom-left-radius: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -moz-border-radius-bottomright: 9px;
}


Denominando a tag span vermelho


Agora deixa o estilo do < span class = "red" >, adicione o CSS abaixo:
#colormenu .red a{
    border-top:6px solid #b8462c;
}


Quando a rolagem do mouse


quando o mouse é rollover mudar a cor de fundo, adicionar o CSS seguinte:
#colormenu .red a:hover{
    color:#FFF;
    background-color:#b8462c;
    -webkit-border-bottom-left-radius: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -moz-border-radius-bottomright: 9px;
}


Denominando a tag span verde


Agora deixa o estilo do < span class = "green" >, adicione o CSS abaixo:
#colormenu .green a{
    border-top:6px solid #a5cc3b;
}


Quando a rolagem do mouse


quando o mouse é rollover mudar a cor de fundo, adicionar o CSS seguinte:
#colormenu .green a:hover{
    color:#FFF;
    background-color:#a5cc3b;
    -webkit-border-bottom-left-radius: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -moz-border-radius-bottomright: 9px;
}


Denominando a tag span amarela


Agora deixa o estilo do , adicione o CSS abaixo:
#colormenu .yellow a{
    border-top:6px solid #e6ab07;
}


Quando a rolagem do mouse


quando o mouse é rollover mudar a cor de fundo, adicionar o CSS seguinte:
#colormenu .yellow a:hover{
    color:#FFF;
    background-color:#e6ab07;
    -webkit-border-bottom-left-radius: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -moz-border-radius-bottomright: 9px;
}


Denominando a tag 2span verde


Agora deixa o estilo do < span class = "green2" >, adicione o CSS abaixo:
#colormenu .green2 a{
    border-top:6px solid #2b9435;
}


Quando a rolagem do mouse


quando o mouse é rollover mudar a cor de fundo, adicionar o CSS seguinte:
#colormenu .green2 a:hover{
    color:#FFF;
    background-color:#2b9435;
    -webkit-border-bottom-left-radius: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -moz-border-radius-bottomright: 9px;
}


É isso que temos por fim:


Colocando tudo junto
#colormenu {
    margin:5px;
    padding:5px;
}
#colormenu a{
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    padding:6px 20px 9px 20px;
    font-size:20px;
    color:#000;
    text-decoration:none;
    font-weight:bold;
    text-transform: lowercase;
}

#colormenu .blue a{
    border-top:6px solid #326abd;
}
#colormenu .red a{
    border-top:6px solid #b8462c;
}
#colormenu .green a{
    border-top:6px solid #a5cc3b;
}
#colormenu .yellow a{
    border-top:6px solid #e6ab07;
}
#colormenu .green2 a{
    border-top:6px solid #2b9435;
}
#colormenu .blue a:hover{
    color:#FFF;
    background-color:#326abd;
    -webkit-border-bottom-left-radius: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -moz-border-radius-bottomright: 9px;
}
#colormenu .red a:hover{
    color:#FFF;
    background-color:#b8462c;
    -webkit-border-bottom-left-radius: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -moz-border-radius-bottomright: 9px;
}
#colormenu .green a:hover{
    color:#FFF;
    background-color:#a5cc3b;
    -webkit-border-bottom-left-radius: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -moz-border-radius-bottomright: 9px;
}
#colormenu .yellow a:hover{
    color:#FFF;
    background-color:#e6ab07;
    -webkit-border-bottom-left-radius: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -moz-border-radius-bottomright: 9px;
}
#colormenu .green2 a:hover{
    color:#FFF;
    background-color:#2b9435;
    -webkit-border-bottom-left-radius: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -moz-border-radius-bottomright: 9px;
}


Espero que gostem do tutorial.

Recomendado
Comentários
Destaquesver tudo