Как увеличить ширину скольжения вне

Я хочу изменить, как далеко эта панель скользит в этом jsfiddle . Для этого я использовал код из этого jsfiddle. В этом случае, если я изменяю ширину slideit и левую близкую настройку на 200 вместо 100, ширина увеличивается и работает хорошо. Но если я сделаю то же самое в моем, панель исчезнет. Я предполагаю, что я не изменил что-то правильно при преобразовании его в левую сторону. Может ли кто-нибудь объяснить, как увеличить ширину, чтобы панель скользила дальше?

    <style>
    div#slideit {position: fixed; top: 100px; left:0px; margin: 0px; padding: 20px 0px 0px; color:#fff; background:#5681b4; list-style: none; z-index:9999; width: 100px; border-radius:0px 30px 30px 5px}
    div#slideit .slideit-btn {background:#5681b4; border-radius:0px 10px 10px 0px; position:absolute; top:10px; left:90px; width:40px; height:70px; display:block; cursor:pointer;}
    div#slideit .slideitspan {width:100px; margin:4px 2px; text-align:center; text-decoration:none; color:#FFF;}
    .vertical-text {
     font-size:18px; 
     transform: rotate(90deg);
     transform-origin: left top 0;
     position:absolute; top: 10px; left:34px;
    }
    </style>

    <div id="slideit">
     <div class="slideit-btn"> <span class="vertical-text"></span></div>
     <div class="slideitspan">You can now easily create banners, configure them as you like, link them to anywhere you want, like to products, categories, any page of your store or any other website and display them on various areas of your store, for example the front page. Learn more on the mini template system usage page </div>
    </div>   

    <script>
    $(function() {
     $.fn.ToggleSlide = function() {
         return this.each(function() {
             //$(this).css('position', 'absolute');

             if(parseInt($(this).css('left')) < 0) {
                 $(this).animate({ 'left' : '0px' }, 120, function() {
                 $(".vertical-text").text("Close");
                     //$(this).css('position', 'relative');
                 });
             }
             else {
                 $(this).animate({ 'left' : '-100px' }, 120, function() {
                 $(".vertical-text").text("Open");
                     //$(this).css('position', 'relative');
                 });
             }
         });
     };

    $('#slideit').ToggleSlide();

     $(".slideit-btn").bind("click", function() {
         $('#slideit').ToggleSlide();
     });
    });
    </script>

1 ответ

  1. Очень прямолинейно. Увеличение ширины html-элементов

    *{box-sizing: border-box;}
    #slideit, #slideit .slideitspan{width:300px;}
    #slideit .slideitspan{padding: 30px;}
    #slideit .slideit-btn{left: initial; right: -32px;}
    

    и затем отрегулируйте смещение, примененное js, на ту же сумму:

    $(this).animate({ 'left' : '-300px' }, 120, function() {...
    

    https://jsfiddle.net/2c7rzm3q/