web design: Menu dengan Tampilan Klik pada Gambar

Menu dengan Tampilan Klik pada Gambar

Menu Keren dengan Tampilan Klik

Saya menyediakan menu baru saya ini, menampilkan menu dengan cara mengklik nomor urut menu lalu dapat terlihat judul menunya akan lebih baik dapat anda lihat sendiri pada button demo berikut ini dan dapat diunduh filenya. baiklah mari kita simak baik-baik.

Tag CSS nya

<style>
.cr-container
{border: 10px solid red;
height: 400px;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 600px;}
 .cr-container br {display:none;}
 .cr-container label
 {color: orange;
 cursor: pointer;
 float: left;
 font-size: 30px;
 height: 32px;
 line-height:30px;
 margin-top: 350px;
 position: relative;
 text-align: center;
 width: 150px;
 z-index: 1000;}
 .cr-container label:before
 {background: red;
 border-radius: 50%;
 box-shadow: 0 0 0 4px green;
 content: "";
 height: 32px;
 left: 50%;
 margin-left: -16px;
 position: absolute;
 width: 32px;
 z-index: -1;}
 .cr-container label:after{
 background: -moz-linear-gradient(#FFF,#000,#FFF);
 background: -webkit-linear-gradient(#FFF,#000,#FFF);
 background: -o-linear-linear-gradient(#FFF,#000,#FFF);
 background: -ms-linear-linear-gradient(#FFF,#000,#FFF);
 background: linear--linear-gradient(#FFF,#000,#FFF);
 bottom: -20px;
 content: '';
 height: 400px;
 position: absolute;
 right: 0px; width: 1px;}
 .cr-container label.cr-label-img-4:after{ width: 0px;}
 .cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4 { color: #000;}
 .cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before { background: #FFF;
 box-shadow: 0 0 0 4px rgba(0,0,0, 0.5);}
 .cr-container input{display: none;}
 .cr-bgimg {width: 600px;height: 400px;
 position: absolute;
 left: 0px;top: 0px;
 z-index: 1;
 background-repeat: no-repeat;
 background-position: 0 0;}
 .cr-bgimg div {width: 150px;
 height: 100%;
 position: relative;
 float: left;
 overflow: hidden;
 }
 .cr-bgimg div:nth-child(odd) span {left: -150px;}
 
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,.cr-bgimg div span:nth-child(1) { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7f7meEZvcSmp3V7n0DJgzAbXKTS_lF__oITYgNzrI6AY46WzHYjRtxQ0BRMLkurypiQHu7u1GWsk7tY5UpQMjYv5s5QYPAlhk9U6Q_cYYrfCioz6Gq2nfVvYKkClb9fdCl5ZpY9EpzFbd/s1600/ab.png);width:100%;}
 
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,.cr-bgimg div span:nth-child(2){ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvgYuB1xtG4Ez9ekxy8Bf3_1IGCR9P3sgyfrutvxz52zgpcBCnCTDI_ecTJrSbac7WoEWkBAiOHrY3rpeg0sJEB-vk_B3wcamNwk4gcywp-WO-GV_C7cFBKCqlCOwK8o5knwxbRaoloJs-/s1600/bb.jpg);width:100%;}
 
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,.cr-bgimg div span:nth-child(3){ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifonRreW5SkehEI-HqX4I5eq3EEeTJNZxLJHq6jnSkBdpp4KTFfz2HeV_jneEyT7egwMpQNJt2JKlkGMBRV6uF01MVdUsQNQvtyeEGiZsSMjwI2zXt49bNTJT8FZkiJ1XL7uow8OiFb9Vc/s1600/cb.jpg);width:100%;}
 
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,.cr-bgimg div span:nth-child(4){ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimnKo3O-7uXWPab3qBdY_2vGRLQdvT4K4_kSBs7V8DFvN4XrDmuiSC_X0TiJ_k6o5-i4NGliOm2YifrpfVy_I6XpogVv-owJ0C05-3pe9BakJCcaz6XewApS-N9buTzReTa037P-SCgipw/s1600/db.jpg);width:100%;}
 
.cr-bgimg div:nth-child(1) span {background-position: 0px 0px;}
 .cr-bgimg div:nth-child(2) span {background-position: -150px 0px;}
 .cr-bgimg div:nth-child(3) span {background-position: -300px 0px;}
 .cr-bgimg div:nth-child(4) span {background-position: -450px 0px;}
 .cr-container input:checked ~ .cr-bgimg div span{ -webkit-animation: slideOutRight 0.6s ease-in-out;
 -moz-animation: slideOutRight 0.6s ease-in-out;
 -o-animation: slideOutRight 0.6s ease-in-out;
 -ms-animation: slideOutRight 0.6s ease-in-out;
 animation: slideOutRight 0.6s ease-in-out;}
 @-webkit-keyframes slideOutRight { 0%{ left: 0px; } 100%{ left: 150px; }}
 @-moz-keyframes slideOutRight { 0%{ left: 0px; } 100%{ left: 150px; }}
 @-o-keyframes slideOutRight { 0%{ left: 0px; } 100%{ left: 150px; }}
 @-ms-keyframes slideOutRight { 0%{ left: 0px; } 100%{ left: 150px; }}
 @keyframes slideOutRight { 0%{ left: 0px; } 100%{ left: 150px; }}
 .cr-container input:checked ~ .cr-bgimg div:nth-child(even) span { -webkit-animation: slideOutLeft 0.6s ease-in-out;
 -moz-animation: slideOutLeft 0.6s ease-in-out;
 -o-animation: slideOutLeft 0.6s ease-in-out; -ms-animation: slideOutLeft 0.6s ease-in-out; animation: slideOutLeft 0.6s ease-in-out;}
 @-webkit-keyframes slideOutLeft { 0%{ left: 0px; } 100%{ left: -150px; }}
 @-moz-keyframes slideOutLeft { 0%{ left: 0px; } 100%{ left: -150px; }}
 @-o-keyframes slideOutLeft { 0%{ left: 0px; } 100%{ left: -150px; }}
 @-ms-keyframes slideOutLeft { 0%{ left: 0px; } 100%{ left: -150px; }}
 @keyframes slideOutLeft { 0%{ left: 0px; } 100%{ left: -150px; }}
 .cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2), .cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4) {-webkit-transition: left 0.5s ease-in-out;
 -moz-transition: left 0.5s ease-in-out;
 -o-transition: left 0.5s ease-in-out;
 -ms-transition: left 0.5s ease-in-out;
 transition: left 0.5s ease-in-out;
 -webkit-animation: none;
 -moz-animation: none;
 -o-animation: none;
 -ms-animation: none;
 animation: none; left: 0px;
 z-index: 10;}
 .cr-titles h3 {font-weight: normal;}
 .cr-titles h3 span
 { z-index: 10000; position: absolute;
 width: 100%; left: 0px; text-align: center;
 opacity: 0; top: 50%;}
 .cr-titles h3 span.big {color: #FFF;font-family: Helvetica;
 font-size: 60px;letter-spacing: -2px;
 text-shadow: 1px 2px 1px #000;
 left: 0px;top: 230px;
 -webkit-transition: opacity 0.8s ease-in-out, -webkit-transform 0.8s ease-in-out; -moz-transition: opacity 0.8s ease-in-out, -moz-transform 0.8s ease-in-out; -o-transition: opacity 0.8s ease-in-out, -o-transform 0.8s ease-in-out; -ms-transition: opacity 0.8s ease-in-out, -ms-transform 0.8s ease-in-out;
 transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;} .cr-titles h3 span.small {background: rgba(255, 255, 255, 0.7);
 color: #000;font-family: Tahoma;font-size: 14px;letter-spacing: 0;
 margin-top: 100px;
 opacity: 0;padding: 5px 0;
 text-shadow: 1px 1px 1px #FFF;
 -webkit-transition: opacity 0.8s ease-in-out;
 -moz-transition: opacity 0.8s ease-in-out;
 -o-transition: opacity 0.8s ease-in-out;
 -ms-transition: opacity 0.8s ease-in-out;
 transition: opacity 0.8s ease-in-out;}
 .cr-container input:checked ~ .cr-titles h3 span:nth-child(1) { opacity: 0; -webkit-transform: scale(0.5);
 -moz-transform: scale(0.5);
 -o-transform: scale(0.5);
 -ms-transform: scale(0.5);
 transform: scale(0.5);}
 .cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1),.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1),.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1),.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1) {opacity: 1;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);}
 .cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2),.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2),.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2),.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2){opacity: 1;}</style>

