バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

質問 > その他 > ナビメニューの背景を画面いっぱいに広げる方法

その他

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
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にて
あたっていると思いますので、どうしたらよいものかと考えています。

わかる方、お教え頂けましたら幸いです。
よろしくお願い致します。


スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


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

統計情報

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

投稿数ランキング

1
seasoft
7365
2
468
3217
3
AMUAMU
2712
4
nanasess
2303
5
umebius
2085
6
yuh
1818
7
h_tanaka
1610
8
red
1567
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.