[UI] UI Components : Mobile List Navigation : norm

スマホでよく見るリスト型のナビゲーション。画像なしの場合でも成立します。画像の大きさも場合によって大きさを変えるためにCSSでトリミングできるようにしています。

DEMO

a

b

c

d

HTML


 
  
  
   Lorem ipsum dolor sit amet
   consectetur
  
 
  
   Nullam vulputate elit non ante vulputate congue
   aliquam massa

CSS

/* 共通 */
* {
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}
.list_navi a {
 display:table;
 width:100%;
 height:5.2em;
 text-decoration:none;
}
.list_navi a > div {
 display: table-cell;
 vertical-align:middle;
}
.list_navi .image {
 padding-right:.6em;
}
.list_navi .image div {
 overflow:hidden;
}
.list_navi .image img {
 width:7em;
}
.list_navi .text {
 line-height:1;
}
.list_navi .text p {
 max-height:2.6em;
 line-height:1.3;
 margin-bottom:0;
 overflow:hidden;
}
.list_navi .text small {
 color:#aaa;
}
/* a */
.list_navi a {
 padding:.6em;
}
.list_navi li:nth-of-type(odd) {
 background:#F3F3F3;
}
.list_navi .image {
 width:4em;
}
.list_navi .image div {
 width:4em;
 height:4em;
}
/* b */
.list_navi a {
 padding:.6em;
}
.list_navi li {
 border-top:#eee 1px solid;
}
.list_navi li:first-child {
 border-top:none;
}
.list_navi .image {
 width:4em;
}
.list_navi .image div {
 width:4em;
 height:4em;
}
/* c */
.list_navi .text {
 padding-right:.6em;
}
.list_navi li {
 border-top:#eee 1px solid;
}
.list_navi li:first-child {
 border-top:none;
}
.list_navi .image {
 width:5.2em;
}
.list_navi .image div {
 width:5.2em;
 height:5.2em;
}
.list_navi .image img {
 width:10em;
}
/* d */
.list_navi a {
 padding:.6em;
}
.list_navi li {
 border-top:#fff 1px solid;
 border-bottom:#ddd 1px solid;
 background-image: -o-linear-gradient(top, #F9F9F9 0%, #E6E6E6 100%);
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F9F9F9), color-stop(100, #E6E6E6));
 background-image: -webkit-linear-gradient(top, #F9F9F9 0%, #E6E6E6 100%);
 background-image: linear-gradient(to bottom, #F9F9F9 0%, #E6E6E6 100%);
}
.list_navi li:first-child {
 border-top:none;
}
.list_navi li:last-child {
 border-bottom:none;
}
.list_navi .image {
 width:4em;
}
.list_navi .image div {
 width:4em;
 height:4em;
}

[UI] UI Components : Mobile List Navigation

DEMO

a

b

c

d

HTML

CSS

CSS対応状況

0 件のコメント :

コメントを投稿