Curta Nossa Página do Facebook!


  • Desenvolvido Por Iago Melanias

    Menu Fixo - Header

    E ai galera, vou ensinar a vocês como criar um Menu Fixo Top! É bem simples, só vamos usar CSS e HTML. Não é preciso criar Sidebar. Bom... Por exemplo:

    DEMO
    Primeiramente vamos abrir Blogger > Design > HTML. (Minima)
    • Procure por:
    ]]></b:skin>
    • Acima dele coloque o seguinte CSS:
    /* NavTop Menu
    ----------------------- */
    #navtop { /*--container geral do menu--*/
    border-bottom:0px solid #666; /*--Edite cor da borda--*/
    background:#; /*--Edite cor de fundo--*/
    padding:0px 20px;
    position:fixed;
    top:0;
    left:0;
    z-index:2000;
    width:100%;
    }
    #navtop li {
    float: left;
    display: block;
    padding:5px;
    }
    #navtop li a, #navtop li a:link, #navtop li a:visited { /*--links do menu--*/
    float: left;
    display: block;
    padding: 5px;
    text-transform: none;
    text-decoration:none;
    background: #ccc; /*--Edite cor de fundo dos links--*/
    color:#000; /*--Edite cor dos links--*/
    border:1px solid #666; /*--Edite cor de borda--*/
    font-size:12px; /*--Edite tamanho da fonte--*/
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    }
    #navtop li a:hover { /*--links no estado hover--*/
    background: #003c48; /*--Edite cor de fundo dos links--*/
    color:#fff; /*--Edite cor dos links--*/
    border:1px solid #0b0b0b;
    text-decoration:none;
    }

    #navtop li ul {
    display: none;
    }
    • Agora procurem por:
    <body>
    • Abaixo do código acima coloque o seguinte HTML:
    <div id='navtop'>
    <li><a href='SEU-LINK-AQUI' title='#'>HOME</a></li>
    <li><a href='SEU-LINK-AQUI' title='#'>Title 2</a></li>
    </div>
    Edite os valores para seu agrado, caso tenha alguma dúvida comente. Até a próxima.

    Um comentário: