2013/10/26

[UI] UI Components : Mobile Tile Based Navigation

タイルベースのスマホ用ナビゲーション。アイコンにはFont Awesomeを使用。

DEMO

a

b

c

d

HTML

CSS

/* 共通 */
* {
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}
.navi li {
 position:relative;
 float:left;
 width:50%;
 line-height:1;
 text-align:center;
 text-transform:uppercase;
 overflow:hidden;
}
.navi li a {
 display:block;
 height:160px;
 text-decoration:none;
 transition: all 0.3s ease 0s;
 -webkit-transition: all 0.3s ease 0s;
}
.navi li a:hover {
 opacity:0.7;
 filter: alpha(opacity=70);
 -ms-filter: "alpha(opacity=70)";
}
.navi span {
 display:block;
 font-size:14px;
 color:#fff;
}
/* a */
.navi .icon {
 padding:40px 0 10px;
 font-size:50px;
 color:#fff;
}
.navi-photo a {
 background:#F75455;
}
.navi-mail a {
 background:#FF797D
}
.navi-talk a {
 background:#F1C40F;
}
.navi-music a {
 background:#FF9D2A;
}
.navi-map a {
 background:#2EB2A0;
}
.navi-shopping a {
 background:#5EBFD8;
}
/* b */
.navi {
 padding:5px;
 overflow:hidden;
}
.navi li {
 padding:5px;
}
.navi li a {
 height:145px;
 border-radius: 5px;
}
.navi .icon {
 padding:35px 0 10px;
 font-size:50px;
 color:#fff;
}
.navi-photo a {
 background:#F75455;
}
.navi-mail a {
 background:#FF797D
}
.navi-talk a {
 background:#F1C40F;
}
.navi-music a {
 background:#FF9D2A;
}
.navi-map a {
 background:#2EB2A0;
}
.navi-shopping a {
 background:#5EBFD8;
}
/* c */
.navi li:before, .navi li:after {
 content: "";
 position: absolute;
 width: 0;
 height: 0;
}
.navi li:before {
 bottom: 0;
 right: 0;
 left: 0;
 width:100%;
 border-bottom: #ddd 1px solid;
}
.navi li:after {
 top: 0;
 bottom: 0;
 right: 0;
 height:100%;
 border-right: #ddd 1px solid;
}
.navi li:nth-child(5):before, .navi li:nth-child(6):before {
 border-bottom: none;
}
.navi li:nth-child(2n):after {
 border-right: none;
}
.navi .icon {
 width:90px;
 height:90px;
 line-height:90px;
 border-radius: 50px;
 margin:25px 0 10px;
 font-size:40px;
 color:#fff;
}
.navi-photo .icon {
 background:#F75455;
}
.navi-photo span {
 color:#F75455;
}
.navi-mail .icon {
 background:#FF797D
}
.navi-mail span {
 color:#FF797D
}
.navi-talk .icon {
 background:#F1C40F;
}
.navi-talk span {
 color:#F1C40F;
}
.navi-music .icon {
 background:#FF9D2A;
}
.navi-music span {
 color:#FF9D2A;
}
.navi-map .icon {
 background:#2EB2A0;
}
.navi-map span {
 color:#2EB2A0;
}
.navi-shopping .icon {
 background:#5EBFD8;
}
.navi-shopping span {
 color:#5EBFD8;
}
/* d */
.navi li:before, .navi li:after {
 content: "";
 position: absolute;
 width: 0;
 height: 0;
}
.navi li:before {
 bottom: 0;
 right: 0;
 left: 0;
 width:80%;
 margin: 0 auto;
 border-bottom: #ddd 1px solid;
}
.navi li:after {
 top: 0;
 bottom: 0;
 right: 0;
 height:80%;
 margin: auto 0;
 border-right: #ddd 1px solid;
}
.navi li:nth-child(5):before, .navi li:nth-child(6):before {
 border-bottom: none;
}
.navi li:nth-child(2n):after {
 border-right: none;
}
.navi .icon {
 width:90px;
 height:90px;
 line-height:90px;
 border-radius: 50px;
 margin:25px 0 10px;
 font-size:40px;
 color:#fff;
}
.navi-photo .icon {
 background:#F75455;
}
.navi-photo span {
 color:#F75455;
}
.navi-mail .icon {
 background:#FF797D
}
.navi-mail span {
 color:#FF797D
}
.navi-talk .icon {
 background:#F1C40F;
}
.navi-talk span {
 color:#F1C40F;
}
.navi-music .icon {
 background:#FF9D2A;
}
.navi-music span {
 color:#FF9D2A;
}
.navi-map .icon {
 background:#2EB2A0;
}
.navi-map span {
 color:#2EB2A0;
}
.navi-shopping .icon {
 background:#5EBFD8;
}
.navi-shopping span {
 color:#5EBFD8;
}

CSS対応状況

tag : , ,

0 件のコメント :

コメントを投稿

☝