Content Box With Menu Flip Out Title

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:

Content Box Collection

• 2 Desain Tampilan Blockquote Info
• Amplop Surat Design Model Untuk Teks
• Konten Light Box Dengan Tombol On Off
• Membuat Pesan Informasi Dengan Blockquote
• Membuat Formulir Informasi Untuk Teks
• Border List Animasi Dengan Keyframes Infinite

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"}

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:

<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/AVvXsEgphAhcaCW-l7X_9FjczUZKI_jQv82hU7PL389ttn7Q-dOlq_lPO0sygOl5aSz2kcpko-vUN8uibcF4ExdDMr9m_XxthDMFV6RN-T4DvIVo6hQuia0xA-v5dvU4bLs9VAjJOPos3dAA-FA/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/AVvXsEg7P867t8zXRJoXHEHA6v1qmHXJRZBG6Gv3t09Wy7YmtohiC4hVyTL6Fo44AOqKXFV0OKmhCKTMBte0L6NZ2V6axKPokfg8W_OtYZwI-ykR5IkK_SkSbCupM8Iv3fW5JmesFvhgeIzjSVU/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/AVvXsEgV3ci1FY7rZEsV_MCITAfnrTnVspFvKjRpSYLqyLJb6NsRxodSAAlk_IB8Hu11uXRGUP_qtdpTJMNRIKBvJEbksUCXl4MXV_NoDa9ltdIcMqr6IUTdaKQJknuC-E_HgwZBWLVoj_dQpIE/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/AVvXsEimYpOh6JcjGBTU5Te5rkaPH9MX4fZ12AsVpknvN9dgx_8gI9omPjLDC9Zp3UShJ-mfqaCOzshxO3bhRjopqlcziDnXMWqYhdUFcFTWlzB68BmjvO-NChV77_AOP-sr5dWHTdLOB_Rjdms/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>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Content Box With Menu Flip Out Title
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>

https://sahabatblogger77.blogspot.com/2015/07/content-box-with-menu-flip-out-title.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77