Membuat Content Box With Menu Flip Out Title

Berikut ini akan diuraikan langkah-langkah cara membuat ( Content Box With Menu Flip Out Title ) semoga artikel kali ini bermanfaat untuk kita semua.
Adapun Cara membuat : ( Content Box With Menu Flip Out Title ) sebagai berikut :
DAFTAR ISI CODE [Tampilkan][Sembunyikan]

KODE CSS

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

KODE HTML

<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/AVvXsEg8m2TF9440Zqw6R1ekzk7mGoYBnu1YqDf-bETsLl23fd5v09U_13nTOehekWGRHknEmw_Py3pup8rTdAgtiOpKchF83REv9dNpKZDSOJtWguV72S39IxfwftSWkCjMg1h_U6hVKZssD_Y/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/AVvXsEjcd6j0GAqrx6EHE1jyyvmzbQtyCovsqY25hHD3YmrRkf_oaB78qtPM2fd4AgBpdUE5vtfmh67NLXxDccIO6XS9chjcwdHZgqsgdq_NszjVHUQAhEvTr8s7MBJ2aEK5quAuvyx2CcZ_z20/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/AVvXsEiUDZOTxTiv7Qd-77pqKc7bny-EI9xMLuV-l02i7785d_3UIco9MgFpumiNChqerpJUWti4jNQZUtJXp45dr0OnzvV725Jks85yKLiASfsTh8lEx6cq01D-Gf5wOpWZTfTWi3AGN2KwWHo/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/AVvXsEjwQ6_zzbrVb8poFl-V_4ylcCJ-t6BdXLU1aQ7uYYP-A7wlGeLHdE5-O2Kd_yGqlErddwpeFxGo8IFZCLz3_qUufH_vMrZnL_iuW2Bg_zI4UwxCPNpXnB3ZsMq08tyWvjIuRl5KaMewVDY/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>

Setelah semua kode html, (style, atau b:skin, dan javascript sudah di pasang sesuai posisinya masing-masing langkah terahir adalah Simpan, atau klik pratinjau tema terlebih dahulu,. Namun untuk saran tiada salahnya langsung klik SIMPAN dan lihat hasilnya, jika terjadi eror, dan kode tidak berfungsi dengan baik silahkan informasikan kami di kolom komentar, salam Team SAHAB BISNIS 77.

Demikian Cara membuat ( Content Box With Menu Flip Out Title ) semoga bermanfaat terima kasih.