ページを丸ごと切り替えるプラグインなど、他にもいろいろあると思いますが。
左から右に消えてゆくものが見つからないから、自作してみました。
まずデモを見てください。
デモ
作り方
html>bodyの中身
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!-- menu --> <div id="top"> <div id="menu"> <ul> <li><a href="#" rel="homepage" title="home" class="rounded">Home</a></li> <li><a href="about.html" rel="about" title="about us" class="rounded">About</a></li> <li class="menu-drop"><a href="#" rel="services" title="our services" class="rounded"><span class="menu-label">Services</span></a> <ul> <li><a href="#" rel="Nested1" title="Nested1">Nested1</a></li> <li><a href="#" rel="Nested2" title="Nested2">Nested2</a></li> <li><a href="#" rel="Nested3" title="Nested3">Nested3</a></li> <li><a href="#" rel="Nested4" title="Nested4">Nested4</a></li> </ul> </li> <li><a href="contact.html" rel="contact" title="contact us" class="rounded">Contact us</a></li> </ul> </div> </div> <div class="shadow"></div> <!-- content --> <div id="homepage">homepage</div> <div id="services">services </div> <div id="Nested1"><img src="images/bg_1.jpg" width="100%">aaa<br>bbb </div> <div id="Nested2">ccc<br>ddd </div> <div id="Nested3"><img src="images/bg_3.jpg" width="100%">eee<br>fff </div> <div id="Nested4">Nested4 </div> |
切り替えのコンテンツは、bodyタグの内部（例：#）でも、外部でも（例：about.html）行けます。
html>headの中身
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <link href="css/sliding.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery.address-1.4.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/sliding.js"></script> <script type="text/javascript"> $(document).ready(function (){ //Usage $("#menu ul li").slidingPage({ easing : 'easeInOutQuint', speed : 1500, slideScroll : 'horizontal', top : 64, navigation: {show: false,nestedPagesFlows: true} }); }); </script> |
バレましたか？そうです。これは実は、別のプラグインの改造なんです。
おまけ
確かにオリジナルになるプラグインの説明が不親切です。
もっと知りたい人は、このページを見てください。
