• » Introdução PHP
  • » Box em Video
  • » Adicionando PHP á HTML
  • » Postagem com PHP
  • » Progamas Atualizados!
  • » Concurso de Layout!


  • Bom galera da OfMixers, esse tutorial de hoje ensina como por Menu Vertical Fast, que fica muito lgl no seu blog =D. bom vamos a o que interessa:

    Para Colocar esse efeito primeiro procure por: ]]>
    , e acima dele cole o seguinte codigo
    /* Menu Vertical
    -----------------------------------------------*/
    #menuvertical li {
    margin:0;
    padding-top:0;
    padding-bottom:.25em;
    padding-$startSide:15px;
    line-height:1.5em;
    list-style:none;
    }
    #menuvertical li {
    height:20px;
    font-family:Arial;/*TIPO DA FONTE*/
    margin:-1px 0 0 3px;
    text-indent:-15px;
    text-shadow:0 0 .3em #2a2a2a;/*SOMBRA DO TEXTO*/
    font-weight:bold;
    color:#000;/*COR DA FONTE*/
    text-decoration:none;
    padding:1px 0 0 15px;
    font-size:15px;
    text-decoration:none;
    padding:0px 0 0 1px;
    font-size:120%;
    }
    #menuvertical li:hover{
    height:20px;
    font-family:Arial;
    text-indent:-15px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.5s linear;
    }
    #menuvertical li a{
    padding:0px 0 0 18px;
    font-family: Century Gothic;/*TIPO DA FONTE*/
    font-size:17px;/*TAMANHO DA FONTE*/
    width:186px;/*LARGURA*/
    height:20px;/*ALTURA*/
    font-weight:normal;/*ESTILO DA FONTE*/
    color:#c2c2c3;/*COR DA FONTE*/
    text-decoration:none;
    display:block;
    border-bottom:1px solid #e0e1e4;
    -webkit-transition:All 0.5s ease;
    -moz-transition:All 0.5s ease;
    -o-transition:All 0.5s ease;
    }
    #menuvertical li a:hover{
    color:#0e0e0e;/*COR DA FONTE*/
    width:186px;/*LARGURA*/
    height:20px;/*ALTURA*/
    text-decoration:none;
    border-bottom:1px solid #e1e2e3;/*COR DA BORDA INFERIOR*/
    -webkit-transition:All 0.2s ease;
    -moz-transition:All 0.2s ease;
    -o-transition:All 0.2s ease;
    padding-left:28px;
    }

    Bom Depois disso add um novo gadget, HTML/JavaScript e cole:


    <div class='menuhorizontal-fast'>
    <a href='#'>Test</a>
    <a href='#'>Test</a>
    <a href='#'>Test</a>
    <a href='#'>Test</a>
    <a href='#'>Test</a>
    </div>




    Proto, Agora é só ajeita o lugar da sibebar e Proto ^^


    Não esqueça de dar um like para nós no Facebook ^^








    Nenhum comentário:

    Postar um comentário