"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 ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/linghzang3/pen/CfLke?limit=all&page=29&q=panel" /> <style class="cp-pen-styles">/* Demo only styles*/ body { width: 600px; margin: 50px auto; padding: 0 0 400px 0; font-size: 14px; font-family: Arial, Helvetica; background-image: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/linedpaper.png); } a { color: #444; } .custom-headline { text-align: center; padding-bottom: 1000px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAD6CAMAAAA1MfELAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjVFNTQxNEZENjY1QjExRTJCNzU4ODZFMTZBMEQ4Q0M2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjVFNTQxNEZFNjY1QjExRTJCNzU4ODZFMTZBMEQ4Q0M2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NUU1NDE0RkI2NjVCMTFFMkI3NTg4NkUxNkEwRDhDQzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NUU1NDE0RkM2NjVCMTFFMkI3NTg4NkUxNkEwRDhDQzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5S9PU9AAAAP1BMVEXs7Oz////+/v7t7e329vbv7+/7+/vw8PD09PTu7u75+fn8/Pzz8/P19fXy8vL4+Pj9/f339/fx8fH6+vr////n0wjDAAAAFXRSTlP//////////////////////////wAr2X3qAAAD1klEQVR42uza2YLbIAwFUMBbvC/J/39rvcRYsgEpA2+Vn2aa9tSAgAsz6pPoUQIJJJBAAgkkkEACCSSQQAIJJJBAAv2XUFtOCaC2UuuTjbGQqdXxTJFQ83VUHgn1J7REQt0J1ZHQcELKxEGLhcpUb9SkgsZEnc0Y/yD0stArDsot1MVBs4WGOGhU/NIOQm8LVXFQa6EiDpoUf7IFIW2hLBKqU0GVfaVI6Id1JAx1qSC71tLLf7jxeSrIbiOqjYPe/LWW2GlTQcZC7zhIZ+zVn4CKVG9UsbcRAhpSQXYfmSMTW58KGtk7JAE1qaDyhPpIaEoFGfbmT0B2jkRDBTdFUFDFTREUNKSCukSQDW1LLJRzcw0FzdxcQ0FNKuidCmq5SYuCJm5AoiCTCtLcpEVCWSqoZiYtEipSQRUzaZFtX1JDbSzUMZNWSmgcRkOvbG8S2lacypBvREU2dUxvv9RzoY7Yt3oyaelmXvtG1cT/SEG632Zj1lioNuHV35O0yu8UqlVFHO3DkM1PtXoR4T4PJa3rYmBRJXEkD0HX4UnNChw3xxDUh+4XVGaUvr4t9E9QmV1QrpW+jgnB13+MxVRfTm02qAEvyIdAl6xFqDcInKVffOgFnG5F1Efr63jnWL5yd0BqFGrYAV0nDkee6p2ftKCj1XslPjtkMn9V9q6kZWAH9fqANmn0V2Xv+qADTrU7+1K7frF4q7J35BpQiSprd+eEWtBz7tEp3JW4jbyFNin3lcATgpW4lvThWAjUd+mEamclDqfz3Y7W78AqoF1Q5qrEwtwgXEx5CJrvHa0/N8hc92Cta6TvtyWgo+FOu/7J29m4Dl1FoY7ugQMhd+MGCJkCOAt0rr0fNQ6M3ACuosA6gToahwjUuMI8rutbPGCwox8QaJxdfqrrJWdfR99izda457J7QXAJUq+bg/IRKstzD7d0nt2nfAgCjftWE/zn12fT3cGJDTeuLtG9r7qtiToU/XDjshJe1/kq0QeBxq1hBY8UXhODYRQvKGs9ZawOcqRa3Djn07gcFwSuel1P53SeOfveuPuz74aswI62gudT6h8gPXud3uO4jhAa7XOMkfeeRda/Ozlnht0N+ZBunFCuf4J2qXM4hd/xHLPw7EUj9uN5zVngL/0n6FEDvlIMnyA1ypZH4Ak5/qMo3p6CJURCuJvaoBM4HGuUmva58cdTNuqmwvwdQtVUEg4F6W+gzimH+LHYOekWHQeddUl2EAvSYzXpWOiQNMOhL6KYDn1bkwz68BzOb/uwHPmNKIEEEkgggQQSSCCBBBJIIIEEEui/hv4JMAAD0sT0LCUdAgAAAABJRU5ErkJggg==) repeat-y center bottom; } /* CSS 3D list styles */ .folding { list-style-type: none; margin: 0; padding: 0; } .csstransforms3d .folding { -webkit-perspective: 700px; -moz-perspective: 700px; -ms-perspective: 700px; perspective: 700px; } .folding li { height: 50px; color: #fff; padding-left: 30px; border-left: 30px solid rgba(0,0,0,.1); } .csstransforms3d .folding li { -webkit-transition: ease .15s all; -moz-transition: ease .15s all; -o-transition: ease .15s all; -ms-transition: ease .15s all; transition: ease .15s all; } .csstransforms3d .folding li:nth-child(even) { margin-top: -1px; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: rotateX(10deg); -moz-transform: rotateX(10deg); -o-transform: rotateX(10deg); -ms-transform: rotateX(10deg); transform: rotateX(10deg); } .csstransforms3d .folding li:nth-child(odd) { -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: rotateX(-10deg); -moz-transform: rotateX(-10deg); -o-transform: rotateX(-10deg); -ms-transform: rotateX(-10deg); transform: rotateX(-10deg); } .folding .fb { background-color: #3959a6; } .folding .tw { background-color: #2fc6ff; } .folding .gp { background-color:#d84d30; } .folding .rss { background-color: #ff7e09; } .rss-link { color: #fff; font: .9em Arial, Helvetica; } .folding .content { position: relative; overflow: hidden; display: block; height: 20px; padding: 15px 0; } .csstransforms3d .folded li:nth-child(even) { margin-top: -75px; -webkit-transform: rotateX(75deg); -moz-transform: rotateX(75deg); -o-transform: rotateX(75deg); -ms-transform: rotateX(75deg); transform: rotateX(75deg); background-image: -webkit-linear-gradient(rgba(255,255,255,0) 50%, rgba(255,255,255,.5)); background-image: -moz-linear-gradient(rgba(255,255,255,0) 50%, rgba(255,255,255,.5)); background-image: -o-linear-gradient(rgba(255,255,255,0) 50%, rgba(255,255,255,.5)); background-image: -ms-linear-gradient(rgba(255,255,255,0) 50%, rgba(255,255,255,.5)); background-image: linear-gradient(rgba(255,255,255,0) 50%, rgba(255,255,255,.5)); } .csstransforms3d .folded li:nth-child(odd) { -webkit-transform: rotateX(-75deg); -moz-transform: rotateX(-75deg); -o-transform: rotateX(-75deg); -ms-transform: rotateX(-75deg); transform: rotateX(-75deg); } .csstransforms3d .folded .content { display: none; } /* Folding list heading */ .connect { padding: 12px 0 12px 30px; margin: 0 0 1px 0; color: #fff; border-left: 30px solid rgba(0,0,0,.2); cursor: pointer; font: bold .9em 'Lucida sans unicode',Arial, Helvetica; background-color: #555; } .csstransforms3d .connect { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC); background-repeat: no-repeat; background-position: -24px center; } /* Font awesome styles */ [class*="fontawesome-"]::before { font-family: 'FontAwesome', sans-serif; position: absolute; font-size: 55px; right: 30px; bottom: -15px; color: #fff; } [class*="fontawesome-"]:hover::before { bottom: -10px; } </style></head><body> <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://weloveiconfonts.com/api/?family=fontawesome"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script> <script src="https://apis.google.com/js/plusone.js" gapi_processed="true"></script> <script src="//connect.facebook.net/en_US/all.js#xfbml=1&appId=292896510767559" id="facebook-jssdk"></script> <script src="//platform.twitter.com/widgets.js" id="twitter-wjs"></script> </head> <body> <h2 class="connect">Connect with me</h2> <ul class="folding folded"> <li class="fb"> <div class="content"> [Facebook snippet] <a href="" class="fontawesome-facebook"></a> </div> </li> <li class="tw"> <div class="content"> [Twitter snippet] <a href="" class="fontawesome-twitter"></a> </div> </li> <li class="gp"> <div class="content"> [Google+ snippet] <a href="" class="fontawesome-google-plus"></a> </div> </li> <li class="rss"> <div class="content"> [Simple RSS link] <a href="" class="fontawesome-rss"></a> </div> </li> </ul> </body> </html> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >(function(){ if ($('html').hasClass('csstransforms3d')) { var foldingList = $('.folding'), foldingListHeight = $('.folding').height(); topElemOffset = foldingList.offset().top, // Function responsible for unfolding the list unfold = function(){ setTimeout(function(){ if (foldingList.hasClass('folded')){ foldingList.removeClass('folded'); return; } }, 500); } // Fold/Unfold the list $('.connect').on("click",function(){ foldingList.toggleClass('folded'); }) // If needed, unfold the list right away if (topElemOffset <= $(window).height() - foldingListHeight) unfold(); // Check whether to unfold the list when scrolling/resizing $(window).on("scroll resize", function(){ var th = $(this); if (th.scrollTop() + th.height() - foldingListHeight >= topElemOffset) unfold(); }) } })() (function(doc, script) { var js, fjs = doc.getElementsByTagName(script)[0], add = function(url, id) { if (doc.getElementById(id)) {return;} js = doc.createElement(script); js.src = url; id && (js.id = id); fjs.parentNode.insertBefore(js, fjs); }; // Google+ button add('https://apis.google.com/js/plusone.js'); // Facebook SDK add('//connect.facebook.net/en_US/all.js#xfbml=1&appId=292896510767559', 'facebook-jssdk'); // Twitter SDK add('//platform.twitter.com/widgets.js', 'twitter-wjs'); }(document, 'script')); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: