04/25/16 | Mys2010 on Codepen

Memasang Kode Menu Transparent
Login ke akun blog klik tombol blog baru,
buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut,
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber berikut
Get Blank Template. edit
background warna sesuai keinginan klik simpan selesai.

Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;}
body {
  background: #151515;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  10px 0;
  position: fixed;
  top: 0;
  width: 100%;

text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  11px;
  background: #222;
  border-bottom: 3px solid #dad;
}

/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 70px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  11px;
background:  #000020;
border-top: 2px solid #f0f;
z-index: 9999;
}  
h5 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #00BFFF 50%, transparent 90%); 
}

body{padding: 0;margin: 0;}
  #container{
  padding-top:60px;
  background:#069;}
/*****class's nav-list*****/
.nav-list{
 position: fixed;
 _position: absolute;
 top:0;
 border-bottom:1px solid #222;
    width:100%; 
 background: transparent;
 overflow:hidden;
 z-index:1000;
 font-weight:bold; 
 -webkit-box-shadow:0 1px 12px #000;
    -moz-box-shadow:0 1px 12px #000;
      box-shadow:0 1px 12px #000; 
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 68%); 
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(68%,rgba(255,255,255,0))); 
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 68%); 
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 68%); 
/* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 68%); 
/* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 68%); 
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); 
/* IE6-9 */  
} 
.nav-list ul {
 font-family: Trebuchet, "Trebuchet MS", Arial, sans-serif;
 overflow:hidden;
 margin: 5px;
 list-style: none;
 padding:5px 0;
}
.nav-list  a {
 display:block;
 color:#fff;
 text-decoration: none;
 text-transform: lowercase;
 text-shadow: 0 1px 2px #000;
 -webkit-transition: 0.40s ;
    -moz-transition: 0.40s;
}
.nav-list li { 
 float:left; 
 font-size:83%;
 line-height:1.1;
 word-spacing:0.2em;
 text-align:center;
}
/*===========*/
.select-container {
  padding: 0;
  height: 26px;
  overflow: hidden;
  width: 100px;
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
}
.select-container select {
  line-height: 26px;  
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;  
  background-color: #ccc;
  -webkit-appearance: none;
  border: 0;
  width: 122px;
  padding-left: 5px;
  padding-right: 5px;
  margin: 0;
  line-height: 12px;
  height: 100%;
}
/* *BTN */
 .btn {
  display: inline-block;
  *display: inline;
  padding: 4px 10px 4px;
  margin-bottom: 0;
  *margin-left: .3em;
  font-size: 13px;
  line-height: 18px;
  *line-height: 20px;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  *background-color: #e6e6e6;
  background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  border: 1px solid #cccccc;
  *border: 0;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-bottom-color: #b3b3b3;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
  *zoom: 1;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn:hover,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
  background-color: #e6e6e6;
  *background-color: #d9d9d9;
}
.btn:active,
.btn.active {
  background-color: #cccccc \9;
}
.btn:first-child {
  *margin-left: 0;
}
.btn:hover {
  color: #333333;
  text-decoration: none;
  background-color: #e6e6e6;
  *background-color: #d9d9d9;
/*Buttons in IE7 don't get borders so darken on hover */
  background-position: 0 -15px;
  -webkit-transition: background-position 0.1s linear;
     -moz-transition: background-position 0.1s linear;
      -ms-transition: background-position 0.1s linear;
       -o-transition: background-position 0.1s linear;
          transition: background-position 0.1s linear;
}
.btn:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.btn.active,
.btn:active {
  background-color: #e6e6e6;
  background-color: #d9d9d9 \9;
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn.disabled,
.btn[disabled] {
  cursor: default;
  background-color: #e6e6e6;
  background-image: none;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
}

/*==========  Mobile First Method  ==========*/
/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}

/*==========  Non-Mobile First Method  ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}</style>

<section class="nav-list">
<div class="nav-flyout-box">
  <ul>
<li class="nav-list-button"><a id="sel" class="btn active" href="/1.htm">Home</a></li>
<li class="nav-list-button"><a id="sel" class="btn" href="/2.htm">menu 1</a></li>
<li class="nav-list-button"><a id="sel" class="btn" href="/3.htm">menu 2</a></li>
<li class="nav-list-button"><a id="sel" class="btn" href="/4.htm">menu 3</a></li>
<li class="nav-list-button"><a id="sel" class="btn" href="/5.htm">menu 4</a></li>
<li class="nav-list-button"><a id="sel" class="btn" href="/ver.php">menu 5</a></li>
              </ul>
</div>
</section> 
<div id="container">
<div align="center">

<textarea cols="20" rows="5" id="selThis"></textarea>

<div id="dropshadow">
Myscript2010</div>
<hr/></div>

<div class="ap" id="ap">
<div align="center">
<a href="http://myscript2010s.blogspot.co.id" target="_blank" title="Myscript2010">
<h5>
<span style="color:white">CIBEBER CIMAHI</h5>
</a>  
</div>
<header> 
<a href="http://sample-mys2010.blogspot.co.id" target="_blank" title="Myscript2010"><span style="color:white"><b>LET'S STUDY</b></a>
</header>

<link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<script>$(function () {
$('textarea').focus(function () {
this.select();
});
$('textarea').mouseup(function (e) {
e.preventDefault();
});
$('.toggle_container').hide();
$('.trigger').click(function () {
$('.toggle_container').slideToggle('slow');
return false;
});
function cerrarse() {
window.close();
}});</script>

Menu code by. Jossyl Zamora
Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy & paste you canDownload Here Transfarent Full Code

Category: Menu Transparent

Mys2010 on Codepen

Menu Transparent

POPULAR

Blog Archive