Cara Membuat Menu Animation Dengan CSS3

Baca Juga

Menu Minimalistic

Bismillah... pada kesempatan ini lutfie tutorial blog akan sedikit membahas cara membuat menu Animation dengan CSS3, mungkin sobat sudah tau apa itu CSS? dan pitur terbarunya, dalam postingan ini saya tidak akan membahas banyak tentang CSS, namun saya akan sedikit share cara membuat menu minimalistis dengan CSS3.

Untuk membuat Menu animasi dengan CSS3 tidak terlalu rumit sobat tinggal ikuti langkah langkah berikut ini. jika sobat ingin mendalami tentang membuat menu animasi dengan CSS3 ini silahkan sobat baca di blog tentangga dengan alamat tutorialzine dot Com. daripada kesana kemari, kita langsung saja ke cara membuat menu minimalis dengan CSS3.

Script CSS3 MINIMALISTIC

<style>
#navigationMenu li{
    list-style:none;
    height:39px;
    padding:2px;
    width:40px;
}

#navigationMenu span{
    /* Container properties */
    width:0;
    left:38px;
    padding:0;
    position:absolute;
    overflow:hidden;

    /* Text properties */
    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
    font-size:18px;
    font-weight:bold;
    letter-spacing:0.6px;
    white-space:nowrap;
    line-height:39px;
   
    /* CSS3 Transition: */
    -webkit-transition: 0.25s;
   
    /* Future proofing (these do not work yet): */
    -moz-transition: 0.25s;
    transition: 0.25s;
}

#navigationMenu a{
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxjVW0P8cr7UlPYL1wl3__GDzpz9OOMlBW0hCAousYNKl5kQDxHGeROW1PpucYc4J3aZg8fUx85C2u3JZ_OGiDcr8OgRmX7smALlxhcojLWP6yDC03LFh4cAWL2uHkIP4YRipUTcICOww/s300/navigation.jpg') no-repeat;

    height:39px;
    width:38px;
    display:block;
    position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
    text-decoration:none;
   
    /* CSS outer glow with the box-shadow property */
    -moz-box-shadow:0 0 5px #9ddff5;
    -webkit-box-shadow:0 0 5px #9ddff5;
    box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home {    background-position:0 0;}
#navigationMenu .home:hover {    background-position:0 -39px;}
#navigationMenu .home span{
    background-color:#7da315;
    color:#3d4f0c;
    text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
    background-color:#1e8bb4;
    color:#223a44;
    text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
    background-color:#c86c1f;
    color:#5a3517;
    text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
    background-color:#d0a525;
    color:#604e18;
    text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
    background-color:#af1e83;
    color:#460f35;
    text-shadow:1px 1px 0 #d244a6;
}

/* The styles below are only needed for the demo page */

#tengah{
    margin:80px auto;
    position:relative;
    width:40px;
}


h1{
    color:#fff;
    font-size:30px;
    font-weight:normal;
    padding:60px 0 20px;
    text-align:center;
}

h2{
    font-weight:normal;
    text-align:center;
}

h1,h2{
    font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}

a, a:visited,a:active {
    color:#0196e3;
    text-decoration:none;
    outline:none;
}

a:hover{
    text-decoration:underline;
}

a img{
    border:none;
}


</style> 

Script Di atas adalah untuk mengatur tampilan menu, contoh penerapan di kode HTML
CONTOH PENERAPAN DI KODE HTML

<div id="tengah">

<ul id="navigationMenu">
    <li>
        <a class="home" href="#">
            <span>Home</span>
        </a>
    </li>
   
    <li>
        <a class="about" href="#">
            <span>About</span>
        </a>
    </li>
   
    <li>
         <a class="services" href="#">
            <span>Services</span>
         </a>
    </li>
   
    <li>
        <a class="portfolio" href="#">
            <span>Portfolio</span>
        </a>
    </li>
   
    <li>
        <a class="contact" href="#">
            <span>Contact us</span>
        </a>
    </li>
</ul>
   
</div>

Nah mungkin itu sedikit tutorial cara membuat menu minimalistic dengan CSS3 Good Luck, Happy Blogging