contoh menu 1,2, dan 3

contoh menu 1

var last_expanded = ”; function showHide(id) { var obj = document.getElementById(id); var status = obj.className; if (status == ‘hide’) { if (last_expanded != ”) { var last_obj = document.getElementById(last_expanded); last_obj.className = ‘hide’; } obj.className = ‘show’; last_expanded = id; } else { obj.className = ‘hide’; } } .ogah1{ background-image:url(https://lh6.googleusercontent.com/-7GPiPHPpAGI/T3tfsEC2lqI/AAAAAAAAAjU/mafVfcAqdF0/s640/wood-backgrounds-wallpapers.jpg); text-align:center; width:80%; font-family: georgia, Helvetica, sans-serif; padding-left:20px; padding-right:20px; padding-top:10px; padding-bottom: 10px; display:block; text-decoration: none; color: #000000; height: 20px; border-radius: 30px 30px 30px 30px; -moz-border-radius: 30px 30px 30px 30px; -webkit-border-radius: 30px 30px 30px 30px; border:2px solid white; } .ogahniye1{ background-image:url(https://lh3.googleusercontent.com/-CcvaAkcUYYw/T3tcvGzb8xI/AAAAAAAAAh8/iVJJggPp9gM/s640/1680%25201050%2520Mac%2520The%2520Encyclopedia%2520Of%2520Wood.jpg); text-align:center; width:80%; font-family: georgia, Helvetica, sans-serif; padding-left:20px; padding-right:20px; padding-top:13px; padding-bottom: 10px; display:block; text-decoration: none; color: #000000; height: 20px; border-radius: 30px 30px 30px 30px; -moz-border-radius: 30px 30px 30px 30px; -webkit-border-radius: 30px 30px 30px 30px; border:2px solid white } .hide{ display: none; -webkit-transition: all 0.85s ease-in-out; -moz-transition: all 0.85s ease-in-out; -o-transition: all 0.85s ease-in-out; transition: all 0.85s ease-in-out; } .show{ display: block; -webkit-transition: all 0.85s ease-in-out; -moz-transition: all 0.85s ease-in-out; -o-transition: all 0.85s ease-in-out; transition: all 0.85s ease-in-out; } a{cursor: hand} Menu utama 1

Menu utama 2

Menu utama 3

Menu utama 4

contoh menu 2

var last_expanded = ”; function showHide(id) { var obj = document.getElementById(id); var status = obj.className; if (status == ‘hide’) { if (last_expanded != ”) { var last_obj = document.getElementById(last_expanded); last_obj.className = ‘hide’; } obj.className = ‘show’; last_expanded = id; } else { obj.className = ‘hide’; } } .ogah{ background-color: rgba(0, 0, 0, .6); text-align:center; width:80%; font-family: georgia, Helvetica, sans-serif; font-size: 20px; padding-left:20px; padding-right:20px; padding-top:10px; padding-bottom: 10px; display:block; text-decoration: none; color: #000000; height: 20px; border-radius: 30px 5px 30px 5px; -moz-border-radius: 30px 5px 30px 5px; -webkit-border-radius: 30px 5px 30px 5px; border:2px solid white; -webkit-transition: all 0.85s ease-in-out; -moz-transition: all 0.85s ease-in-out; -o-transition: all 0.85s ease-in-out; transition: all 0.85s ease-in-out; } .ogah:hover { -webkit-transform:translate(15px, 0px); -moz-transform:translate(15px, 0px); -o-transform:translate(15px, 0px); -transform:translate(15px, 0px); } .ogahniye{ background-color: rgba(0, 0, 0, .5); text-align:center; width:80%; font-family: georgia, Helvetica, sans-serif; font-size: 20px; padding-left:20px; padding-right:20px; padding-top:13px; padding-bottom: 10px; display:block; text-decoration: none; color: #000000; height: 20px; border-radius: 30px 5px 30px 5px; -moz-border-radius: 30px 5px 30px 5px; -webkit-border-radius: 30px 5px 30px 5px; border:2px solid white; -webkit-transition: all 0.85s ease-in-out; -moz-transition: all 0.85s ease-in-out; -o-transition: all 0.85s ease-in-out; transition: all 0.85s ease-in-out; } .ogahniye:hover { -webkit-transform:translate(15px, 0px); -moz-transform:translate(15px, 0px); -o-transform:translate(15px, 0px); -transform:translate(15px, 0px); } .hide{ display: none; -webkit-transition: all 0.85s ease-in-out; -moz-transition: all 0.85s ease-in-out; -o-transition: all 0.85s ease-in-out; transition: all 0.85s ease-in-out; } .show{ display: block; -webkit-transition: all 0.85s ease-in-out; -moz-transition: all 0.85s ease-in-out; -o-transition: all 0.85s ease-in-out; transition: all 0.85s ease-in-out; } a{cursor: hand} Menu utama 1

Menu utama 2

Menu utama 3

Menu utama 4

contoh menu 3

var last_expanded = ”; function showHide(id) { var obj = document.getElementById(id); var status = obj.className; if (status == ‘hide’) { if (last_expanded != ”) { var last_obj = document.getElementById(last_expanded); last_obj.className = ‘hide’; } obj.className = ‘show’; last_expanded = id; } else { obj.className = ‘hide’; } } .ogah3{ cursor:hand; border:1px solid #8ea0cc; background-color:#3059ab; padding-left:20px; padding-right:20px; padding-top:10px; padding-bottom: 10px; display:block; filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=’#bcd5f5′, endColorstr=’#3059ab’); background-image:-webkit-linear-gradient(270deg, #bcd5f5 0%, #122447 35%, #3059ab 100%); background-image:-moz-linear-gradient(270deg, #bcd5f5 0%, #122447 35%, #3059ab 100%); background-image:-ms-linear-gradient(270deg, #bcd5f5 0%, #122447 35%, #3059ab 100%); background-image:-o-linear-gradient(270deg, #bcd5f5 0%, #122447 35%, #3059ab 100%); background-image:linear-gradient(270deg, #bcd5f5 0%, #122447 35%, #3059ab 100%); border-radius: 30px 5px 30px 5px; -moz-border-radius: 30px 5px 30px 5px; -webkit-border-radius: 30px 5px 30px 5px; -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #515151; -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #515151; box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #515151; text-shadow:0px 1px 0px rgba(0,0,0,0.3); color:#ffffff; font:normal 16px ‘Comic Sans MS’,Arial,Sans-Serif; text-decoration:none; outline:none; vertical-align:middle; -webkit-transition: all 0.85s ease-in-out; -moz-transition: all 0.85s ease-in-out; -o-transition: all 0.85s ease-in-out; transition: all 0.85s ease-in-out; } .ogah3:hover { border-color:#02070f; background-color:#07080f; filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=’#07080f’, endColorstr=’#142b70′); background-image:-webkit-linear-gradient(270deg, #07080f 2%, #3862c2 50%, #142b70 100%); background-image:-moz-linear-gradient(270deg, #07080f 2%, #3862c2 50%, #142b70 100%); background-image:-ms-linear-gradient(270deg, #07080f 2%, #3862c2 50%, #142b70 100%); background-image:-o-linear-gradient(270deg, #07080f 2%, #3862c2 50%, #142b70 100%); background-image:linear-gradient(270deg, #07080f 2%, #3862c2 50%, #142b70 100%); color:#020e0f; -webkit-transform:translate(15px, 0px); -moz-transform:translate(15px, 0px); -o-transform:translate(15px, 0px); -transform:translate(15px, 0px); } .ogahniye3{ cursor:hand; border:1px solid #8ea0cc; background-color:#184eba; padding-left:20px; padding-right:20px; padding-top:10px; padding-bottom: 13px; display:block; filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=’#99bee8′, endColorstr=’#184eba’); background-image:-webkit-linear-gradient(270deg, #99bee8 0%, #202b40 35%, #184eba 100%); background-image:-moz-linear-gradient(270deg, #99bee8 0%, #202b40 35%, #184eba 100%); background-image:-ms-linear-gradient(270deg, #99bee8 0%, #202b40 35%, #184eba 100%); background-image:-o-linear-gradient(270deg, #99bee8 0%, #202b40 35%, #184eba 100%); background-image:linear-gradient(270deg, #99bee8 0%, #202b40 35%, #184eba 100%); border-radius: 30px 5px 30px 5px; -moz-border-radius: 30px 5px 30px 5px; -webkit-border-radius: 30px 5px 30px 5px; -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #515151; -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #515151; box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #515151; text-shadow:0px 1px 0px rgba(0,0,0,0.3); color:#ffffff; font:normal 16px ‘Comic Sans MS’,Arial,Sans-Serif; text-decoration:none; outline:none; vertical-align:middle; -webkit-transition: all 0.85s ease-in-out; -moz-transition: all 0.85s ease-in-out; -o-transition: all 0.85s ease-in-out; transition: all 0.85s ease-in-out; } .ogahniye3:hover { border-color:#02070f; background-color:#161a38; filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=’#161a38′, endColorstr=’#142b70′); background-image:-webkit-linear-gradient(270deg, #161a38 2%, #92aee8 50%, #142b70 100%); background-image:-moz-linear-gradient(270deg, #161a38 2%, #92aee8 50%, #142b70 100%); background-image:-ms-linear-gradient(270deg, #161a38 2%, #92aee8 50%, #142b70 100%); background-image:-o-linear-gradient(270deg, #161a38 2%, #92aee8 50%, #142b70 100%); background-image:linear-gradient(270deg, #161a38 2%, #92aee8 50%, #142b70 100%); color:#020e0f; -webkit-transform:translate(15px, 0px); -moz-transform:translate(15px, 0px); -o-transform:translate(15px, 0px); -transform:translate(15px, 0px); } .hide{ display: none; } .show{ display: block; } a{cursor: hand} Menu utama 1

Menu utama 2

Menu utama 3

Menu utama 4

Pos ini dipublikasikan di blog tutorial. Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s