"ions nav"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="dockposition"> <div class="content"> <div class="back"></div> <div class="icons"> <div class="icon" tabindex="1"><i class="material-icons">apps</i> <div class="title">Apps</div> </div> <div class="icon" tabindex="1"><i class="material-icons">folder_open</i> <div class="title">Finder</div> </div> <div class="icon" tabindex="1"><i class="material-icons">settings_brightness</i> <div class="title">Brightness</div> </div> <div class="icon" tabindex="1"><i class="material-icons">settings_voice</i> <div class="title">Voice</div> </div> <div class="icon" tabindex="1"><i class="material-icons">settings</i> <div class="title">Settings</div> </div> <div class="icon" tabindex="1"><i class="material-icons">tune</i> <div class="title">Sliders</div> </div> <div class="icon" id="downloads" tabindex="1"><i class="material-icons open">open_in_browser</i><i class="material-icons close">system_update_alt</i> <div class="title">Downloads</div> <div class="downloads"> <div class="download"> <div class="text">Sublime Text Build 3126.dmg</div> <div class="icon"><i class="material-icons">description</i></div> </div> <div class="download"> <div class="text">googlechrome.dmg</div> <div class="icon"><i class="material-icons">description</i></div> </div> <div class="download"> <div class="text">mode-v7.90-x64.dmg</div> <div class="icon"><i class="material-icons">description</i></div> </div> <div class="download"> <div class="text">VirtualBox-5.1.22-115126.zip</div> <div class="icon"><i class="material-icons">unarchive</i></div> </div> <div class="download"> <div class="text">snapshot-03-31-2017-36MP.jpg</div> <div class="icon"><i class="material-icons">insert_photo</i></div> </div> <div class="download"> <div class="text">Open in Finder</div> <div class="icon"><i class="material-icons">open_in_new</i></div> </div> </div> </div> </div> </div> </div> <script //For the demo only setTimeout(function(){ document.getElementById('downloads').classList.add('demo') }, 1000) document.body.addEventListener('click', function(){ document.getElementById('downloads').classList.remove('demo') });
html, body { padding: 0px; margin: 0px; background: #222; font-family: 'Ubuntu', sans-serif; color: #FFF; height: 100%; } body { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/545665/bg_mountainroad.jpg"); background-size: cover; background-position: center; } .dockposition { position: absolute; height: 100px; width: 100%; bottom: 0px; } .dockposition .content { width: 680px; margin: auto; height: 100%; background: rgba(255, 255, 255, 0.5); border-radius: 4px 4px 0px 0px; position: relative; } .dockposition .content .back { position: absolute; height: 100%; width: 100%; left: 0px; overflow: hidden; } .dockposition .content .back:after { content: ''; background: rgba(255, 255, 255, 0.25); width: 100%; height: 100%; top: 0px; left: 0px; position: absolute; -webkit-filter: blur(10px); filter: blur(10px); } .dockposition .icons { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .dockposition .icons > .icon { margin: auto; display: inline-block; box-sizing: border-box; width: 70px; height: 70px; border-radius: 10px; background: rgba(255, 255, 255, 0.75); border: 0px solid rgba(0, 0, 0, 0.75); box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25); text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all 0.5s; transition: all 0.5s; -webkit-transform-style: flat; transform-style: flat; outline: none; cursor: pointer; } .dockposition .icons > .icon:focus:not(#downloads) { background: rgba(255, 255, 255, 0.5); -webkit-animation: bounce 1s; animation: bounce 1s; } .dockposition .icons > .icon i { margin: auto; color: rgba(0, 0, 0, 0.75); font-size: 36px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .dockposition .icons > .icon .title { z-index: 2; position: absolute; top: -110%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: rgba(0, 0, 0, 0.75); padding: 10px 15px; border-radius: 4px; opacity: 0; -webkit-transition: all 0.25s; transition: all 0.25s; } .dockposition .icons > .icon .title:after { content: ''; position: absolute; border: 10px solid transparent; border-top: 10px solid rgba(0, 0, 0, 0.75); bottom: -20px; left: 50%; -webkit-transform: translateX(-50%) translateY(0px); transform: translateX(-50%) translateY(0px); } .dockposition .icons > .icon:hover .title { opacity: 1; } .dockposition .icons > .icon#downloads { margin-left: 40px; } .dockposition .icons > .icon#downloads:before { content: ''; height: 100%; position: absolute; left: -26px; border-left: 1px solid rgba(0, 0, 0, 0.5); } .dockposition .icons > .icon#downloads:after { position: absolute; content: '6'; width: 30px; height: 30px; font-size: 14px; background: #f22; opacity: 0.8; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25); border-radius: 100%; line-height: 30px; left: 70%; top: -6px; } .dockposition .icons > .icon#downloads:focus, .dockposition .icons > .icon#downloads.demo { pointer-events: none; } .dockposition .icons > .icon#downloads:focus .download, .dockposition .icons > .icon#downloads.demo .download { opacity: 1; } .dockposition .icons > .icon#downloads:focus .download:nth-of-type(1), .dockposition .icons > .icon#downloads.demo .download:nth-of-type(1) { -webkit-transform: translateY(0%) rotateZ(0deg) translateX(0px); transform: translateY(0%) rotateZ(0deg) translateX(0px); } .dockposition .icons > .icon#downloads:focus .download:nth-of-type(2), .dockposition .icons > .icon#downloads.demo .download:nth-of-type(2) { -webkit-transform: translateY(-105%) rotateZ(2deg) translateX(2.5px); transform: translateY(-105%) rotateZ(2deg) translateX(2.5px); } .dockposition .icons > .icon#downloads:focus .download:nth-of-type(3), .dockposition .icons > .icon#downloads.demo .download:nth-of-type(3) { -webkit-transform: translateY(-210%) rotateZ(4deg) translateX(5px); transform: translateY(-210%) rotateZ(4deg) translateX(5px); } .dockposition .icons > .icon#downloads:focus .download:nth-of-type(4), .dockposition .icons > .icon#downloads.demo .download:nth-of-type(4) { -webkit-transform: translateY(-315%) rotateZ(6deg) translateX(7.5px); transform: translateY(-315%) rotateZ(6deg) translateX(7.5px); } .dockposition .icons > .icon#downloads:focus .download:nth-of-type(5), .dockposition .icons > .icon#downloads.demo .download:nth-of-type(5) { -webkit-transform: translateY(-420%) rotateZ(8deg) translateX(10px); transform: translateY(-420%) rotateZ(8deg) translateX(10px); } .dockposition .icons > .icon#downloads:focus .download:nth-of-type(6), .dockposition .icons > .icon#downloads.demo .download:nth-of-type(6) { -webkit-transform: translateY(-525%) rotateZ(10deg) translateX(12.5px); transform: translateY(-525%) rotateZ(10deg) translateX(12.5px); } .dockposition .icons > .icon#downloads:focus .download:nth-of-type(7), .dockposition .icons > .icon#downloads.demo .download:nth-of-type(7) { -webkit-transform: translateY(-630%) rotateZ(12deg) translateX(15px); transform: translateY(-630%) rotateZ(12deg) translateX(15px); } .dockposition .icons > .icon#downloads:focus .open, .dockposition .icons > .icon#downloads.demo .open { opacity: 0; } .dockposition .icons > .icon#downloads:focus .close, .dockposition .icons > .icon#downloads.demo .close { opacity: 1; } .dockposition .icons > .icon#downloads .open, .dockposition .icons > .icon#downloads .close { position: absolute; opacity: 1; -webkit-transition: all 0.5s; transition: all 0.5s; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); opacity: 1; } .dockposition .icons > .icon#downloads .close { opacity: 0; } .dockposition .icons > .icon#downloads .download { position: absolute; top: -120%; right: 8%; width: 350px; opacity: 0; -webkit-transition: all 0.5s; transition: all 0.5s; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; z-index: 1; text-align: right; } .dockposition .icons > .icon#downloads .download .text { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: inline-block; text-align: right; margin: auto; padding: 5px 10px; background: rgba(0, 0, 0, 0.75); border-radius: 4px; vertical-align: top; margin-top: 14px; } .dockposition .icons > .icon#downloads .download .icon { display: inline-block; width: 60px; text-align: right; vertical-align: top; } .dockposition .icons > .icon#downloads .download .icon i { color: #FFF; font-size: 60px; } @-webkit-keyframes bounce { 0% { -webkit-transform: translateY(0px) translateX(0.1px); transform: translateY(0px) translateX(0.1px); } 25% { -webkit-transform: translateY(-40px) translateX(0.1px); transform: translateY(-40px) translateX(0.1px); } 50% { -webkit-transform: translateY(0px) translateX(0.1px); transform: translateY(0px) translateX(0.1px); } 75% { -webkit-transform: translateY(-20px) translateX(0.1px); transform: translateY(-20px) translateX(0.1px); } 100% { -webkit-transform: translateY(0px) translateX(0.1px); transform: translateY(0px) translateX(0.1px); } } @keyframes bounce { 0% { -webkit-transform: translateY(0px) translateX(0.1px); transform: translateY(0px) translateX(0.1px); } 25% { -webkit-transform: translateY(-40px) translateX(0.1px); transform: translateY(-40px) translateX(0.1px); } 50% { -webkit-transform: translateY(0px) translateX(0.1px); transform: translateY(0px) translateX(0.1px); } 75% { -webkit-transform: translateY(-20px) translateX(0.1px); transform: translateY(-20px) translateX(0.1px); } 100% { -webkit-transform: translateY(0px) translateX(0.1px); transform: translateY(0px) translateX(0.1px); } }

Related: See More


Questions / Comments: