ヘッダー
uc-headerクラスを適用することで、ヘッダーを作成することができます。
1. 基本
基本のヘッダーを作成します。
UNITS
Lorem ipsum dolor sit amet.
<header class="uc-header">
<h1 class="uc-header-logo">UNITS</h1>
<p>Lorem ipsum dolor sit amet.</p>
</header>
2. カラーバリエーション
2種類のカラーバリエーションが用意されています。
UNITS
Lorem ipsum dolor sit amet.
UNITS
Lorem ipsum dolor sit amet.
<!-- Black -->
<header class="uc-header _black">
<h1 class="uc-header-logo">UNITS</h1>
<p>Lorem ipsum dolor sit amet.</p>
</header>
<!-- Dark -->
<header class="uc-header _dark">
<h1 class="uc-header-logo">UNITS</h1>
<p>Lorem ipsum dolor sit amet.</p>
</header>
3. ゴーストヘッダー
uc-hero クラスを指定することで、背景が透過されたヘッダーを作成することができます。
uc-hero クラスと併用するのが効果的です。
UNITS
Lorem ipsum dolor sit amet.
Hero components
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<header class="uc-header _ghost">
<h1 class="uc-header-logo">UNITS</h1>
<p>Lorem ipsum dolor sit amet.</p>
</header>
<div class="uc-hero">
<div class="uc-hero-bg" style="background-image:url(https://source.unsplash.com/random)"></div>
<div class="uc-hero-title">Hero components</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
4. 固定ヘッダー
ページ最上部に固定され、スクロールに追従するヘッダーを作成します。
UNITS
Lorem ipsum dolor sit amet.
<header class="uc-header _fixed">
<h1 class="uc-header-logo">UNITS</h1>
<p>Lorem ipsum dolor sit amet.</p>
</header>
5. ヘッダーメニュー (テキストベース)
テキストベースのヘッダーメニューを作成します。
UNITS
<header class="uc-header">
<h1 class="uc-header-logo">UNITS</h1>
<div class="uc-header-menu">
<a href="#">Menu1</a>
<a href="#">Menu2</a>
<a href="#">Menu3</a>
</div>
</header>
6. ヘッダーメニュー (ボタン)
ヘッダーメニューボタンを作成します。
このクラスは uc-menu._slide が配置されている場合のみ使用できます。
UNITS
<header class="uc-header">
<h1 class="uc-header-logo">UNITS</h1>
<div class="uc-menu-btn _text" data-open-target="#menu">
<button><i class="uc-menu-btn-icon"></i></button>
</div>
</header>
<nav class="uc-menu _slide" id="menu">
<div class="uc-menu-wrap">
<div class="uc-menu-list">
<a href="#">Menu1</a>
<a href="#">Menu2</a>
<a href="#">Menu3</a>
</div>
</div>
</nav>