Custom Your Android XD))

Thursday, January 1, 2015

Responsive Menu Navigation

Navigation Responsive

Cara membuat navigasi responsive akan saya beri tutorialnya :) original post by Ruly Nakula langsung saja ndak usah pakai basa basi :)

Taruh kode CSS ini :
.navbar { height: 48px; width: 100%; margin-top: -5px; background-color: #222; background-image: linear-gradient(#333, #222); position: relative; border-top: 1px solid #444; border-bottom: 1px solid #555 } .navbar ul { padding: 0; margin: 0 auto; width: 640px; height: 48px } .navbar ul { list-style: none; } .navbar ul li { float: left } .navbar ul li a { color: #fff; display: inline-block; width: 105px; font:normal normal 500 15px/48px 'Yanone Kaffeesatz', Helvetica, Arial, sans-serif; text-align: center; letter-spacing: 1px; text-decoration: none; text-shadow: 0 -1px rgba(143, 222, 98, .1); border-right: 1px solid #555; transition: color .2s ease-in-out; box-sizing: border-box } .navbar li:last-child a { border-right: 0 ;} /* ADDS THIS CLASS ON SCROLL */ .fixed { position: fixed; top: 0; margin: 0 } /* FONTAWESOME */ .fa { margin-right: 10px } /* RESPONSIVE DESIGN */ @media screen and (max-width: 600px) { .navbar ul { width: 100%; display: block; height: auto} .navbar ul li { width: 50%; float: left; position: relative; background-color: #222; background-image: linear-gradient(#333, #222) } .navbar ul li a { text-align: left; width: 100%; padding-left: 25px; border-bottom: 1px solid #555; border-right: 1px solid #555 } } /* COLORS */ .green a:hover { color: #8fde62 } .blue a:hover { color: #3cf } .red a:hover { color: #fc7171 } .purple a:hover { color: #e25cf9 }
Kemudian taruh HTLMnya sesuai dengan selera kalian :)
<div class='navbar purple'> <ul> <li><a href="#"><span class='fa fa-home'></span>Home</a></li> <li><a href="#"><span class='fa fa-file'></span>Resources</a></li> <li><a href="#"><span class='fa fa-wrench'></span>Tools</a></li> <li><a href="#"><span class='fa fa-list'></span>Examples</a></li> <li><a href="#"><span class='fa fa-tag'></span>Tags</a></li> <li><a href="#"><span class='fa fa-pencil'></span>Blog</a></li> </ul>
Sekian yang bisa saya bagikan, kalau ndak paham bisa ditanyakan di komentar :)


Share on Facebook
Share on Twitter
Share on Google+
Tags :

Related : Responsive Menu Navigation

5 Comments

Don't give us spam!!!