Google Play垂直菜单js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 Google Play垂直菜单js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>

<head>
  <meta charset="gb2312">
  <title>Google Play��ֱ�˵�</title>
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>
  <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>
</body>
</html>

JS代码(index.js):

/*To Do:Add Active State when selected then and append to topRevert to normal order after becoming inactiveSecondary Menu*/

CSS代码(style.css):

@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;margin:30px 0 0 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;}

附件:下载该文件资源,减少时间成本(增值服务)