バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

質問 > その他 > カテゴリナビをサイドメニューに表示したい

その他

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
cusmix
投稿日時: 2022/5/1 16:09
対応状況: 確認中
新米
登録日: 2022/4/23
居住地:
投稿: 3
カテゴリナビをサイドメニューに表示したい
[EC-CUBE] EC-CUBEのバージョン:4.0.6-p1
新規インストール
[サーバ] Windowsでのローカル開発環境
[OS] Windows 10 Pro バージョン:21H1
[PHP] バージョン:7.4.29
XAMPP v3.3.0を使用して、EC-CUBE4をインストール
[ブラウザ] Chrome バージョン: 100.0.4896.127(Official Build) (64 ビット)
[現象]
カテゴリナビをサイドに設置したのですが、#main_topと#side_rightを串刺しにしてしまいます。#side_leftの幅からはみださないように設置するにはどのようにすればよいのでしょうか?

https://twitter.com/cusmix/status/1520660440522448896?t=LTjzq6DcADffNuDccyvRbg&s=19

【EC-CUBE4】カテゴリナビをサイドメニューにカスタマイズこちらのwebサイトを参考にさせていただきまして、

管理画面の、コンテンツ管理>レイアウト管理>トップページ用レイアウトで、『カテゴリナビ(PC)』を#headerから、#side_leftへ移動しました。

更に、html/template/default/assets/css/style.cssを下記のように更新しました。

7671行目の
.ec-itemNav__nav {
      display: inline-block; }
    .ec-itemNav__nav li {
      float: left;
      width: auto; }
    .ec-itemNav__nav li a {
      text-align: center;
      border-bottom: none; }
    .ec-itemNav__nav li ul {
      display: block;
      z-index: 100;
      position: absolute; }
    .ec-itemNav__nav li ul li {
      overflow: hidden;
      height: 0; }
  .ec-itemNav__nav > li:hover > ul > li {
    overflow: visible;
    height: auto; }
  .ec-itemNav__nav li ul li ul:before {
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    color: white;
    position: absolute;
    top: 19px;
    right: auto;
    left: -20px; }
  .ec-itemNav__nav li ul li:hover > ul > li {
    overflow: visible;
    height: auto;
    width: auto; }

のコードを
/*カテゴリ縦も並べる*/
    .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;
    }
}


yt1969
投稿日時: 2022/5/3 13:39
対応状況: −−−
常連
登録日: 2018/3/3
居住地:
投稿: 54
Re: カテゴリナビをサイドメニューに表示したい
リンク先にはCSS’書き加え’と書いてありますが’更新’されたとのこと、ここで不具合出てませんか?

また、その貼り付けられた更新内容では最後 } 閉が1つ多いですよ。
(リンク先では'@media only screen and (min-width: 768px) {'に対する閉)
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン



統計情報

総メンバー数は74,626名です
総投稿数は104,055件です

投稿数ランキング

1
seasoft
7333
2
468
3217
3
AMUAMU
2712
4
nanasess
2202
5
umebius
2074
6
yuh
1664
7
red
1498
8
h_tanaka
1188
9
tsuji
942
10
fukap
907
11
shutta
835
12
tao_s
794
13 ramrun 789
14 karin 689
15 sumida 641
16
homan
633
17 DELIGHT 572
18
patapata
502
19
flealog
485
20 tonton 437


ネットショップの壺

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

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