Comment faire un panneau bascule gauche/droite?

J'ai le code suivant, ci-dessous, il bascule en haut et en bas de l'amende. mais comment puis-je faire le panneau de bascule à gauche et à droite? Je veux la Diapositive Panneau pour montrer au bord lors de la fermeture et de montrer à l'élargissement de côté lorsqu'il est ouvert

quelque chose comme cela, mais sur la gauche, au lieu d'en haut. http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html

<script type="text/javascript">
$(document).ready(function(){

    $(".btn-slide").click(function(){
        $("#panel").slideToggle("slow");
        //$("#panel").slideToggle("slow", {direction: "left"}, 100);
        $(this).toggleClass("active"); return false;
    });


});
</script>

CSS

<style>


/** left sliding panel **/

#panel {
/** background: #754c24; */
    height: 500px;
    display: none;
}
.slide {
    margin: 0;
    padding: 0;
/*  border-top: solid 4px #422410;  */
    background: url(images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
    background: url(images/white-arrow.gif) no-repeat right -50px;
    text-align: center;
    width: 144px;
    height: 31px;
    padding: 10px 10px 0 0;
    margin: 0 auto;
/*  display: block;  color: #fff;*/
    font: bold 120%/100% Arial, Helvetica, sans-serif;

    text-decoration: none;
}

</style>

Html

    <div id="panel">

 content will be shown here.

    </div> <!--  end  Panel content-->

    <div id="openCloseWrap">
     <p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>
    </div>
</div>
InformationsquelleAutor user244394 | 2013-04-29
  1. 2

    Assurez-vous d'inclure jQuery et jQueryUI. Ici est mon exemple:

    $("button").click(function () {
  $('div').hide("slide", {
    direction: "left"
  }, 1000);
});
    • est-il possible d'avoir le bouton de glisser à gauche et à droite quelque chose comme ceci webdesignerwall.com/demo/jquery/simple-slide-panel.html, de sorte que lors de son fermé uniquement le bouton est visible. mais c'est de gauche à droite au lieu de haut en bas.
    • J'ai mis à jour le jsFiddle
    InformationsquelleAutor George
  2. 0

    Pourriez avoir besoin d'un peu plus d'infos à propos de ce que vous recherchez exactement.

    Mais ce qui pourrait vous aider:
    http://jsfiddle.net/anJVs/1/

    La principale différence ici est:

    $("#panel").animate({width: 'toggle'});

    Vous êtes à la recherche de quelque chose comme ça?

    InformationsquelleAutor russter