ハマログ

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

【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サイトに騙されないためのチェックポイント

私自身、ECサイトで買い物をすることが多々ありますが、欲しい商品を探している際に…

コーポレートサイトリニューアル

こんにちは、かねこです。 つい先週、かれこれ2〜3年使っていたコーポレートサイト…

illustratorのよく使う機能

今回はよく使うillustrator機能のお話。 普段から使用している方は「知っ…


← 前の投稿

次の投稿 →