バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

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

その他

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
cusmix
投稿日時: 2022/5/1 16:09
対応状況: 確認中
半人前
登録日: 2022/4/23
居住地:
投稿: 12
カテゴリナビをサイドメニューに表示したい
[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
居住地:
投稿: 91
Re: カテゴリナビをサイドメニューに表示したい
リンク先にはCSS’書き加え’と書いてありますが’更新’されたとのこと、ここで不具合出てませんか?

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


 



ログイン


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

統計情報

総メンバー数は88,296名です
総投稿数は109,692件です

投稿数ランキング

1
seasoft
7365
2
468
3217
3
AMUAMU
2712
4
nanasess
2303
5
umebius
2085
6
yuh
1818
7
h_tanaka
1610
8
red
1568
9
mcontact
1240
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
796
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.