10/27/17 | Mys2010 on Codepen

Memasang kode Hover menu upwards
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 ini : Blank Template edit background warna sesuai keinginan dan 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

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<style class="Mys2010-styles"> 
body {
  background-color: #7f7f7f;   
}
body {color:#7f7f7f;height:10%;overflow:hidden;}} 
#text {   
 text-align: center; 
 margin-top:-120px;
}
h1 {
 font-weight: 200;
color: #adadad; 
margin-top:-40px;
font-weight: 200;
font-size:30px;
text-shadow: 3px 3px 6px #222;
}
h2 {
  font-weight: 200;
color: #000;
}
h5 {
  font-weight: 200;
color: #000;
}
h6 {
  font-size:23px;
color: #444;
font-family: 'agency fb', cursive;
text-shadow: 3px 3px 6px #222;
box-shadow: 0px 20px 20px 20px rgba(0, 0, 0, 0.1);
}
#sule {
  bottom:84px;
  right: 24px;
}
@media screen and (max-width: 600px) {
  body {
  margin-bottom: 96px;
}}</style>

<div class="container">
  <h1 class="center-align" id="head">Hover menu upwards</h1>
   <div class="row">
     <div class="col s12 m6">
       <div class="card hoverable" id="personal">
         <div class="card-image">
<img src="https://sites.google.com/site/sulenices/gallery/Photo6-M2010.jpg">
<span class="card-title">
<span style="color:#808;">My Menu</span>
</div>
  <div class="card-content">
   <div style="background-color: rgba(157, 0, 255, 0.3);" id="contact-image">
<br>
    
     <ul class="fa-ul">
 <h6> 1-a. <a href="https://Link Judul"title="M2010"> Select :</a> 
 <h6> 02. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 2 </a> 
 <h6> 03. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 3 </a> 
 <h6> 04. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 4 </a>
 <h6> 05. <a href="https://Link Judul"target="_blank"title="M2010"> Menu 5 </a> 
  <br>
<br>
</div>
   </div>
      
<div class="card-action center-align">
<font face="agency fb"size="6" color="#6ba9d7">keep in touch</font>
 <br>  
  <br>
    <br>
<a href="https://www.facebook.com/Myscript2010/"target="_blank" title="M2010">
<i aria-hidden="true" class="fa fa-facebook fa-2x"></i></a>

<a href="https://plus.google.com/u/0/101254379497511200564/posts"target="_blank" title="M2010">
<i aria-hidden="true"class="fa fa-google-plus fa-2x"></i></a>

<a href="https://twitter.com/myscript2010s"target="_blank" title="M2010">
<i aria-hidden="true"class="fa fa-twitter fa-2x"></i></a> 

<a href="https://www.instagram.com/myscript2010/"target="_blank" title="M2010">
<i aria-hidden="true"class="fa fa-instagram fa-2x"></i></a> 

<a href="https://id.pinterest.com/myscript2010/bloggers/"target="_blank" title="M2010">
<i aria-hidden="true"class="fa fa-pinterest fa-2x"></i></a> 
    </div>
  </div>
</div>

<div class="col s6 m3">
  <div class="card hoverable principle">
     <div class="card-image waves-effect waves-block waves-light">
       <img class="activator" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV7R8fyI8R8WuGJMAI4vEludKPu7ZLhdAmkxkKc5lqmvF5NHCj00E5WjY2g_68A56ys3Wb-4anWL2P2g7LdwxoHQSAYwVPU1vatgwOQaqJPlJTAhuXpvvSAEjJeyq4d-67EilP22D32Hf2/s1600/Photo1-M2010.jpg">
</div>
   <div class="card-content">
      <span class="card-title activator grey-text text-darken-4">Open Menu</span>
        </div>
           <div class="card-reveal">
<div style="background-color:rgba(255, 255, 0, 0.3);" id="contact-image">
 <br><h6 style="font-size:24px; font-family:agency fb;color:#000;">&#9825; Choose :<br>
 <h6> 01..<a href="https://Link Judul"target="_blank" title="M2010"> Menu 1 </a> 
 <h6> 02. <a href="https://Link Judul"target="_blank" title="M2010"> Menu 2 </a> 
 <h6> 03. <a href="https://Link Judul"target="_blank" title="M2010"> Menu 3 </a> 
 <h6> 04. <a href="https://Link Judul"target="_blank" title="M2010"> Menu 4 </a>
 <h6> 05. <a href="https://Link Judul"target="_blank" title="M2010"> Menu 5 </a>
 <br><br> 
<span class="card-title black-text text-darken-4"title="Close">Tutup<i class="material-icons right">tv</i></span></span>
       </div>
     </div> 
   </div>
</div>
 
<div class="col s6 m3">
   <div class="card hoverable principle">
     <div class="card-image waves-effect waves-block waves-light">
       <img class="activator" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiywEJ2dDaraSw_eRZERM8a1YczK5e0-MdiJSXxlSPevWyFh659Rye_8DGuMHEqq2Q89mHG8lo0NtiZvnCICEXhfwGCHX9hAWo8__WDCaUR1H0LS4ne0RHkTetjZwNE2pSxGBLJEo0xAX6c/s1600/Photo2-M2010.jpg">
                    </div>
                    <div class="card-content">
      <span class="card-title activator grey-text text-darken-4">Open Menu</span>
        </div>
           <div class="card-reveal">
 <div style="background-color: rgba(255, 153, 0, 1);"id="contact-image">
 <br><h6 style="font-size:24px; font-family:agency fb;color:#000;">&#9825; Choose :<br>
 <h6> 01. <a href="https://Link Judul"target="_blank" title="M2010">  Menu 1 </a> 
 <h6> 02. <a href="https://Link Judul"target="_blank" title="M2010"> Menu 2 </a> 
 <h6> 03. <a href="https://Link Judul"target="_blank" title="M2010"> Menu 3 </a> 
 <h6> 04. <a href="https://Link Judul"target="_blank" title="M2010"> Menu 4 </a>
 <h6> 05. <a href="https://Link Judul"target="_blank" title="M2010"> Menu 5 </a>
 <br><br>
<span class="card-title black-text text-darken-4"title="Close">Tutup<i class="material-icons right">tv</i></span>
       </div>
     </div> 
   </div>
</div>

<div class="col s6 m3">
   <div class="card hoverable principle">
     <div class="card-image waves-effect waves-block waves-light">
       <img class="activator" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOEZ7P77eTDJhjyQ_FKlEsZ86XucqS5dfCBWHYwOo-xbLngknjAupIsTtstnZnfN2bLW1bx9DCTlFXyaEctCay2BQgSzDOVcIW2YCGetIZlhs_cbC78Bcyn-k57uIuGxLHA1pB3KL_Eig_/s1600/Photo3-M2010.jpg">
                    </div>
                    <div class="card-content">
      <span class="card-title activator grey-text text-darken-4">Open Menu</span>
        </div>
           <div class="card-reveal">
 <div style="background-color:#d9dbe3;"id="contact-image">
 <br><h6 style="font-size:24px; font-family:agency fb;color:#000;">&#9825; Choose :<br>
 <h6> 01. <a href="https://Link Judul"target="_blank" title="M2010">  Menu 1 </a> 
 <h6> 02. <a href="https://Link Judul"target="_blank" title="M2010"> Menu 2 </a> 
 <h6> 03. <a href="https://Link Judul"target="_blank" title="M2010"> Menu 3 </a> 
 <h6> 04. <a href="https://Link Judul"target="_blank" title="M2010"> Menu 4 </a>
 <h6> 05. <a href="https://Link Judul"target="_blank" title="M2010"> Menu 5 </a>
 <br><br>
<span class="card-title black-text text-darken-4"title="Close">Tutup<i class="material-icons right">tv</i></span>
       </div>
     </div> 
   </div>
</div>

<div class="col s6 m3">
  <div class="card hoverable principle">
    <div class="card-image waves-effect waves-block waves-light">
       <img class="activator" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdvd6O1peUTPD9-pjExksAAvquvB59PJhj1fZJahiWYYwsi1mKLkFg0YC5ajOZr97vBcuSW4Z9YB59ZaQoX0ojLR2rVg18LGWO4UDOF5se2kQ74AUK_NOLjghBSRoQ0Gg0gz-G3vnxBg1F/s1600/Photo4-M2010.jpg">
                    </div>
                    <div class="card-content">    
      <span class="card-title activator grey-text text-darken-4">Open Menu</span>
        </div>
           <div class="card-reveal">
 <div style="background-color:#b3b7c7;"id="contact-image">
 <br><h6 style="font-size:24px; font-family:agency fb;color:#000;">&#9825; Choose :<br>
 <h6> 01. <a href="https://Link Judul"target="_blank" title="M2010">  Menu 1 </a> 
 <h6> 02. <a href="https://Link Judul"target="_blank" title="M2010"> Menu 2 </a> 
 <h6> 03. <a href="https://Link Judul"target="_blank" title="M2010"> Menu 3 </a> 
 <h6> 04. <a href="https://Link Judul"target="_blank" title="M2010"> Menu 4 </a>
 <h6> 05. <a href="https://Link Judul"target="_blank" title="M2010"> Menu 5 </a>
 <br><br>
<span class="card-title black-text text-darken-4"title="Close">Tutup<i class="material-icons right">tv</i></span>
       </div>
     </div> 
   </div>
</div>

<!:-Pojok->
<div class="fixed-action-btn click-to-toggle"id="sule">
<a class="btn-floating btn-large teal darken-1">
<i class="material-icons"title="Intimacy">people_outline</i>
</a>
  <ul>  
     <li><a class="btn-floating red darken-1" id="sulepersonal">
<i class="material-icons"title="Romantic">local_bar</i></a></li>
     <li><a class="btn-floating amber darken-1" id="sulework">
<i class="material-icons"title="Dating">spa</i></a></li>
 <li><a class="btn-floating silver darken-1" id="sulework">
<i class="material-icons"title="In Love">favorite</i></a></li>
     </ul>
</div>

<script src="//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.0/jquery.scrollTo.min.js'></script>

    <script>
    $(document).ready(function() {
     $("#personal").addClass("animated slideInUp");
     $(".principle").addClass("animated slideInUp");
     $(".work").addClass("animated slideInUp");
     $('.parallax').parallax();
});
$.extend($.scrollTo.defaults, {
     duration: 800,
});
$('#sulepersonal').click(function() {
     $.scrollTo('#head');
});
$('#sulework').click(function() {
     $.scrollTo('#work');
}); 
  </script>

Code by. Allsources
Design Code is Edited by. M-2010

DEMOSHOW

* If you want to directly copy and paste you canDownload  Hover menu upwards

Category:

Mys2010 on Codepen

Hover menu upwards

POPULAR

Blog Archive