2014年8月30日土曜日
現在制作しているテンプレートにちょっと変わった「新着情報リスト」を作りたかったので、色々考えた結果、日付だけを右側に固定で表示し、それにマウスが触れると内容が見れると言う様な物を作ってみました。
前提として、この機能にJavaScriptは使わないと言う事です。
全てCSSで記述しました。
実際にやってみたい方は以下のソースを参考にしてください。
HTML
- 2014/08/22
- 2014/09/01
CSS
#new_view { position: fixed; top: 110px; left: 0px; } /*親要素で、固定配置する*/
#new_view li{
background-color: rgba(254,101,104,0.89);
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-left: 8px solid rgba(64,145,238,1.00);
padding-left: 10px;
padding-right: 10px;
color: rgba(255,255,255,1.00);
line-height: 30px;
margin-bottom: 20px;
transition: .42s;
width: 100px;
height: 30px;
overflow-y: hidden; /*はみ出る内容を非表示にする*/
margin-right: 10px;
-webkit-box-shadow: 0px 5px 5px rgba(140,140,140,0.63);
box-shadow: 0px 5px 5px rgba(140,140,140,0.63);
}
#new_view li:hover{
background-color: rgba(255,143,144,0.90);
height: 30px;
width: 100%;
}
#new_view li:after{
content: attr(data-new);
margin-left: 10px;
color: rgba(245,245,245,1.00);
}
