Minggu, 09 Juni 2013

  • CSS ~ Simple Horizontal Menu

    Assallamualaikum wr. wb.

    Back to Writing :D ,



    Dalam Postingan ini nisan akan mencoba share kembali tutorial sederhana, membuat simple Horizontal Menu di CSS.

    Langsung saja, pertama tulis kode HTML berikut :


    <div id="menu_wrapper">
    <ul id="menu">
    <li class="visited"><a href="hor_menu.html" title="Home" > Home </a> </li>
    <li><a href="#" > About </a> </li>
    <li><a href="#" > Product </a> </li>
    <li><a href="#" > Service </a> </li>
    <li><a href="#" > Contact </a> </li>
    </ul>
    </div>


    dan berikut kode CSS nya :

    body{
    padding : 50px;
    background:#fff;
    }

    #menu{
    width:1024px;
    margin: 50px auto;
    font-family:Arial, Sans-serif;
    padding:0;
    height:40px;
    background:#3498DB;
    font-weight:bold;
    list-style:none;
    border-top:2px solid #3498DB;
    border-bottom: 2px solid #34495E;
    }


    #menu li {
    float:left;
    margin:0;
    margin-left:15px;
    }

    #menu li a {
    text-decoration:none;
    width:75px;
    line-height:40px;
    color:#666;
    display:block;
    text-align:center;
    }

    #menu_wrapper li a{
    color: #ECF0F1;
    }

    #menu_wrapper li a:hover, #menu_wrapper li.visited a{
    color:#F39C12;
    background:#2980B9;
    border-bottom:2px solid #3498DB;
    }




    Sekian dari Nisan, semoga bermanfaat

    wassalamualaikum wr. wb




  • 0 komentar:

    Poskan Komentar

    Copyright @ 2013 Nisan BL0G.