Tag HTML nya

<style>
.cr-container
{border: 10px solid red;
height: 400px;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 600px;}
 .cr-container br {display:none;}
 .cr-container label
 {color: orange;
 cursor: pointer;
 float: left;
 font-size: 30px;
 height: 32px;
 line-height:30px;
 margin-top: 350px;
 position: relative;
 text-align: center;
 width: 150px;
 z-index: 1000;}
 .cr-container label:before
 {background: red;
 border-radius: 50%;
 box-shadow: 0 0 0 4px green;
 content: "";
 height: 32px;
 left: 50%;
 margin-left: -16px;
 position: absolute;
 width: 32px;
 z-index: -1;}
 .cr-container label:after{
 background: -moz-linear-gradient(#FFF,#000,#FFF);
 background: -webkit-linear-gradient(#FFF,#000,#FFF);
 background: -o-linear-linear-gradient(#FFF,#000,#FFF);
 background: -ms-linear-linear-gradient(#FFF,#000,#FFF);
 background: linear--linear-gradient(#FFF,#000,#FFF);
 bottom: -20px;
 content: '';
 height: 400px;
 position: absolute;
 right: 0px; width: 1px;}
 .cr-container label.cr-label-img-4:after{ width: 0px;}
 .cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4 { color: #000;}
 .cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before { background: #FFF;
 box-shadow: 0 0 0 4px rgba(0,0,0, 0.5);}
 .cr-container input{display: none;}
 .cr-bgimg {width: 600px;height: 400px;
 position: absolute;
 left: 0px;top: 0px;
 z-index: 1;
 background-repeat: no-repeat;
 background-position: 0 0;}
 .cr-bgimg div {width: 150px;
 height: 100%;
 position: relative;
 float: left;
 overflow: hidden;
 }
 .cr-bgimg div:nth-child(odd) span {left: -150px;}
 
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,.cr-bgimg div span:nth-child(1) { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7f7meEZvcSmp3V7n0DJgzAbXKTS_lF__oITYgNzrI6AY46WzHYjRtxQ0BRMLkurypiQHu7u1GWsk7tY5UpQMjYv5s5QYPAlhk9U6Q_cYYrfCioz6Gq2nfVvYKkClb9fdCl5ZpY9EpzFbd/s1600/ab.png);width:100%;}
 
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,.cr-bgimg div span:nth-child(2){ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvgYuB1xtG4Ez9ekxy8Bf3_1IGCR9P3sgyfrutvxz52zgpcBCnCTDI_ecTJrSbac7WoEWkBAiOHrY3rpeg0sJEB-vk_B3wcamNwk4gcywp-WO-GV_C7cFBKCqlCOwK8o5knwxbRaoloJs-/s1600/bb.jpg);width:100%;}
 
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,.cr-bgimg div span:nth-child(3){ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifonRreW5SkehEI-HqX4I5eq3EEeTJNZxLJHq6jnSkBdpp4KTFfz2HeV_jneEyT7egwMpQNJt2JKlkGMBRV6uF01MVdUsQNQvtyeEGiZsSMjwI2zXt49bNTJT8FZkiJ1XL7uow8OiFb9Vc/s1600/cb.jpg);width:100%;}
 
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,.cr-bgimg div span:nth-child(4){ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimnKo3O-7uXWPab3qBdY_2vGRLQdvT4K4_kSBs7V8DFvN4XrDmuiSC_X0TiJ_k6o5-i4NGliOm2YifrpfVy_I6XpogVv-owJ0C05-3pe9BakJCcaz6XewApS-N9buTzReTa037P-SCgipw/s1600/db.jpg);width:100%;}
 
.cr-bgimg div:nth-child(1) span {background-position: 0px 0px;}
 .cr-bgimg div:nth-child(2) span {background-position: -150px 0px;}
 .cr-bgimg div:nth-child(3) span {background-position: -300px 0px;}
 .cr-bgimg div:nth-child(4) span {background-position: -450px 0px;}
 .cr-container input:checked ~ .cr-bgimg div span{ -webkit-animation: slideOutRight 0.6s ease-in-out;
 -moz-animation: slideOutRight 0.6s ease-in-out;
 -o-animation: slideOutRight 0.6s ease-in-out;
 -ms-animation: slideOutRight 0.6s ease-in-out;
 animation: slideOutRight 0.6s ease-in-out;}
 @-webkit-keyframes slideOutRight { 0%{ left: 0px; } 100%{ left: 150px; }}
 @-moz-keyframes slideOutRight { 0%{ left: 0px; } 100%{ left: 150px; }}
 @-o-keyframes slideOutRight { 0%{ left: 0px; } 100%{ left: 150px; }}
 @-ms-keyframes slideOutRight { 0%{ left: 0px; } 100%{ left: 150px; }}
 @keyframes slideOutRight { 0%{ left: 0px; } 100%{ left: 150px; }}
 .cr-container input:checked ~ .cr-bgimg div:nth-child(even) span { -webkit-animation: slideOutLeft 0.6s ease-in-out;
 -moz-animation: slideOutLeft 0.6s ease-in-out;
 -o-animation: slideOutLeft 0.6s ease-in-out; -ms-animation: slideOutLeft 0.6s ease-in-out; animation: slideOutLeft 0.6s ease-in-out;}
 @-webkit-keyframes slideOutLeft { 0%{ left: 0px; } 100%{ left: -150px; }}
 @-moz-keyframes slideOutLeft { 0%{ left: 0px; } 100%{ left: -150px; }}
 @-o-keyframes slideOutLeft { 0%{ left: 0px; } 100%{ left: -150px; }}
 @-ms-keyframes slideOutLeft { 0%{ left: 0px; } 100%{ left: -150px; }}
 @keyframes slideOutLeft { 0%{ left: 0px; } 100%{ left: -150px; }}
 .cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2), .cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4) {-webkit-transition: left 0.5s ease-in-out;
 -moz-transition: left 0.5s ease-in-out;
 -o-transition: left 0.5s ease-in-out;
 -ms-transition: left 0.5s ease-in-out;
 transition: left 0.5s ease-in-out;
 -webkit-animation: none;
 -moz-animation: none;
 -o-animation: none;
 -ms-animation: none;
 animation: none; left: 0px;
 z-index: 10;}
 .cr-titles h3 {font-weight: normal;}
 .cr-titles h3 span
 { z-index: 10000; position: absolute;
 width: 100%; left: 0px; text-align: center;
 opacity: 0; top: 50%;}
 .cr-titles h3 span.big {color: #FFF;font-family: Helvetica;
 font-size: 60px;letter-spacing: -2px;
 text-shadow: 1px 2px 1px #000;
 left: 0px;top: 230px;
 -webkit-transition: opacity 0.8s ease-in-out, -webkit-transform 0.8s ease-in-out; -moz-transition: opacity 0.8s ease-in-out, -moz-transform 0.8s ease-in-out; -o-transition: opacity 0.8s ease-in-out, -o-transform 0.8s ease-in-out; -ms-transition: opacity 0.8s ease-in-out, -ms-transform 0.8s ease-in-out;
 transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;} .cr-titles h3 span.small {background: rgba(255, 255, 255, 0.7);
 color: #000;font-family: Tahoma;font-size: 14px;letter-spacing: 0;
 margin-top: 100px;
 opacity: 0;padding: 5px 0;
 text-shadow: 1px 1px 1px #FFF;
 -webkit-transition: opacity 0.8s ease-in-out;
 -moz-transition: opacity 0.8s ease-in-out;
 -o-transition: opacity 0.8s ease-in-out;
 -ms-transition: opacity 0.8s ease-in-out;
 transition: opacity 0.8s ease-in-out;}
 .cr-container input:checked ~ .cr-titles h3 span:nth-child(1) { opacity: 0; -webkit-transform: scale(0.5);
 -moz-transform: scale(0.5);
 -o-transform: scale(0.5);
 -ms-transform: scale(0.5);
 transform: scale(0.5);}
 .cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1),.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1),.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1),.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1) {opacity: 1;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);}
 .cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2),.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2),.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2),.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2){opacity: 1;}</style>

File nya dapat dilihat hasilnya dan dapat diunduh berikut ini :

Demo Unduh