Membuat Menu Bar Flat Untuk Blog

Menu Bar Flat - Dengan maraknya penggunaan tampilan UI (User interface) maka saya akan posting satu menubar yang tidak kalah dengan menu bar UI lainnya. Menu bar ini sangat responsive menurut saya, karena ada animasi yang terpasang dalam menu bar ini. Perhatikan baik-baik tutorial berikut.

• DEMO

CSS Code:

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900); @import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css); nav ul { min-width: 600px; position: relative; display: table; margin: 50px auto; clear: both; } nav ul li { list-style: none; float: left; } nav ul li a { width: 100px; height: 100px; float: left; margin: 0 10px; -webkit-perspective: 600px; -moz-perspective: 600px; -ms-perspective: 600px; perspective: 600px; } nav ul li .front { text-align: center; -webkit-transform: rotateX(0deg) rotateY(0deg); -moz-transform: rotateX(0deg) rotateY(0deg); -ms-transform: rotateX(0deg) rotateY(0deg); -o-transform: rotateX(0deg) rotateY(0deg); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } nav ul li:hover .front { -webkit-transform: rotateX(0deg) rotateY(180deg); -moz-transform: rotateX(0deg) rotateY(180deg); -ms-transform: rotateX(0deg) rotateY(180deg); -o-transform: rotateX(0deg) rotateY(180deg); } nav ul li .back { position: absolute; top: 0; width: inherit; height: inherit; text-align: center; z-index: -1; -webkit-transform: rotateX(0deg) rotateY(-180deg); -moz-transform: rotateX(0deg) rotateY(-180deg); -ms-transform: rotateX(0deg) rotateY(-180deg); -o-transform: rotateX(0deg) rotateY(-180deg); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } nav ul li:hover .back { z-index: 1; -webkit-transform: rotateX(0deg) rotateY(0deg); -moz-transform: rotateX(0deg) rotateY(0deg); -ms-transform: rotateX(0deg) rotateY(0deg); -o-transform: rotateX(0deg) rotateY(0deg); } nav ul li i { line-height: 100px !important; color: white; vertical-align: middle !important; } nav ul li span { font-family: 'Roboto'; font-size: 20px; font-weight: 300; line-height: 100px; color: white; text-transform: lowercase; vertical-align: middle; } nav ul li.color-1 .front, nav ul li.color-1 .back { background-color: #3498db; } nav ul li.color-2 .front, nav ul li.color-2 .back { background-color: #2ecc71; } nav ul li.color-3 .front, nav ul li.color-3 .back { background-color: #1abc9c; } nav ul li.color-4 .front, nav ul li.color-4 .back { background-color: #f39c12; } nav ul li.color-5 .front, nav ul li.color-5 .back { background-color: #34495e; }

HTML Code:

<nav>
    <ul class="panel">
        <li class="color-1"> <a href="#">
                <div class="front">
                    <i class="fa fa-windows fa-4x"></i>
                </div>
                <div class="back">
                    <span>HOME</span>
                </div>
            </a>

TERUS.......

        </li>
    </ul>
</nav>