1. Hello Guest, selamat datang di Forum WinPoin. Kamu bisa bertanya, berdiskusi, sharing, dan ngobrolin apapun seputar Windows, Windows Phone, PC, Gadget, atau hal seputar Teknologi lainnya. Selamat berkomunitas! ;)

Membuat Gradient Menu Sederhana

Discussion in 'Developer Corner' started by aidi, Nov 28, 2014.

  1. aidi

    aidi New Member

    Joined:
    Nov 4, 2014
    Messages:
    10
    ini tutorial sederhana khas pemula, jadi yang udah pada jago maafin aja yee :cool:

    menu.html
    Code:
    <div id="g_menu">
            <ul>
              <li><a href="#" title="Home" style="border:0;">Home</a></li>
              <li><a href="#" title="Profile">Profile</a></li>
              <li><a href="#" title="About">Pengeluaran</a></li>
              <li><a href="#" title="Download">Download</a></li>
            </ul>
    </div>
    
    style.css
    Code:
    #g_menu{
       width:auto;
        margin:20px;
        
    }
    
    #g_menu ul{
        list-style-type:none;
    }
    
    #g_menu ul li{
        background:linear-gradient(90deg, #03F, #09F);
        background:-moz-linear-gradient(90deg, #03F, #09F);
        background:-webkit-linear-gradient(90deg, #03F, #09F);
        height:30px;
        float:left;
        width:110px;
        text-align:center;
    }
    
    #g_menu ul li:hover{
        background:linear-gradient(120deg, #03F, #09F);
        background:-moz-linear-gradient(120deg, #03F, #09F);
        background:-webkit-linear-gradient(120deg, #03F, #09F);
        
    }
    
    
    #g_menu ul li a{
        display:block;
        text-transform:capitalize;
        font-size:13px;
        border-left:1px solid #06C;
        line-height:29px;
        padding:0 10px;
        text-decoration:none;
        color:#036;
        font-family:tahoma;
        font-weight:bold;
    }
    
    *untuk demonya udah saya cariin hosting gratis :ketawa:
    http://demoaja.zz.vc/menu.html
     
  2. Febian

    Febian Administrator Staff Member

    Joined:
    May 7, 2013
    Messages:
    8,029
    +Rep for share
    btw ada demo nya gak ni?
     
  3. aidi

    aidi New Member

    Joined:
    Nov 4, 2014
    Messages:
    10
    makasih +rep nya :kagum:
    itu demonya udah saya tambahin
     

Share This Page