css でステップメニューを作る

2013年6月15日更新 view: 1379 view

ステップメニューをCSSで作る

まずはCSS

div.step{
    position: relative;
    width: 70px;
    height: 50px;
    background: #eee;
    text-align: center;
    padding-left: 10px;
    float: right;
    border-left: 2px solid #ffffff; /* 間隔になる */
}
/* 右のでっぱり三角 */
div.step:after{
    content: "";
    position: absolute;
    left: 80px;     /* div.step#width + div.step#padding-left = 80px */
    top: 0;
    width: 0;
    border-top: 25px solid transparent; /* div.step#heightの半分 */
    border-bottom: 25px solid transparent; /* div.step#heightの半分 */
    border-left: 10px solid #eee;    /* とんがり具合 */
}
/* 左のひっこみ三角 */
div.step:before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 10px solid #ffffff;
}
div.step span{
    line-height: 50px;
    color: #ffffff;
    padding-left: 10px;
    padding-right: 10px;
}

div.step dl{
    margin:0;
    padding:0;
}

div.step dt{
    margin-bottom:-1px;
    padding-top:5px;
    
    font-weight:normal;
    color:#999;
    font-size:9px;
}

div.step dd{
    font-weight:bold;
    color:#999;
}


div.step.current dt{
    margin-bottom:-1px;
    padding-top:5px;
    font-weight:normal;
    color:#673300;
    font-size:12px;
}


div.step.current dd{
    font-weight:bold;
    color:#673300;
    font-size:18px;
}




div.current{
    background: #ffcd00;
}
div.current:after{
    border-left: 10px solid #ffcd00;
}


div.step-navi{
    margin: 20px;
}
スポンサードリンク

続いてソース

<div class="step-navi">
<div class="step">
  <dl>
   <dt>STEP3</dt>
   <dd>配送</dd>
  </dl>
 
</div>
<div class="step current">
  <dl>
   <dt>STEP2</dt>
   <dd>決済</dd>
  </dl>
</div>
<div class="step">
  <dl>
   <dt>STEP1</dt>
   <dd>選択</dd>
  </dl>
</div>
</div>

こんな感じですね。

スポンサードリンク

関連記事

関連カテゴリ