/* BilgiBlog.tk Google Play Tarzı Menü | HTML & CSS http://bilgiblogtr.blogspot.com.tr/2014/02/google-play-tarz-menu-html-css.html Ön İzleme İçin Result Sekmesine Tıklayın */
<nav> <ul> <li class="store"><span class="store-icon"></span><a href="#">Store</a></li> <li class="movies"><span class="movies-icon"></span><a href="#">Movies</a></li> <li class="music"><span class="music-icon"></span><a href="#">Music</a></li> <li class="books"><span class="books-icon"></span><a href="#">Books</a></li> <li class="magazines"><span class="magazines-icon"></span><a href="#">Magazines</a></li> <li class="devices"><span class="devices-icon"></span><a href="#">Devices</a></li> </ul> </nav>
@import url(http://fonts.googleapis.com/css?family=Roboto:300); nav { background: rgba(245, 245, 245, 0.95); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); width: 200px; } nav ul { padding: 0; margin: 0; } nav ul li { list-style: none; height: 50px; } nav ul li:hover { width: 200px; height: 50px; } nav ul li a { position: absolute; width: 140px; height: 40px; text-decoration: none; color: #555; padding: 10px 0 0 60px; } nav ul li a:hover { color: #fff; } .store { background: #b3c833; width: 50px; height: 50px; margin-bottom: px; } .movies { background: #ce5043; width: 50px; height: 50px; margin-bottom: px; } .music { background: #fb8521; width: 50px; height: 50px; margin-bottom: px; } .books { background: #1aa1e1; width: 50px; height: 50px; margin-bottom: px; } .magazines { background: #5e5ca6; width: 50px; height: 50px; margin-bottom: px; } .devices { background: #658092; width: 50px; height: 50px; margin-bottom: px; } .store-icon { position: absolute; margin-left: 10px; padding-top: 12px; } .store-icon:before { width: 50px; height: 50px; margin-right: 30px; content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAA0UlEQVRIx+XWUQ2DMBCA4UpAAhIqAQmTgIRJqIRKqAQkIAEJSKiDfy+3rFm6wpWyJeySvnC0H1euBAOYbwzzE6gUQAcEIPKKCbCFOToIsAkQAAd4uRaBWytokQVtpspnrj8EAaNUMn7I95L3R6EJWDfeX/YeLTQD0wbkyCxQam9P+3A5yF0OuhcmRGBtBQ2FCXPS7lEBDVVQclDdTrAeejusoQbqNFAClh7QZg+ssqI9W2gOQdIUe7qwDpJtWhRdp4aifPe0oYZq4x+g6/1unTkek/bCyLhDiUMAAAAASUVORK5CYII="); } .movies-icon { position: absolute; margin-left: 10px; padding-top: 12px; } .movies-icon:before { width: 50px; height: 50px; margin-right: 30px; content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAANklEQVRIx2P4//8/Az0ww6hF1LCIVmCALWKAArJNxdQ/GnSjQTcadKNBNxp0wyLoRtsMI9wiAFADCXZf9dlZAAAAAElFTkSuQmCC"); } .music-icon { position: absolute; margin-left: 10px; padding-top: 12px; } .music-icon:before { width: 50px; height: 50px; margin-right: 30px; content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAABWklEQVRIx82W0Y2DMAxAGSEjZARGYARGYAQ2aDYoG7QbXDcoG8AGxwZlg3cf50i+NA2BRtVZCh/E8Usc23EFVJ8Yv58MAZpwJHT3gYAOuJGWEegOgYAWWNgnC9Bmg4AhYmQCzsBJjbP8D2XYBEUgF8Bu3J0VPS3XlyBxl5dH6rITwfJQNtonEGCAVUHq6oDI6b7Fzip2/4D6dyEKVquT9SFo9hNVAVEbn0PQCbhUhURsTmL3KRjGxO5cGH1yHy7mBTG+vAoGACOKRgx1OiEDY6uaawSq1xMLBqd8atRCp5MjAGnxuo2sn8Pk9SCdqKuKmDETNKgAWGNVwoNskGzeHbmgUfQJkt7GgqEvDOpTte6rEOi+VVRdIZD7NyBTCGRyHr6rKHc7QDf1zFxzX1gjdcqF/UJGwk6x06R6BquqQw6oFw/Yo11QrUM2mLurOftWu6VOVyc2YnP6uh+8uEodULzJQAAAAABJRU5ErkJggg=="); } .books-icon { position: absolute; margin-left: 10px; padding-top: 12px; } .books-icon:before { width: 50px; height: 50px; margin-right: 30px; content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAA9klEQVRIx+3VYQ2DMBCGYSQgYRJwMCQgAQk4ACcgAQfgAAnMAXPw7sc+kqOjwBjjF5c0hGt7D21ILgCCM4abSIAaaPUsgFuwEsBNa+3e2AcVQASEQM40aiD2AJVZNwC55mKhH9AYlbAI6BywMEgKPM1cIzh0cC+ECqQq6J6u0BXbGE+ROfgqNEarr4z1xY3yD/MeaU3rqbEJGk+X4f+j5k6xC7IbtuQu6IIu6IJ2QAnvfnIUNKjmFDKNrDsA6lBnnoU0EQLlD1AJhKbePOR00OELaEDN0qmzDGmRbedLUAdEnhrrkHOVAdAbpFfubq9qFfr3OA16AcSstrz4r0qKAAAAAElFTkSuQmCC"); } .magazines-icon { position: absolute; margin-left: 10px; padding-top: 12px; } .magazines-icon:before { width: 50px; height: 50px; margin-right: 30px; content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAA1klEQVRIx72WYQ3DIBBGkVAJSMDAEiQgoRIqAQmTMAmVgIRJqIQ5ePuxa8K6lgSyuy+5pAncfX1wvdQB7krABEQgAw+gAC9aSZ+8n3B1DuCBBViBjbbCkJG8+VF3oVqEqg7fbQQEKXqTovP+LImpVbiXaNezPrbD2ogujb53KRilwx0ULaO9dYscnxpRtCLKVkTeiihWRKrtPVkRTaNEF5Ph3KhqCF0iKdhN1Jh1TaOiPoJGjUaJshVRtiKarYiiFVEwITorWn1ffzdaZUMBkhtQ6y9IPd6TPeBqjeAP/QAAAABJRU5ErkJggg=="); } .devices-icon { position: absolute; margin-left: 10px; padding-top: 12px; } .devices-icon:before { width: 50px; height: 50px; margin-right: 30px; content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAa0lEQVRIx2P4//8/Az0wusCC/5SDBAYowGcRVQDRFjGQCciyiBxfjFo0ci0C5TkBAqmQKhYZEKHmA8UWwdQQka9GLRq1aNSiUYtItYjYqpsii4gAB3BZhFyi47PoApEWgUplBShNVulNMwwA8TkerCj0FuMAAAAASUVORK5CYII="); } body { background: #e5e5e5; font-family: 'Roboto', sans-serif; font-size: 18px; }