header / menu
メインメニューの固定
<body class="fix-menu"><!-- 省略 --></body>
<body>
にclass="fix-menu"
を設定すると、ページを開いた直後からスクロール時と同じコンパクトなメニューの表示になります
列を分割
<nav id="mainMenu" class="menu">
<ul class="column-2">
<li><a href="【URL】">メニュー1</a></li>
<li><a href="【URL】">メニュー2</a></li>
</ul>
</nav>
class="menu"
内の<ul>
に列設定用クラスを設定することで、メニューの列を分割できます。- 列設定用クラス
- 1列設定しない
- 2列
column-2
- 3列
column-3
- 4列
column-4
- 5列
column-5
メニュー背景にスライダー設定
<header>
<h1><span><a href="top.html">calme</a></span></h1>
<div id="headerImages">
<img src="img/layout/topimage-1.jpg" class="active">
<img src="img/layout/topimage-2.jpg">
</div>
<nav id="mainMenu" data-toggler="mainMenuToggler" class="menu">
<!-- 省略 -->
</nav>
</header>
<header>
直下に<div id="headerImages">
を入れる<div id="headerImages">
直下にスライダーに使用したい画像を入れる- 1枚目に表示したい画像に
class="active"
を設定する - アニメーションを変更したい場合は、
<div id="headerImages">
に以下のアニメーション設定クラスを設定する
アニメーション設定クラス
fade
フェードslide-top
スライド(上から)slide-bottom
スライド(下から)slide-left
スライド(左から)slide-right
スライド(右から)
※fade
は各種スライドクラスと併用可能
下部固定メニュー
<nav class="fixed-menu">
<ul>
<li class="prev"><a href="【URL】"></a></li>
<li class="next"><span></span></li>
<li id="pageTop" class="pagetop"><button></button></li>
</ul>
</nav>
<nav class="fixed-menu">
~</nav>
内に<ul>
~</ul>
を設定してください<li>
に下部固定ボタンクラスを設定すると、<li>
内の<a>
または<span>
固定ボタンとして表示します- トップへ戻るボタンは上記のままご使用ください
下部固定ボタンクラス
prev
前へnext
次へhome
ホームtoc
目次characters
キャラクターimages
画像