パーツ番号 03-12-09 ・ CSSのみ
言語・地域選択を含むメガメニュー
通常のリンク一覧に加えて言語切り替えグリッドを組み込んだメガメニューです。WordPressの多言語サイト(WPML等)のグローバルナビ設計に応用できます。
プレビュー
ソースコード
HTML
<div class="d03-12-09-stage">
<div class="d03-12-09-bar">
<span class="d03-12-09-logo">GLOBAL</span>
<nav class="d03-12-09-nav">
<a href="#" onclick="return false">ホーム</a>
<a href="#" onclick="return false" class="active">言語/地域</a>
</nav>
</div>
<div class="d03-12-09-panel">
<div class="d03-12-09-links">
<h4>メニュー</h4>
<a href="#" onclick="return false">会社概要</a>
<a href="#" onclick="return false">拠点一覧</a>
<a href="#" onclick="return false">採用情報</a>
</div>
<div class="d03-12-09-lang">
<h4>言語を選択</h4>
<div class="d03-12-09-lang-grid">
<span class="d03-12-09-lang-item active"><i class="d03-12-09-flag d03-12-09-flag-a"></i>日本語</span>
<span class="d03-12-09-lang-item"><i class="d03-12-09-flag d03-12-09-flag-b"></i>English</span>
<span class="d03-12-09-lang-item"><i class="d03-12-09-flag d03-12-09-flag-c"></i>中文</span>
<span class="d03-12-09-lang-item"><i class="d03-12-09-flag d03-12-09-flag-d"></i>한국어</span>
</div>
</div>
</div>
</div>CSS
.prev.d03-12-09{padding:0;display:block}
.d03-12-09-stage{width:100%;height:100%;min-height:260px;background:#fff;display:flex;flex-direction:column}
.d03-12-09-bar{
display:flex;align-items:center;justify-content:space-between;
height:42px;padding:0 16px;background:#fff;border-bottom:1px solid #e5e7eb;flex:none;
}
.d03-12-09-logo{font-weight:800;font-size:13px;color:#111827;letter-spacing:.06em}
.d03-12-09-nav{display:flex;gap:16px}
.d03-12-09-nav a{color:#475569;text-decoration:none;font-size:11px;font-weight:600}
.d03-12-09-nav a.active{color:#16a34a}
.d03-12-09-panel{flex:1;display:flex;gap:16px;padding:16px;background:#f0fdf4}
.d03-12-09-links{flex:1;min-width:0}
.d03-12-09-links h4,.d03-12-09-lang h4{
margin:0 0 8px;font-size:10px;letter-spacing:.06em;color:#16a34a;
text-transform:uppercase;border-bottom:1px solid #bbf7d0;padding-bottom:6px;
}
.d03-12-09-links a{display:block;color:#166534;text-decoration:none;font-size:11px;padding:4px 0}
.d03-12-09-lang{width:150px;flex:none}
.d03-12-09-lang-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.d03-12-09-lang-item{
display:flex;align-items:center;gap:6px;font-size:10px;color:#166534;
padding:5px 6px;border-radius:6px;
}
.d03-12-09-lang-item.active{background:#dcfce7;font-weight:700}
.d03-12-09-flag{width:12px;height:12px;border-radius:50%;flex:none;display:inline-block}
.d03-12-09-flag-a{background:#ef4444}
.d03-12-09-flag-b{background:#3b82f6}
.d03-12-09-flag-c{background:#f59e0b}
.d03-12-09-flag-d{background:#8b5cf6}クラス名 .d03-12-09 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。