Commit ce353b0a by Orine Matsui

ヘッダサブメニューを表示

parent cfeb35aa
......@@ -1067,13 +1067,15 @@ header
.fixed-nav.is-show .c-nav {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-470px);
margin-top: 10px;
left: 0;
width: 100%;
margin-top: 0;
}
.fixed-nav.is-show .c-nav .c-nav-menu1 {
margin-left: -280px;
}
.fixed-nav.is-show .c-nav-link1 {
padding: 5px 20px;
padding: 15px 20px;
width: auto;
color: #1b1b1b;
}
......@@ -1204,8 +1206,8 @@ header
}
.c-nav {
padding-bottom: 10px;
margin-top: 15px;
padding-bottom: 0;
margin-top: 5px;
position: relative;
}
......@@ -1272,7 +1274,7 @@ header
font-weight: bold;
text-decoration: none;
display: inline-block;
padding: 5px 0;
padding: 15px 0;
width: 160px;
text-align: center;
position: relative;
......@@ -1294,7 +1296,7 @@ header
.c-nav-link1:after {
content: url("/assets/img/common/line1.png");
position: absolute;
top: 0;
top: 10px;
right: -6px;
z-index: 1;
}
......@@ -1593,30 +1595,106 @@ header
margin-left: 5px;
}
.c-navService {
display: none;
}
.c-nav-sab-active .c-navService {
position: absolute;
top: 30px;
top: 40px;
left: 0;
display: block;
width: 100%;
background: #212121;
}
.c-navService .c-nav-sab {
margin-right: auto;
margin-left: auto;
.c-nav-sab-active .c-navService .c-nav-sab {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 20px auto 16px;
width: 920px;
}
.c-nav-sab-active .c-navService .c-nav-sab a {
display: block;
}
.c-nav-sab-active .c-navService .c-nav-sab a:hover {
opacity: 0.8;
filter: alpha(opacity=80);
-ms-filter: "alpha(opacity=80)";
}
.c-nav-sab-active .c-nav-sab-img,
.c-nav-sab-active .c-nav-sab-text {
display: block;
}
.c-nav-sab-active .c-nav-sab-text {
position: relative;
margin-top: 5px;
padding-left: 16px;
color: #fff;
}
.c-nav-sab-active a:hover .c-nav-sab-text {
color: #c60102;
}
.fixed-nav .c-navService {
display: none;
.c-nav-sab-active .c-nav-sab-text:before {
content: "";
width: 7px;
height: 7px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
position: absolute;
left: -1px;
top: 7px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.c-nav-sab-active a:hover .c-nav-sab-text:before {
border-top: 1px solid #c60102;
border-right: 1px solid #c60102;
}
.c-nav-sab-active a.c-nav-link1:hover {
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "alpha(opacity=100)";
}
.c-nav-sab-active a.c-nav-link1 span {
position: relative;
z-index: 2;
color: #fff;
}
.c-nav-sab-active a.c-nav-link1:after {
content: "";
position: absolute;
top: 0;
left: 24px;
z-index: 1;
width: calc(100% - 48px) ;
height: 100%;
background-color: #212121;
-webkit-transform: skew(-20deg);
transform: skew(-20deg);
}
.fixed-nav .c-nav-sab-active .c-navService {
display: none;
}
.fixed-nav.is-show .c-nav-sab-active .c-navService {
display: block;
}
.fixed-nav.is-show .c-nav .c-nav-sab-active .c-navService {
top: 49px;
left: 0;
}
.fixed-nav.is-show .c-nav .c-nav-sab-active a.c-nav-link1:after {
left: 0;
width: 100%;
}
/*------------------------------------------------------------
......@@ -1689,7 +1767,6 @@ mainvisual
/*
------------------------------------------------------------*/
......
......@@ -296,32 +296,32 @@
</nav>
<nav class="c-nav">
<ul class="c-nav-menu1">
<li data-target="home1">
<a href="/service/" class="c-nav-link1">サービス</a>
<li data-target="home1" class="c-nav-sab-active">
<a href="/service/" class="c-nav-link1"><span class="c-nav-text">サービス</span></a>
<div class="c-navService">
<ul class="c-nav-sab">
<li><a href="/service/top/" class="c-nav-sab-link1">『頂点への道』講座</a></li>
<li><a href="/service/penetration/" class="c-nav-sab-link1">理念浸透・組織変革</a></li>
<li><a href="/service/management/" class="c-nav-sab-link1">マネジメント</a></li>
<li><a href="/service/sales/" class="c-nav-sab-link1">営業力強化</a></li>
<li><a href="/service/rt/" class="c-nav-sab-link1">人間関係</a></li>
<li><a href="/service/top/" class="c-nav-sab-link1"><span class="c-nav-sab-img"><img src="/assets/img/common/img_top_tmb.jpg" alt=""></span><span class="c-nav-sab-text">『頂点への道』講座</span></a></li>
<li><a href="/service/penetration/" class="c-nav-sab-link1"><span class="c-nav-sab-img"><img src="/assets/img/common/img_penetration_tmb.jpg" alt=""></span><span class="c-nav-sab-text">理念浸透・組織変革</span></a></li>
<li><a href="/service/management/" class="c-nav-sab-link1"><span class="c-nav-sab-img"><img src="/assets/img/common/img_management_tmb.jpg" alt=""></span><span class="c-nav-sab-text">マネジメント</span></a></li>
<li><a href="/service/sales/" class="c-nav-sab-link1"><span class="c-nav-sab-img"><img src="/assets/img/common/img_sales_tmb.jpg" alt=""></span><span class="c-nav-sab-text">営業力強化</span></a></li>
<li><a href="/service/rt/" class="c-nav-sab-link1"><span class="c-nav-sab-img"><img src="/assets/img/common/img_rt_tmb.jpg" alt=""></span><span class="c-nav-sab-text">人間関係</span></a></li>
</ul>
</div>
</li>
<li data-target="home2">
<a href="/pub/schedule#seminar" class="c-nav-link1">体験セミナー</a>
<a href="/pub/schedule#seminar" class="c-nav-link1"><span class="c-nav-text">体験セミナー</span></a>
</li>
<li data-target="home3">
<a href="/beginner/" class="c-nav-link1">初めての方へ</a>
<a href="/beginner/" class="c-nav-link1"><span class="c-nav-text">初めての方へ</span></a>
</li>
<li data-target="home4">
<a href="/case/" class="c-nav-link1">お客様事例</a>
<a href="/case/" class="c-nav-link1"><span class="c-nav-text">お客様事例</span></a>
</li>
<li data-target="home5">
<a href="/company/" class="c-nav-link1">会社情報</a>
<a href="/company/" class="c-nav-link1"><span class="c-nav-text">会社情報</span></a>
</li>
<li data-target="home6">
<a href="/company/access/" class="c-nav-link1">アクセス</a>
<a href="/company/access/" class="c-nav-link1"><span class="c-nav-text">アクセス</span></a>
</li>
</ul>
</nav>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment