好玩的3D折叠效果的菜单
源码如下：
doctype html>
<html>
<head><link href='http://fonts.googleapis.com/css?family=Days+One' rel='stylesheet' type='text/css'><link rel="stylesheet" href="css/style.css">
<meta name="keywords" content="JS代码,{keyword},JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为{title}，属于站长常用代码。" />
<title>{title}title>
head>
<body><header class="header"><hgroup><h1>Makisuh1><h2>CSS 3D Dropdown Concepth2>hgroup>header><section class="demo"><dl class="list nigiri"><dt>Nigiridt><dd><a href="#">Maguroa>dd><dd><a href="#">Sakea>dd><dd><a href="#">Unagia>dd><dd><a href="#">Buria>dd><dd><a href="#">Suzukia>dd><dd><a href="#">Sabaa>dd><dd><a href="#">Iwashia>dd><dd><a href="#">Kohadaa>dd><dd><a href="#">Hiramea>dd><dd><a href="#">Tobiwoa>dd>dl><dl class="list maki"><dt>Makidt><dd><a href="#">Ana-kyua>dd><dd><a href="#">Chutoroa>dd><dd><a href="#">Kaiwarea>dd><dd><a href="#">Kampyoa>dd><dd><a href="#">Kappaa>dd><dd><a href="#">Nattoa>dd><dd><a href="#">Negitoroa>dd><dd><a href="#">Oshinkoa>dd><dd><a href="#">Otoroa>dd><dd><a href="#">Tekkaa>dd>dl><dl class="list sashimi"><dt>Sashimidt><dd><a href="#">Maguroa>dd><dd><a href="#">Toroa>dd><dd><a href="#">Ebia>dd><dd><a href="#">Sabaa>dd><dd><a href="#">Ikaa>dd><dd><a href="#">Takoa>dd><dd><a href="#">Tomagoa>dd><dd><a href="#">Kania>dd><dd><a href="#">Katsuoa>dd><dd><a href="#">Maguroa>dd>dl><a href="#" class="toggle">Togglea>
<div style="text-align:center">
<p>{google_729x90}p>
div>section><div class="warning"><div class="message"><h1>CSS 3D Not Detected :(h1><p>I couldn't detect your browser's CSS 3D capabilities. If I'm wrong, please <a href="https://github.com/soulwire/Makisu/issues" target="_blank">file an issuea>, otherwise, try a <a href="http://www.google.com/chrome" target="_blank">sexier browsera>p>div>div><a href="https://github.com/soulwire/Makisu" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub">a><script src="js/jquery.min.js">script><script src="js/makisu.js">script><script>// The `enabled` flag will be `false` if CSS 3D isn't availableif ( $.fn.makisu.enabled ) {var $sashimi = $( '.sashimi' );var $nigiri = $( '.nigiri' );var $maki = $( '.maki' );// Create Makisus$nigiri.makisu({selector: 'dd',overlap: 0.85,speed: 1.7});$maki.makisu({selector: 'dd',overlap: 0.6,speed: 0.85});$sashimi.makisu({selector: 'dd',overlap: 0.2,speed: 0.5});// Open all$( '.list' ).makisu( 'open' );// Toggle on click$( '.toggle' ).on( 'click', function() {$( '.list' ).makisu( 'toggle' );});// Disable all links$( '.demo a' ).click( function( event ) {event.preventDefault();});} else {$( '.warning' ).show();}script>body>
html>
下载源码
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！