質問 > その他 > ナビメニューの背景を画面いっぱいに広げる方法 |
その他
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | 下へ |
投稿者 | スレッド |
---|---|
IQNE |
投稿日時: 2018/8/6 14:42
対応状況: 確認中
|
新米 登録日: 2018/8/6 居住地: 投稿: 3 |
ナビメニューの背景を画面いっぱいに広げる方法 [EC-CUBE] 3.0.16、新規インストール
[レンタルサーバ] XSERVER [OS] MAC 10.11.6 [PHP] 5.6.36 [データベース] MySQL 5.7.16 [ブラウザ] グーグルクローム [導入プラグインの有無] なし はじめまして。 ECCUBEのナビゲーションメニューのカスタムについてお聞きしたいのですが、 ナビメニューを中枠(container)で止めるのではなく、画面いっぱいに背景を伸ばしたいです。 背景が画面いっぱいにあって、その中に中枠(container)に制御されたメニューが表示される形です。 使っているのは基本デフォルトテンプレートですので、デフォルトを変更したいと思っています。 category.twig// {% macro tree(Category) %} <li> <a href="{{ url('product_list') }}?category_id={{ Category.id }}"> {{ Category.name }} </a> {% if Category.children|length > 0 %} <ul> {% for ChildCategory in Category.children %} {{ _self.tree(ChildCategory) }} {% endfor %} </ul> {% endif %} </li> {% endmacro %} <div class="na1 jumbotron"> <nav id="category" class="drawer_block pc"> <ul class="category-nav"> {% for Category in Categories %} {{ _self.tree(Category) }} {% endfor %} </ul> <!-- category-nav --> </nav> </div> default_frame.twig // <header id="header"> <div class="container-fluid inner"> {# ▼HeaderInternal COLUMN #} {% if PageLayout.Header %} {# ▼上ナビ #} {{ include('block.twig', {'Blocks': PageLayout.Header}) }} {# ▲上ナビ #} {% endif %} {# ▲HeaderInternal COLUMN #} <p id="btn_menu"><a class="nav-trigger" href="#nav">Menu<span></span></a></p> </div> </header> CSS // @media only screen and (min-width: 768px) { /* --------- common ---------- */ /* category_nav */ #category { clear: both; } /* Category navigation --------------------------- */ /* category-nav */ .category-nav > li { text-align: left; margin: 0 1em; position: relative; } .category-nav ul { position: static; height: auto; width: auto; overflow: visible; z-index: 3; background: #fff; } .category-nav > li > a { position: relative; display: inline-block; color: #2e3233; overflow: visible; -webkit-transition: color 0.3s, box-shadow 0.3s; -moz-transition: color 0.3s, box-shadow 0.3s; transition: color 0.3s, box-shadow 0.3s; } /* ----- category_nav in header ---- */ #header #category { padding: 20px 0 0; } /* category-nav */ #header .category-nav { border-top: 1px solid #D9D9D9; border-bottom: 1px solid #D9D9D9; text-align: center; } #header .category-nav .toggle { display: none; } #header .category-nav > li { margin: 0; } #header .category-nav li ul { display: block; } #header .category-nav li { position: relative; display: inline-block; } #header .category-nav > li > a { padding: 0 1em; height: 55px; line-height: 55px; border-bottom: none; } #header .category-nav li a { display: block; } #header .category-nav li ul { position: absolute; z-index: 100; top: 100%; left: 0; width: 200px; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); } #header .category-nav li ul li { float: left; overflow: hidden; width: 100%; height: 0; transition: .2s; } #header .category-nav li ul li a { text-align: left; } #header .category-nav > li:hover > a {} #header .category-nav > li:hover li:hover > a { background: rgba(204, 204, 204, 0.1)} #header .category-nav > li:hover > ul > li { overflow: visible; height: 50px; } #header .category-nav li ul li ul { top: 0; left: 100%; } #header .category-nav li:last-child ul li ul { left: 100%; width: 100%; } #header .category-nav li ul li ul:before { position: absolute; content: ">"; top: 13px; left: -15px; width: 0; height: 0; } #header .category-nav li:last-child ul li ul:before { position: absolute; content: ">"; top: 13px; left: -15px; width: 0; height: 0; /* content: "<"; top: 13px; left: 200%; margin-left: -15px; */ } #header .category-nav li ul li:hover > ul > li { overflow: visible; height: 50px; } #header .category-nav li ul li ul li a {} #header .category-nav li:hover ul li ul li a:hover { background: rgba(204, 204, 204, 0.1)} #header .category-nav ul > li > a, #header .category-nav ul > li > ul > li > a, #header .category-nav ul > li > ul > li > ul > li a { padding-left: 10px; } /* ----- category_nav in side ---- */ /* category-nav */ .side .category-nav > li { display: block; margin: 0; } .side .category-nav li > a { width: 100%; } .side .category-nav > ul ul { width: 100%; } .side .category-nav > ul { width: 100%; } .side .category-nav > ul > li { width: 100%; } .side .category-nav > ul > li a { padding-left: 10px; } } ソースはおそらく、上記が該当するかと思いますが、 container-fluid inner のクラスが default_frame.twigにて あたっていると思いますので、どうしたらよいものかと考えています。 わかる方、お教え頂けましたら幸いです。 よろしくお願い致します。 |
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | トップ |