ハマログ

株式会社イーツー・インフォの社員ブログ

【EC-CUBE4】カテゴリナビをサイドメニューにカスタマイズ

やりたいこと

EC-CUBE4デフォルトのテンプレートを使ってカスタマイズする案件がありました。
2カラムにしてサイドにカテゴリナビ置きたいとのことでカスタマイズを行いました。

左側カテゴリメニュー、右側コンテンツにする

修正手順

まず管理画面に入って、コンテンツ管理>レイアウト管理>トップページ用レイアウトをクリック、
レイアウト編集画面に入ります。

#headerのカテゴリナビを押しながら#side_leftに移動して登録します。

そしたらこうなりました(^^;)

CSS修正する必要があるので、コンテンツ管理>CSS管理でスタイルを書き加えます。

@media only screen and (min-width: 768px) {
    /*カテゴリ縦も並べる*/
    .ec-itemNav__nav {
        display: flex;
        flex-direction: column;
    }
    
    /*文字を左寄せ*/
    .ec-itemNav__nav li a {
        text-align: left;
    }
    
    /*カテゴリの位置と横幅調整*/
    .ec-itemNav__nav li ul li ul,
    .ec-itemNav__nav li ul li:hover ul li {
        width: 100%;
    }
    
    .ec-itemNav__nav li ul {
        left: 100%;
        width: 100%;
        top: 0;
    }
    
    /*背景色、文字サイズ調整*/
    .ec-itemNav__nav > li:hover > a {
        background-color: #eee;
    }
    
    .ec-itemNav__nav li a,
    .ec-itemNav__nav li ul li a {
        font-size: 14px;
        padding: 12px;
    }
}

完成

  yt   2021年4月8日


関連記事

「EC-CUBE ユーザーカンファレンス 2016 新春」にいってきました。

  どうもこんにちは! イーツー・インフォの護身術好きこと、宇都宮です…

これ読める?日本語が読める人なら読めないフォント

これ読めますか? こちらはタイに行った際に見かけたフォントなんですが、日本人から…

デバイスごとにフォントを変える方法

某案件で、クライアントの指定でGoogle FontのM PLUS Rounde…


← 前の投稿

次の投稿 →