グローバルメニューとは？
グローバルメニューは、ヘッダーメニューやメインメニューなどとも呼ばれ、画面上部のメニューのことです。
画面サイズが768px以上の時はホバーで、767px以下の時はクリックで、メニューが開く様にします。デモ画面はこちら！
グローバルメニューの作り方（html）
<body>
<!-- ヘッダー -->
<header>
<div id="headerContent">
</div>
<!--グローバルナビ-->
<nav id="globalNav">
<ul class="menu">
<li class="menu-item">
<a href="#" class="menu-item-link"><span>menu1</span><span class="triangular_arrow"></span></a>
<div class="menuDrop">
<ul class="menu_children">
<li><a href="">初めて受診する方</a></li>
<li><a href="">通院中・再来の方</a></li>
<li><a href="">入院される患者さん・面会の方</a></li>
<li><a href="">人間ドックを受診する方</a></li>
</ul>
</div><!--menuDrop-->
</li><!--menu-item-->
<li class="menu-item">
<a href="#" class="menu-item-link"><span>menu2</span><span class="triangular_arrow"></span></a>
<div class="menuDrop md2">
<ul class="menu_children">
<li><a href="">診療科・部門一覧</a></li>
<li><a href="">病名・医師名検索</a></li>
<li><a href="">役割・機能</a></li>
<li><a href="">健康・医療情報</a></li>
</ul>
</div><!--menuDrop-->
</li><!--menu-item-->
<li class="menu-item">
<a href="#" class="menu-item-link"><span>menu3</span><span class="triangular_arrow"></span></a>
<div class="menuDrop md3">
<ul class="menu_children">
<li><a href="">地図・フロア図</a></li>
<li><a href="">院内施設のご案内</a></li>
<li><a href="">よくあるお問い合わせ</a></li>
<li><a href="">お問い合わせ一覧</a></li>
</ul>
</div><!--menuDrop-->
</li><!--menu-item-->
</ul><!--menu-->
</nav><!--globalNav-->
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>グローバルメニューの作り方（css）
@charset "UTF-8";
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
@media screen and (min-width:768px) {
#headerContent {
width: 100%;
height: 100px;
}
}
@media screen and (max-width:767px) {
#headerContent {
width: 100%;
height: 50px;
}
}
/* グローバルナビ */
#globalNav {
width: 100%;
background-color: #005;
}
.menu {
display: flex;
margin: 0 auto;
list-style: none;
}
@media screen and (min-width:1025px) {
.menu {
width: 980px;
height: 50px;
}
}
@media screen and (max-width:1024px) {
.menu {
width: 100%;
height: 50px;
}
}
.menu-item {
width: calc(100% / 3);
height: 100%;
position: relative;
}
.menu-item::before {
content: "";
display: inline-block;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 1px;
height: 20px;
background-color: #6e6c95;
}
.menu-item:nth-child(3)::after {
content: "";
display: inline-block;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
width: 1px;
height: 20px;
background-color: #6e6c95;
}
.menu-item-link {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
color: #fff;
text-decoration: none;
font-size: 17px;
}
.menu-item-link:hover {
background-color: #cc0000;
}
.triangular_arrow {
display: block;
width: 6px;
height: 6px;
margin-left: 15px;
border-bottom: solid 2px #fff;
border-right: solid 2px #fff;
transform: rotate(45deg);
}
.triangular_arrow.open {
transform: rotate(225deg);
}
.menuDrop {
display: none;
border: 1px solid #ccc;
position: relative;
}
.menuDrop.open {
display: block;
}
@media screen and (max-width:767px) {
.menuDrop {
width: 300%;
}
.md2 {
right: 100%;
}
.md3 {
right: 200%;
}
}
.menu_children {
list-style: none;
}
.menu_children li {
padding: 10px;
}
.menu_children li:not(:last-child) {
border-bottom: 1px solid #ccc;
}
.menu_children li a {
display: inline-block;
color: #245dc1;
font-size: 15px;
}
.menu_children li a:hover {
text-decoration: none;
}
.menu_children li a::before {
content: '';
display: inline-block;
width: 19px;
height: 17px;
background-image: url('../images/arrow_01.png');
vertical-align: middle;
margin-top: -3px;
margin-right: 5px;
}box-sizing: border-box;とdisplay: flex;と::beforeは重要です。
こちらのサイトが分かりやすいです。
【CSS】box-sizing:border-boxの使い方｜効かない時は？ | サルワカ
【CSS】疑似要素の画像サイズを変更する方法 | サルワカ
https://saruwakakun.com/html-css/reference/change-before-after
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
グローバルメニューの作り方（jQuery）
$(function(){
let timer = false;
let prewidth = $(window).width();
$(window).resize(function() {
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
let nowWidth = $(window).width();
if(prewidth !== nowWidth){
// リロード
location.reload();
}
prewidth = nowWidth;
}, 200);
});
});
$(function () {
if (window.matchMedia('(min-width: 768px)').matches) {
$('.menu-item').hover(function() {
$(this).children('.menuDrop').stop().slideDown('fast');
// マウスを離した際のイベント
}, function() {
$(this).children('.menuDrop').css('display', 'none');
return false;
});
} else if (window.matchMedia('(max-width:767px)').matches) {
$('.menu-item').click(function() {
$(this).children('.menuDrop').toggleClass('open');
$(this).find('.triangular_arrow').toggleClass('open');
$('.menu-item').not($(this)).children('.menuDrop').removeClass('open');
$('.menu-item').not($(this)).find('.triangular_arrow').removeClass('open');
return false;
});
}
});1行目から17行目は、リロード（再読み込み）の為に書いています。
画面サイズが変わった時に、新たに発生すべきイベントが、再読み込みボタンを押すまで発生しません。
それを押さずとも、発生するようにしたものです。
19行目から37行目は、画面サイズが768px以上の時、ホバーしたらメニューが開きます。
それ以外は、閉じます。
画面サイズが767px以下の時、クリックしたらopenクラスが付与され、メニューが開き、三角矢印が反転します。
それと同時に、クリックされていないものはopenクラスが除去され、メニューは閉じ、三角矢印は元に戻ります。
また、toggleの為、クリックしてopenクラスが付与されたものを、もう1度クリックするとopenクラスが除去されます。
あと、22行目のstop()は、実行中のアニメーションを中止するメソッドです。
1回ホバーするだけだったら、書いても書かなくても一緒ですが、マウスで何回もホバーしたら、延々とメニューが開いたり閉じたりするんですよね。（笑）
前のイベントが終わってないと、次のイベントが始まらないという性質からです。
そうならない様に、書いています。
さいごに
jQueryは、今現在（2024/02）最新版は、ver3.7.1になります。
今日は、ありがとうございました。では、また！