ハマログ

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

【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;
    }
}

完成


  yiting   2021年4月8日


関連記事

Chromeでpdf開いたら”¥”がバックスラッシュで表示されてた話

どうも!娘から風邪を貰って絶賛喉が痛い宇都宮です! 今回はChromeブラウザで…

Adobe XD検定をやってみました

偶然にAdobeの公式サイトでAdobe XD検定というものを見つけました。 最…

CSSの肥大化を解決する方法

サイトを運用していつの間にCSSがとんでもない量になってしまって、CSSの肥大化…


← 前の投稿

次の投稿 →