クリックしてJQueryでコンテンツを横方向にスライドさせ、もう一度クリックすると閉じることができます。

私は必要なものを見つけられないようです。それを説明するのがあまり難しくありませんが、私は基本的にこのウェブサイトの右上に「Connect」ソーシャルメディアバーが必要です - http://www.cmssquirrel.com/web_works/クリックしてJQueryでコンテンツを横方向にスライドさせ、もう一度クリックすると閉じることができます。

私はその目的のために正確には使用しませんが、私の機能を行う。私が見つけたものは、すべて縦型のメニュースタイルのようです。クリックでコンテンツを水平に展開し、もう一度クリックすると再び非表示にする必要があります。どこから始めたらいいのか分かりませんか？

出典

2012-02-26 Xhynk

ここでは、洗練されたソリューションよりも出発点がありますが、正しい方向に進む必要があります。

DEMO

HTML

<div class="wrap"> 
    <a class="open" href="#">open</a> 
    <div class="outer"> 
     <div class="slide"> 
      <a href="#">One</a> 
      <a href="#">a</a> 
      <a href="#">uaoeua</a> 
      <a href="#">aoeue</a> 
      <a href="#">aaoeeo</a> 
     </div> 
    </div> 
</div>

jQueryの

var w = 0; 

$('.slide').children().each(function() { 
    w += $(this).outerWidth(); 
}); 

$('.outer').width(w+5); 
$('.wrap').width(w); 
$('.slide').css('left', w); 

$('.open').toggle(function() { 
    $('.slide').stop().animate({ 
     left: 0 
    }); 
    $(this).html('close'); 
}, function() { 
    $('.slide').stop().animate({ 
     left: w 
    }); 
    $(this).html('open'); 
});

CSS

.wrap { 
    position: relative; 
    left: 50px; 
    top: 20px; 
} 
.outer { 
    height: 40px; 
    position: relative; 
    overflow: hidden; 
} 
.slide { 
    border-radius: 19px 19px 19px 19px; 
    position: absolute; 
    top: 0; 
    right: 0; 
    background-color: black; 
    height: 40px; 
} 
a { 
    color: gray; 
    line-height: 35px; 
    float: left; 
    outline: none; 
} 
.slide a { 
    float: left; 
    display: block; 
    padding: 0 10px; 
} 
.slide > :first-child { 
    padding-left: 15px; 
} 
.slide > :last-child { 
    padding-right: 45px; 
} 
.open { 
    position: absolute; 
    right: -25px; 
    top: 0; 
    background-color: black; 
    border-radius: 19px 19px 19px 19px; 
    height: 40px; 
    padding: 0 15px; 
    z-index: 5; 
}

出典

2012-02-26 06:18:16 shaunsantacruz

ありがとう！それはまさに私が必要なものです！私はこれを閉鎖し始めることができる方法はありますか？それ以外は、ありがとうトン！これは私が必要とする出発点です:) – Xhynk

問題ありません！私は閉じた状態で開始するように更新しました。 – shaunsantacruz

@alpaca lips nao：しかし、私はこれを一つのHTMLで実装しましたが、うまくいきません。私はへのリンクを追加し、$（ドキュメント）.ready（java関数の先頭にあるfunction（） –