好久没有分享网页设计的东西了,今天给各位带来一款css 3D效果的折叠菜单,希望能够喜欢。
在你的网站中应用这种 css 3d列表菜单,添加社交相关按钮插件等,可以为你的网站增色不少。
HTML
<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>
JavaScript
<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> (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(); }) } })() </script>
CSS
.folding { list-style-type: none; margin: 0; padding: 0; } .csstransforms3d .folding { perspective: 700px; } .folding li { height: 50px; color: #fff; padding-left: 30px; border-left: 30px solid rgba(0,0,0,.1); } .csstransforms3d .folding li { transition: ease .15s all; } .csstransforms3d .folding li:nth-child(even) { margin-top: -1px; transform-origin: 50% 100%; transform: rotateX(10deg); } .csstransforms3d .folding li:nth-child(odd) { transform-origin: 50% 0%; 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; transform: rotateX(75deg); background-image: linear-gradient(rgba(255,255,255,0) 50%, rgba(255,255,255,.5)); } .csstransforms3d .folded li:nth-child(odd) { 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[shortened]); background-repeat: no-repeat; background-position: -24px center; }
版权所有:爱斯诺博客(isnowe) 《css 3D 折叠菜单》
本文链接:http://isnowe.com/css-3d-pulldown-menu.html
特别声明:除特别标注,本站文章均为原创,遵循CC BY-NC 3.0,转载请注明出处