パンくずメニューをスライドさせて表示させる。

今回作成するのは、
パンくずリストに動きをつけて表示させる
jQueryを作成します。

サンプルコードが今回は長いです。

実行結果はこちらからどうぞ

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>pankuzu</title>
   
    <script type="text/javascript" 
            src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript" 
            src="js/plugin/jquery.easing.1.3.js"></script>
    <script type="text/javascript" 
            src="js/plugin/slidepankuzu.js"></script>

    <style>
    #pankuzuList{
        list-style-type:none;
        margin:10px auto 5px;
        font-size:14px;}

        #pankuzuList li.home{
            background-color:aqua;
            background-repeat:no-repeat;}

        li a,
        li span{
            display:block;
            background-color:white;
            background-repeat:no-repeat;
            padding:10px 20px 10px 5px;}
        
        li.current a,
        li.current span{
            background-image:none;}   
    </style>
</head>
<body>

<ul id="pankuzuList">
    <li class="home"><a href="#">HOME</a></li>
    <li><a href="#">食品</a></li>
    <li><a href="#">飲料</a></li>
    <li class="current">
        <span><a href="#">アクセスマップ</a></span>
    </li>
</ul>

<script>
$(function(){
   $("#pankuzuList").slidePankuzu({
      speed:500,
      delay:0,
      interval:0,
      easing:"easeOutElastic"
   });
});

</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>pankuzu</title>

src="js/jquery-1.11.3.js"></script>

src="js/plugin/jquery.easing.1.3.js"></script>

src="js/plugin/slidepankuzu.js"></script>

<style>

#pankuzuList{

list-style-type:none;

margin:10px auto 5px;

font-size:14px;}

#pankuzuList li.home{

background-color:aqua;

background-repeat:no-repeat;}

li a,

li span{

display:block;

background-color:white;

background-repeat:no-repeat;

padding:10px 20px 10px 5px;}

li.current a,

li.current span{

background-image:none;}

</style>

</head>

<body>

<span><a href="#">アクセスマップ</a></span>

</li>

</ul>

$(function(){

$("#pankuzuList").slidePankuzu({

speed:500,

delay:0,

interval:0,

easing:"easeOutElastic"

});

</script>

</body>

</html>

$.fn.extend({
    slidePankuzu:function(options){
        //optionの初期値
        var defaultSettings = {
            
            //スライドスピード
            speed: 500,

            //スライド前の待機時間
            delay: 30,
            
            //スライド一回ごとの待機時間
            interval: 250,
            
            //スライド時のイージング
            easing: "swing"
        }
        //optionsが無いときは初期値に変更する
        for(var key in options){
            if( !options[key] && options[key] != 0){
                options[key] = defaultSettings[key];
            }
        }
        //li要素を取得
        var list = $(this).find("li");

        //最大の高さを使用する
        var maxHeight = list.first().outerHeight();

        list.each(function(i){
            $(this).css("z-index",list.length - i )
            .css("position","absolute")
            .css("left", -$(this).width() )
            .css("margin-top", -$(this).height()/2 )
            .css("top","50%");

            if( $(this).height() > maxHeight ){
                maxHeight = $(this).height();
            }
        });

        //ul要素のpositionを設定する。
        if( $(this).css("position") != "absolute" &&
            $(this).css("position") != "relative"){
            $(this).css("position","relative");    
        }

        //ul要素の高さを設定する
        if( $(this).height() < 1 ){
            $(this).css("height",maxHeight + "px");
        }
        $(this).css("overflow","hidden");

        //カスタムイベントをbindする
        list.unbind("slideComplete");
        list.bind("slideComplete",function(event,time){
           //スライドの終了の場所を求める
            var offset;

            if( $(this).prev().size()){
                offset = 
                $(this).prev().position().left + 
                $(this).prev().outerWidth();
            }else{
                offset = 0;
            }

            //スライドの開始位置へ移動する
            $(this).css("left", offset - $(this).outerWidth());

            //スライド開始
            $(this).delay(time).animate({
               left: offset + "px" 
            },options.speed,options.easing,function(){

                if( $(this).next().size()){
                    $(this).next().trigger("slideComplete",[options.interval]);    

                }else{
                    //スライド完了時の処理
                } 
            });
        });

        //初回のみ実行する処理
        list.first().trigger("slideComplete",[options.delay]);
    }
});

$.fn.extend({

slidePankuzu:function(options){

//optionの初期値

var defaultSettings = {

//スライドスピード

speed: 500,

//スライド前の待機時間

delay: 30,

//スライド一回ごとの待機時間

interval: 250,

//スライド時のイージング

easing: "swing"

}

//optionsが無いときは初期値に変更する

for(var key in options){

if( !options[key] && options[key] != 0){

options[key] = defaultSettings[key];

}

//li要素を取得

var list = $(this).find("li");

//最大の高さを使用する

var maxHeight = list.first().outerHeight();

list.each(function(i){

$(this).css("z-index",list.length - i )

.css("position","absolute")

.css("left", -$(this).width() )

.css("margin-top", -$(this).height()/2 )

.css("top","50%");

if( $(this).height() > maxHeight ){

maxHeight = $(this).height();

}

});

//ul要素のpositionを設定する。

if( $(this).css("position") != "absolute" &&

$(this).css("position") != "relative"){

$(this).css("position","relative");

}

//ul要素の高さを設定する

if( $(this).height() < 1 ){

$(this).css("height",maxHeight + "px");

}

$(this).css("overflow","hidden");

//カスタムイベントをbindする

list.unbind("slideComplete");

list.bind("slideComplete",function(event,time){

//スライドの終了の場所を求める

var offset;

if( $(this).prev().size()){

offset =

$(this).prev().position().left +

$(this).prev().outerWidth();

}else{

offset = 0;

}

//スライドの開始位置へ移動する

$(this).css("left", offset - $(this).outerWidth());

//スライド開始

$(this).delay(time).animate({

left: offset + "px"

},options.speed,options.easing,function(){

if( $(this).next().size()){

$(this).next().trigger("slideComplete",[options.interval]);

}else{

//スライド完了時の処理

}

});

//初回のみ実行する処理

list.first().trigger("slideComplete",[options.delay]);

}

});