バージョン選択

フォーラム

 どうか教えて下さい！  バグ見つけましたよ！  こんな機能あったらなぁ  プラグインについて  その他

メニュー

 当サイトについて  初めてご利用になる方へ  EC-CUBE開発情報

オンライン状況

40 人のユーザが現在オンラインです。 (34 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 40
もっと...

サイト内検索
質問 > フロント機能 > ドロワーメニューについて

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
mrb56
投稿日時: 2016/3/7 14:06
対応状況: −−−
常連
登録日: 2016/2/3
居住地:
投稿: 32
ドロワーメニューについて
現在ECCUBE3のデフォルトテンプレートでページを制作しております。

タブレットやスマホでのドロワーメニューはデフォルトですと右からスライドしますが、これを左からスライドさせるにはどのようにカスタムを行えばよいのでしょうか。
shhirose
投稿日時: 2016/3/8 20:11
対応状況: −−−
一人前
登録日: 2014/4/24
居住地:
投稿: 94
Re: ドロワーメニューについて
function.js で制御しています。

    /////////// Drawer menu

    $('.nav-trigger').on('click', function (event) {
        event.preventDefault();
        if ($('.drawer-open #drawer').size() == 0) {
            $('.overlay').addClass('is-visible');
            $('#wrapper').addClass('drawer-open');
        } else {
            $('#wrapper').removeClass('drawer-open');
            $('.overlay').removeClass('is-visible');
            toggleCart('close')
        }
        return false;
    });


ここで設定されている class の値を変更してあげれば目的の形になると思います。



.drawer {
　・・・
/*  right: 0; */
  left: 0; /* メニューを左寄せにする */
　・・・
}

.drawer-open #contents, .drawer-open #header, .drawer-open #footer, .drawer-open .pagetop {
　・・・
/*  transform: translateX(-260px); */
  transform: translateX(260px); /* 右にずらす */
}

.overlay.is-visible {
　・・・
/*  transform: translateX(260px); */
  transform: translateX(260px); /* 右にずらす */
　・・・
}
mrb56
投稿日時: 2016/3/9 23:49
対応状況: −−−
常連
登録日: 2016/2/3
居住地:
投稿: 32
Re: ドロワーメニューについて
shhirose様

お返事頂きましてありがとうございます。
上記の内容を参考に修正し、左からのスライドすることができました。

大変助かりました。ありがとうございました。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は88,962名です
総投稿数は110,019件です

投稿数ランキング

1
seasoft 		7367
2
468 		3217
3
AMUAMU 		2712
4
nanasess 		2314
5
umebius 		2085
6
yuh 		1819
7
h_tanaka 		1646
8
red 		1570
9
mcontact 		1296
10
tsuji 		958
11
fukap 		907
12
shutta 		835
13
tao_s 		799
14 ramrun 789
15 karin 689
16 sumida 641
17
homan 		633
18 DELIGHT 572
19
patapata 		502
20
flealog 		485


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.