diff --git a/config.toml b/config.toml index ed6683da30263bb688c4edb212a355977e68601b..f68c1f628c065c347c291b42e46581ed1cb6825f 100644 --- a/config.toml +++ b/config.toml @@ -191,3 +191,18 @@ title = "Center for Nuclear Study" name = "アクセス" url = "/access" weight = 8 + +[[menu.header]] + name = "アクセス" + url = "/access" + weight = 1 + +[[menu.header]] + name = "採用情報" + url = "/job" + weight = 2 + +[[menu.header]] + name = "English" + url = "/en" + weight = 3 diff --git a/themes/cns_hp_theme/layouts/partials/header.html b/themes/cns_hp_theme/layouts/partials/header.html index 90c5439c0c3da6322d356b83ae0c9e89d762893b..0f73871894c1af877b34095861a3dd841d0a7ae7 100644 --- a/themes/cns_hp_theme/layouts/partials/header.html +++ b/themes/cns_hp_theme/layouts/partials/header.html @@ -26,8 +26,9 @@ -
- +
+ +
@@ -50,12 +51,15 @@ +
+
diff --git a/themes/cns_hp_theme/static/css/header.css b/themes/cns_hp_theme/static/css/header.css index 9f42539110893317011a83100eefd307eb3eb4bc..772d25c954200d65254842fab709af89e00b3075 100644 --- a/themes/cns_hp_theme/static/css/header.css +++ b/themes/cns_hp_theme/static/css/header.css @@ -11,7 +11,14 @@ background-color: white; object-fit: cover; } - +header { + position: absolute; + width: 100%; + height: 100px; + top: 100px; + left: 0; + background-color: rgba(0, 0, 0, 0.5); +} .black-belt { display: flex; flex-wrap: wrap; @@ -19,13 +26,22 @@ align-items: center; position: absolute; width: 100%; - height: 100px; + height: 92px; left: 0; - top: 100px; - background-color: rgba(0, 0, 0, 0.5); + top: 0; z-index: 2; color: #fff; } +.color-belt { + position: absolute; + top: 92px; + left: 0; + width: 100%; + height: 8px; + background-color: #66ffcc; + border: none; + margin: 0 0; +} .cns_logo { display: flex; justify-content: flex-end; @@ -142,7 +158,7 @@ display: inline-block; margin: 0 14px; vertical-align: center; - position: relative;; + position: relative; } .header-menu ul li::after { display: block; @@ -157,3 +173,7 @@ -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } +.header-menu ul li a{ + color: #fff; + text-decoration: none; +} diff --git a/themes/cns_hp_theme/static/js/header.js b/themes/cns_hp_theme/static/js/header.js index 17ea831c6c55f1bf443217631914f03b9fd49c93..80b5ed27eee560e0dd0d38902be86d320bec35ab 100644 --- a/themes/cns_hp_theme/static/js/header.js +++ b/themes/cns_hp_theme/static/js/header.js @@ -1,9 +1,8 @@ $(function(){ var $win = $(window), $main = $('main'), - $belt = $('.black-belt'), - beltHeight = $belt.outerHeight(), - beltPos = $belt.offset().top, + $header = $('header'), + headerPos = $header.offset().top, fixedClass = 'is-fixed'; $('.menu-trigger').on('click',function(){ @@ -24,16 +23,16 @@ $(function(){ $win.on('load scroll', function() { var value = $(this).scrollTop(); - if ( value > beltPos ) { - $belt.addClass(fixedClass); + if ( value > headerPos ) { + $header.addClass(fixedClass); } else { - $belt.removeClass(fixedClass); + $header.removeClass(fixedClass); } - if ( value > beltPos/2 && value <= beltPos ) { - var trans = (value-beltPos/2)/(beltPos-beltPos/2)*0.5+0.5; - $belt.css('background-color', 'rgba(0, 0, 0,' + trans + ')'); + if ( value > headerPos/2 && value <= headerPos ) { + var trans = (value-headerPos/2)/(headerPos-headerPos/2)*0.5+0.5; + $header.css('background-color', 'rgba(0, 0, 0,' + trans + ')'); } else { - $belt.css('background-color', ''); + $header.css('background-color', ''); } }); });