ユーザーが現在の進捗状態（プログレス）がどの辺りか確認しやすくするためのステップ表示その２です。その１は「[CSS] 購入などの進捗状態を知らせるステップ表示」です。その１と同様にCSSのみで作っていますが、違いはradioボタンを使っている点で、１が遷移画面ごとにひとつのステップ表示を使うのに対して、こちらはiframeなどを利用した遷移で、ひとつのステップ表示を使い、遷移位置によりcssを書き換えるタイプです。

上側のradioボタンやlabelのテキストをクリックして遷移位置を変更すると、大きな赤色テキスト部分がムーブダウン、ムーブアップして切り替わります。また、切り替わった対置のradioボタンの周りが明滅して現在位置を示します。

サンプルのhtmlソース

<div class="timeline">
  <div class="w-table">
    <div class="w-table-cell">
      <div class="timeline_card">
        <input checked="" class="timeline_input" id="btn1" name="timeline" type="radio" />
        	<label class="timeline_label" for="btn1">商品選択</label>
        <div class="timeline_info">
          <span>STEP 1</span>　商品選択
        </div>
        <input class="timeline_input" id="btn2" name="timeline" type="radio" />
        	<label class="timeline_label" for="btn2">送り先選択</label>
        <div class="timeline_info">
          <span>STEP 2</span>　送り先選択
        </div>
        <input class="timeline_input" id="btn3" name="timeline" type="radio" />
        	<label class="timeline_label" for="btn3">支払い選択</label>
        <div class="timeline_info">
          <span>STEP 3</span>　支払い選択
        </div>
        <input class="timeline_input" id="btn4" name="timeline" type="radio" />
        	<label class="timeline_label" for="btn4">終了</label>
        <div class="timeline_info">
          <span>STEP 4</span>　終了
        </div>
        <div class="timeline_line"></div>
      </div>
    </div>
  </div>
</div>