Content Box With Menu Flip Out Title - Tanpa saya jelaskan secara rinci, pastinya sahabat semua pecinta SAHABAT BLOGGER 77 sudah mengenal apa itu content box dan fungsinya. Pekerjaannya sama seperti » Membuat Format Tulisan Dengan Text Area. Box bisa kita fungsikan sebagai kotak persegi atau sebagai wadah untuk kita menuliskan beberapa content informasi. Tujuannya untuk memberikan keterangan bahwa isi content dalam box tersebut PENTING untuk diketahui, atau bisa juga kita gunakan untuk memberikan tanda pada beberapa tulisan, sehingga bentuk dan tampilannya banyak saya desain dengan berbagai model pilihan seperti ini:
Dan masih banyak lagi yang selengkapnya bisa Anda cari dalam » Daftar Menu Blog. Untuk tampilan content box kali ini saya buat dengan gaya terbaru. Content Box With Menu Flip Out Title, dimana konsepnya saya desain menyerupai widget RELATED Post dengan thumbanail seperti gambar berikut:
Apa jadinya jika dalam content box kita sisipkan beberapa menu LABEL seperti itu, menarik bukan.? konsepnya mudah, disini saya menyiapkan 4 gambar dengan link menu yang nantinya akan kita letakkan disebelah kiri box content, jika ingin menambahkan menu lagi nanti bisa Anda modifikasi sendiri, kodenya seperti ini:
Yang perlu Anda lakukan untuk menyusun dan menempatkan menu itu agar sejajar dengan BOX adalah nilai posisi pada elemen display:flex-box (atur dan sesuaikan), lalu kita beri sedikit sentuhan hover pada menu dengan flip out effect, sedangkan untuk menampilkan title menu kita atur dengan CSS transform:rotateY(180deg) translateX(80px) dengan nilai content:"nama menu". Dan hasilnya :
DEMO SHOW
Sangat mudah bukan.!, bagaimana sahabat mau mencoba box informasi seperti tampilan diatas, cukup salin kode dibawah ini, lalu letakkan diarea postingan Anda, selengkapnya seperti ini:
Dan masih banyak lagi yang selengkapnya bisa Anda cari dalam » Daftar Menu Blog. Untuk tampilan content box kali ini saya buat dengan gaya terbaru. Content Box With Menu Flip Out Title, dimana konsepnya saya desain menyerupai widget RELATED Post dengan thumbanail seperti gambar berikut:
Apa jadinya jika dalam content box kita sisipkan beberapa menu LABEL seperti itu, menarik bukan.? konsepnya mudah, disini saya menyiapkan 4 gambar dengan link menu yang nantinya akan kita letakkan disebelah kiri box content, jika ingin menambahkan menu lagi nanti bisa Anda modifikasi sendiri, kodenya seperti ini:
nav .home a {background:#e84c3d url(URL-Gambar) no-repeat center center}
nav .home a:hover:after {border-left:2px solid #d82a1a}
nav .home a:after {background:#e84c3d;content:"HOME"}
nav .bT a {background:#1dd1ae url(URL-Gambar) no-repeat center center}
nav .bT a:hover:after {border-left:2px solid #17a489}
nav .bT a:after {background:#1dd1ae;content:"BLOGGING TIPS"}
nav .mN a {background:#3598db url(URL-Gambar) no-repeat center center}
nav .mN a:hover:after {border-left:2px solid #217dbc}
nav .mN a:after {background:#3598db;content:"MENU NAVIGASI"}
nav .sT a {background:#f5c700 url(URL-Gambar) no-repeat center center}
nav .sT a:hover:after {border-left:2px solid #c29e00}
nav .sT a:after {background:#f5c700;content:"SEO TRICK"}
nav .home a:hover:after {border-left:2px solid #d82a1a}
nav .home a:after {background:#e84c3d;content:"HOME"}
nav .bT a {background:#1dd1ae url(URL-Gambar) no-repeat center center}
nav .bT a:hover:after {border-left:2px solid #17a489}
nav .bT a:after {background:#1dd1ae;content:"BLOGGING TIPS"}
nav .mN a {background:#3598db url(URL-Gambar) no-repeat center center}
nav .mN a:hover:after {border-left:2px solid #217dbc}
nav .mN a:after {background:#3598db;content:"MENU NAVIGASI"}
nav .sT a {background:#f5c700 url(URL-Gambar) no-repeat center center}
nav .sT a:hover:after {border-left:2px solid #c29e00}
nav .sT a:after {background:#f5c700;content:"SEO TRICK"}
Yang perlu Anda lakukan untuk menyusun dan menempatkan menu itu agar sejajar dengan BOX adalah nilai posisi pada elemen display:flex-box (atur dan sesuaikan), lalu kita beri sedikit sentuhan hover pada menu dengan flip out effect, sedangkan untuk menampilkan title menu kita atur dengan CSS transform:rotateY(180deg) translateX(80px) dengan nilai content:"nama menu". Dan hasilnya :
Sangat mudah bukan.!, bagaimana sahabat mau mencoba box informasi seperti tampilan diatas, cukup salin kode dibawah ini, lalu letakkan diarea postingan Anda, selengkapnya seperti ini:
<style type="text/css">
.text {
padding:10px 5px 5px 100px;border:2px solid #666;
border-left:0;margin-top:-18px;width:75%;height:313px;overflow:auto}
nav {position:absolute;top:60px;left:-40px}
nav ul {margin:0;padding:0;list-style:none}
nav li {margin:0;padding:0;height:80px;width:80px}
nav a {
position:relative;z-index:100;color:#fff;font-size:20px;width:100%;
height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;
display:flex;-webkit-box-pack:center;-webkit-justify-content:center;
-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;
-webkit-align-items:center;-ms-flex-align:center;align-items:center;
-webkit-perspective:1000px;perspective:1000px;
-webkit-perspective-origin:center top;perspective-origin:center top}
nav a:after {
content:"";font-size:13px;display:-webkit-box;display:-webkit-flex;
display:-ms-flexbox;display:flex;-webkit-box-pack:center;
-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;
-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;
align-items:center;position:absolute;z-index:-1;left:0;text-align:center;
top:0;height:100%;width:100%;
-webkit-transform:rotateY(180deg) translateX(80px);
transform:rotateY(180deg) translateX(80px);
-webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;
transform-origin:100% 50%;-webkit-transition:-webkit-transform .5s ease-out;
transition:transform .5s ease-out;-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;-webkit-backface-visibility:hidden;
backface-visibility:hidden}
nav a:hover:after {transform:rotateY(0) translateX(80px);text-shadow:1px 2px 3px #111}
nav .home a {background:#e84c3d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY7fgBYgLmaBxrISrmU3U8butZrKvwrZyYymSeDPSiEVm-2NC7-3Gu-sIeRXkfIldSuaOhl7eapaTRZKgiGh89NAPVv6fnswERYI_YY1KmDnZXmctMNmII9H1EtF3DCiDBAj5Zpi4i7e4/s80/sb77-image2.png) no-repeat center center}
nav .home a:hover:after {border-left:2px solid #d82a1a}
nav .home a:after {background:#e84c3d;content:"HOME"}
nav .bT a {background:#1dd1ae url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisCC9e2uM7eXZt55-21KKuF2D8JU7LZXrgnqzsDDscpUYtp78il3whSYx_8QM2JSmBI2MlCOS3fx_bU3Su2snUTuy1KMVV-yBrTbx8aousyduRnnld-b_nn1x4UU5QtnEJSpJUEeGtpl0/s80/sb77-image3.png) no-repeat center center}
nav .bT a:hover:after {border-left:2px solid #17a489}
nav .bT a:after {background:#1dd1ae;content:"BLOGGING TIPS"}
nav .mN a {background:#3598db url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcN2o_2gbAlqMGTBLQG9VOKevDi6C8EP6Mfk2RY5hEdisLjgcmRbnYgekvelkMTxslApoyUfW9Ej_-_DtOG16C2dsby0dDymtCDtM2sAdABXXQGE3nl7nOy8tvrP2_arGVC23-VC0wCx4/s80/sb77-image7.png) no-repeat center center}
nav .mN a:hover:after {border-left:2px solid #217dbc}
nav .mN a:after {background:#3598db;content:"MENU NAVIGASI"}
nav .sT a {background:#f5c700 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb9DRUIkXMiNO4rMI4u8BVjnY0vXi0fXYMseYTPh3I-7EQCn8MCbbak6VNDfMV-TVWiJD_iWszGlA8DTaViApulpmKDz1R-HHoghU0MZdkxe6NZWiirhJMaTGMXjsJ09Th4UVWW2x5J6k/s80/sb77-image8.jpg) no-repeat center center}
nav .sT a:hover:after {border-left:2px solid #c29e00}
nav .sT a:after {background:#f5c700;content:"SEO TRICK"}
</style>
<div class="text">
....
Tulis CONTENT Anda Disini
....
<nav>
<ul>
<li class='home'><a href='#'></a></li>
<li class='bT'><a href='#'></a></li>
<li class='mN'><a href='#'></a></li>
<li class='sT'><a href='#'></a></li>
</ul>
</nav>
</div>
.text {
padding:10px 5px 5px 100px;border:2px solid #666;
border-left:0;margin-top:-18px;width:75%;height:313px;overflow:auto}
nav {position:absolute;top:60px;left:-40px}
nav ul {margin:0;padding:0;list-style:none}
nav li {margin:0;padding:0;height:80px;width:80px}
nav a {
position:relative;z-index:100;color:#fff;font-size:20px;width:100%;
height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;
display:flex;-webkit-box-pack:center;-webkit-justify-content:center;
-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;
-webkit-align-items:center;-ms-flex-align:center;align-items:center;
-webkit-perspective:1000px;perspective:1000px;
-webkit-perspective-origin:center top;perspective-origin:center top}
nav a:after {
content:"";font-size:13px;display:-webkit-box;display:-webkit-flex;
display:-ms-flexbox;display:flex;-webkit-box-pack:center;
-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;
-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;
align-items:center;position:absolute;z-index:-1;left:0;text-align:center;
top:0;height:100%;width:100%;
-webkit-transform:rotateY(180deg) translateX(80px);
transform:rotateY(180deg) translateX(80px);
-webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;
transform-origin:100% 50%;-webkit-transition:-webkit-transform .5s ease-out;
transition:transform .5s ease-out;-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;-webkit-backface-visibility:hidden;
backface-visibility:hidden}
nav a:hover:after {transform:rotateY(0) translateX(80px);text-shadow:1px 2px 3px #111}
nav .home a {background:#e84c3d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY7fgBYgLmaBxrISrmU3U8butZrKvwrZyYymSeDPSiEVm-2NC7-3Gu-sIeRXkfIldSuaOhl7eapaTRZKgiGh89NAPVv6fnswERYI_YY1KmDnZXmctMNmII9H1EtF3DCiDBAj5Zpi4i7e4/s80/sb77-image2.png) no-repeat center center}
nav .home a:hover:after {border-left:2px solid #d82a1a}
nav .home a:after {background:#e84c3d;content:"HOME"}
nav .bT a {background:#1dd1ae url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisCC9e2uM7eXZt55-21KKuF2D8JU7LZXrgnqzsDDscpUYtp78il3whSYx_8QM2JSmBI2MlCOS3fx_bU3Su2snUTuy1KMVV-yBrTbx8aousyduRnnld-b_nn1x4UU5QtnEJSpJUEeGtpl0/s80/sb77-image3.png) no-repeat center center}
nav .bT a:hover:after {border-left:2px solid #17a489}
nav .bT a:after {background:#1dd1ae;content:"BLOGGING TIPS"}
nav .mN a {background:#3598db url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcN2o_2gbAlqMGTBLQG9VOKevDi6C8EP6Mfk2RY5hEdisLjgcmRbnYgekvelkMTxslApoyUfW9Ej_-_DtOG16C2dsby0dDymtCDtM2sAdABXXQGE3nl7nOy8tvrP2_arGVC23-VC0wCx4/s80/sb77-image7.png) no-repeat center center}
nav .mN a:hover:after {border-left:2px solid #217dbc}
nav .mN a:after {background:#3598db;content:"MENU NAVIGASI"}
nav .sT a {background:#f5c700 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb9DRUIkXMiNO4rMI4u8BVjnY0vXi0fXYMseYTPh3I-7EQCn8MCbbak6VNDfMV-TVWiJD_iWszGlA8DTaViApulpmKDz1R-HHoghU0MZdkxe6NZWiirhJMaTGMXjsJ09Th4UVWW2x5J6k/s80/sb77-image8.jpg) no-repeat center center}
nav .sT a:hover:after {border-left:2px solid #c29e00}
nav .sT a:after {background:#f5c700;content:"SEO TRICK"}
</style>
<div class="text">
....
Tulis CONTENT Anda Disini
....
<nav>
<ul>
<li class='home'><a href='#'></a></li>
<li class='bT'><a href='#'></a></li>
<li class='mN'><a href='#'></a></li>
<li class='sT'><a href='#'></a></li>
</ul>
</nav>
</div>
Belum berminat? tak apa 😊 bantu kami dengan membagikan link ini ke teman, siapa tahu, justru mereka sedang mencari ini!
