Skip to content

sora / achievement

Go to a project
Commit ce353b0a by Orine Matsui
Options

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

parent cfeb35aa
Inline Side-by-side
Showing with 107 additions and 30 deletions
achievement-official.conohawing.com/assets/css/style.css
...@@ -1067,13 +1067,15 @@ header ...@@ -1067,13 +1067,15 @@ header
.fixed-nav.is-show .c-nav { .fixed-nav.is-show .c-nav {
position: absolute; position: absolute;
top: 0; top: 0;
left: 50%; left: 0;
transform: translateX(-470px); width: 100%;
margin-top: 10px; margin-top: 0;
}
.fixed-nav.is-show .c-nav .c-nav-menu1 {
margin-left: -280px;
} }
.fixed-nav.is-show .c-nav-link1 { .fixed-nav.is-show .c-nav-link1 {
padding: 5px 20px; padding: 15px 20px;
width: auto; width: auto;
color: #1b1b1b; color: #1b1b1b;
} }
...@@ -1204,8 +1206,8 @@ header ...@@ -1204,8 +1206,8 @@ header
} }
.c-nav { .c-nav {
padding-bottom: 10px; padding-bottom: 0;
margin-top: 15px; margin-top: 5px;
position: relative; position: relative;
} }
...@@ -1272,7 +1274,7 @@ header ...@@ -1272,7 +1274,7 @@ header
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
padding: 5px 0; padding: 15px 0;
width: 160px; width: 160px;
text-align: center; text-align: center;
position: relative; position: relative;
...@@ -1294,7 +1296,7 @@ header ...@@ -1294,7 +1296,7 @@ header
.c-nav-link1:after { .c-nav-link1:after {
content: url("/assets/img/common/line1.png"); content: url("/assets/img/common/line1.png");
position: absolute; position: absolute;
top: 0; top: 10px;
right: -6px; right: -6px;
z-index: 1; z-index: 1;
} }
...@@ -1593,30 +1595,106 @@ header ...@@ -1593,30 +1595,106 @@ header
margin-left: 5px; margin-left: 5px;
} }
.c-navService { .c-navService {
display: none;
}
.c-nav-sab-active .c-navService {
position: absolute; position: absolute;
top: 30px; top: 40px;
left: 0; left: 0;
display: block; display: block;
width: 100%; width: 100%;
background: #212121; background: #212121;
} }
.c-navService .c-nav-sab { .c-nav-sab-active .c-navService .c-nav-sab {
margin-right: auto; display: flex;
margin-left: auto; flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 20px auto 16px;
width: 920px; 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 { .c-nav-sab-active .c-nav-sab-text:before {
display: none; 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 ...@@ -1689,7 +1767,6 @@ mainvisual
/* /*
------------------------------------------------------------*/ ------------------------------------------------------------*/
......
achievement-official.conohawing.com/assets/include/header.php
...@@ -296,32 +296,32 @@ ...@@ -296,32 +296,32 @@
</nav> </nav>
<nav class="c-nav"> <nav class="c-nav">
<ul class="c-nav-menu1"> <ul class="c-nav-menu1">
<li data-target="home1"> <li data-target="home1" class="c-nav-sab-active">
<a href="/service/" class="c-nav-link1">サービス</a> <a href="/service/" class="c-nav-link1"><span class="c-nav-text">サービス</span></a>
<div class="c-navService"> <div class="c-navService">
<ul class="c-nav-sab"> <ul class="c-nav-sab">
<li><a href="/service/top/" 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">理念浸透・組織変革</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">マネジメント</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">営業力強化</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">人間関係</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> </ul>
</div> </div>
</li> </li>
<li data-target="home2"> <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>
<li data-target="home3"> <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>
<li data-target="home4"> <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>
<li data-target="home5"> <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>
<li data-target="home6"> <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> </li>
</ul> </ul>
</nav> </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