ドロワーメニューのカスタマイズについて

現在ドロワーメニューを起用したサイトを作成しています。
使用しているjQueryは下記のものになります。
https://www.adchsm.com/slidebars/demos/

demoの実装（left)は問題なかったのですが
メニューが開くと同時にcontentsが横に移動して表示が切れてしまう仕様を
contents内で伸縮するような？仕様にカスタマイズしたく
いろいろ調べたのですが、同じようなパターンもなく初心者で何をどうしたら良いのかわからない状況です。

やってみたのはcssでメニューを開いた時にcanvas="container"につく
class="js-close-any"にwidth:80%をつけるとそれっぽくそれっぽくなるのですが
画面幅が広がると無理がある感じです。

おわかりになる方、ご教示ください
よろしくお願いします。

＊追加
コンテンツ右側を固定にして、メニューの開閉でコンテンツの左側だけ伸縮するような仕様にするのはどのようにしたらいいかも教えていただきたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

.js-close-any {
    width: calc(100% - 255px);
    transition: width .3s;
}

でどうでしょう？

ただ、ライブラリでサポートされていないので、正直あまりおすすめではないですね...。container部分の幅が変わるとレイアウトの調整も面倒でしょうし。

https://www.adchsm.com/slidebars/demos/animation-styles/
のoverlayタイプなどもご検討されてみては？

=====追記=======
calcがサポート対象外とのことで、少し無理やりですが...

こんな感じでセットアップしてますよね？

var controller = new slidebars();
controller.init();

その箇所に追記して...

var controller = new slidebars();
controller.init();

// 以下追加部分
function setContainerWidth(isOpen){
  var windowWidth = window.innerWidth; // 画面幅を取得
  var sideBarWidth = 255; // サイドバーの横幅
  var $container = $('[canvas="container"]'); // 幅を変更する対象のcontainer

  // containerに幅をセット
  if(isOpen){
    $container.css('width', windowWidth - 255);
  }else{
    $container.css('width', '');
  }
}
$(controller.events).on('opening', setContainerWidth(true));
$(controller.events).on('closing', setContainerWidth(false));

でどうでしょう？　ざっくりなのでリファクタリングはよしなに。

投稿2017/05/18 13:05

編集2017/05/19 02:16