バージョン選択

フォーラム

メニュー

オンライン状況

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

PR

先着1,000社 プラグインダウンロード&お申込で1,000円分Amazonギフト券プレゼント amazon pay
広告掲載について

サイト内検索

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

その他

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
IQNE
投稿日時: 2018/8/6 14:42
対応状況: 確認中
新米
登録日: 2018/8/6
居住地:
投稿: 1
ナビメニューの背景を画面いっぱいに広げる方法
[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ペイメント

統計情報

総メンバー数は29,901名です
総投稿数は87,059件です

投稿数ランキング

1
seasoft
7331
2
AMUAMU
2712
3
nanasess
1754
4
yuh
1504
5
red
1171
6
468
1144
7
umebius
1007
8
fukap
907
9
shutta
827
10
tsuji
815
11 ramrun 789
12
tao_s
651
13 karin 650
14 sumida 641
15
homan
633
16 DELIGHT 571
17
h_tanaka
519
18
patapata
502
19
flealog
483
20 tonton 436


ネットショップの壺

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

Copyright© LOCKON CO.,LTD. All Rights Reserved.