Membuat Navigation Menu Responsive Multi Color

Berikut ini akan diuraikan langkah-langkah cara membuat ( Navigation Menu Responsive Multi Color ) semoga artikel kali ini bermanfaat untuk kita semua.
Adapun Cara membuat : ( Navigation Menu Responsive Multi Color ) sebagai berikut :

DAFTAR ISI CODE [Tampilkan][Sembunyikan]

CSS Kode

nav {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex}
@media all and (max-width: 650px) {
nav {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
width: 80%;
margin: 0 auto}}

nav a {
-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;
flex: 1;text-align: center;padding: 15px;
text-transform: uppercase;color: currentColor;
text-shadow: 1px 2px 1px #111;font-weight: 600;font-size: 15px}

nav a:nth-child(2):hover {
-0-transform:rotateY(-360deg);
-ms-transform:rotateY(-360deg);
-moz-transform:rotateY(-360deg);
-webkit-transform:rotateY(-360deg);
transform:rotateY(-360deg);
background: #660000;
box-shadow: inset 0px 4px 0 0 red}

nav a:nth-child(2) {
background: red;
-webkit-transition: 1.3s;-webkit-transform-style: preserve-3d;
-moz-transition: 1.3s;-moz-transform-style: preserve-3d;
-o-transition: 1.3s;-o-transform-style: preserve-3d;
-ms-transition: 1.3s;-ms-transform-style: preserve-3d;
transition: 1.3s;transform-style: preserve-3d}

nav a:nth-child(1) {background: #ccff00}
nav a:nth-child(1):hover {background: #526600;box-shadow: inset 0px 4px 0 0 #ccff00}
nav a:nth-child(3) {background: #0066ff}
nav a:nth-child(3):hover {background: #002966;box-shadow: inset 0px 4px 0 0 #0066ff}
nav a:nth-child(4) {background: #cc00ff}
nav a:nth-child(4):hover {background: #520066;box-shadow: inset 0px 4px 0 0 #cc00ff}
nav a:nth-child(5) {background: aqua}
nav a:nth-child(5):hover {background: #008080;box-shadow: inset 0px 4px 0 0 aqua}

HTML Kode

<nav>
<a href="#">Home</a>
<a href="#">Daftar Isi</a>
<a href="#">Backlink</a>
<a href="#">About</a>
<a href="#">Source</a>
</nav>

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 ( Navigation Menu Responsive Multi Color ) semoga bermanfaat terima kasih.

CONTOHNYA

Home
Daftar Isi
Bisnis
Blogger