Menu


Menu Tab

Pages

Ada beberapa macam CSS Horizontal Menus

Ada beberapa macam
model CSS Horizontal Menus, Fungsinya adalah agar dapat memudahkan pengunjung membaca artikel diarea postingan blog. dan juga dapat meminimalisasikan halaman.
Dengan berbagai macam model kita dapat memilih adanya CSS Horizontal Menus sesuai dengan
desain tampilan blog. Dibawah ini tersedia Code CSS Menus

untuk dijadikan pilihan dan diterapkan kedalam sebuah ruangan gadged
CSS3 Gradient Menu Buttons
CSS3 Shadow Block Menu
Half moon tab menu
CSS3 Semi Opaque Menu 
CSS Tab Menu
CSS Menu fixed header
All Sources Edited by. Myscript2010
Test Script untuk melihat hasil

Memasang Menu CSS 3 Slide Up Tabs

MEMASANG
MENU CSS 3 SLIDE UP TABS
Login ke akun blog klik tata letak dan klik tambah gadged
copy code berikut letakan kedalam gadged tersebut klik simpan selesai
<style>
ul.slideuptabs{
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: left; /* change to "center" or "right" to align differently */
    border-bottom: 10px solid green; /* bottom border */
    background: #ffffff;
    background: -moz-linear-gradient(top,  #ffffff 0%, #d8d8d8 100%); /* gray gradient background */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#d8d8d8));
    background: -webkit-linear-gradient(top,  #ffffff 0%,#d8d8d8 100%);
    background: -o-linear-gradient(top,  #ffffff 0%,#d8d8d8 100%);
    background: -ms-linear-gradient(top,  #ffffff 0%,#d8d8d8 100%);
    background: linear-gradient(to bottom,  #ffffff 0%,#d8d8d8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d8d8d8',GradientType=0 );
}
ul.slideuptabs li{
 display: inline;
}
ul.slideuptabs li:first-of-type{
    margin-left: 10px;
}
ul.slideuptabs a{
    position: relative;
    display: inline-block;
    overflow: hidden;
    color: black; /* font color */
    text-decoration: none;
    padding: 8px 20px;
    font-size: 14px; /* font size */
    font-weight: bold;
    vertical-align: bottom;
    -webkit-transition: color 0.5s; /* transition property and duration */
    -moz-transition: color 0.5s;
    transition: color 0.5s;
}
ul.slideuptabs a span{
    position: relative;
    z-index: 10;
}
ul.slideuptabs a::before{
    content: '';
    color: white;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: green; /* tab background */
    left: 0;
    top: 110%; /* extra 10% is to account for shadow dimension */
    box-shadow: -2px 2px 10px rgba(255,255,255,.5) inset;
    border-radius: 15px 15px 0 0 / 12px 12px; /* oval shaped border for top-left and top-right corners */
    -webkit-transition: top 0.5s; /* transition property and duration */
    -moz-transition: top 0.5s;
    transition: top 0.5s;
}
ul.slideuptabs a:hover{
    color: white; /* hover color */
}
ul.slideuptabs a:hover::before{
    top: 0; /* slide tab up */
}
/****** Responsive Code ******/

@media screen and (max-width: 640px) {
  
    ul.slideuptabs li:first-of-type{
        margin-left: 0;
    }
}

/****** Theme Red ******/

ul.slideuptabs.red{
    border-bottom-color: darkred;
}
ul.slideuptabs.red a::before{
    background: darkred;
}
</style>

<!--[if lte IE 8]>
<style type="text/css">
    ul.slideuptabs a:hover{
        color: black; /* hover color for IE8 where tabs don't slide up */
    }
</style> 
<![endif]-->

<ul class="slideuptabs red">
    <li><a href="http://#/"><span>HOME</span></a></li>
    <li><a href="http://#/"><span>MENU 1</span></a></li>
    <li><a href="http://#/"><span>MENU 2</span></a></li>  
    <li><a href="http://#/"><span>MENU 3</span></a></li>  
    <li><a href="http://#/"><span>MENU 4</span></a></li>  
    <li><a href="http://#/"><span>MENU 5</span></a></li>  
</ul> Penambahan sub menu 
           diletakan diatas tanda </ul>

Penjelasan :
Ganti tanda yang berwarna orange
dengan link dan Judul menu Tambahkan Sub menu jika diperlukan
Editd by. Myscript2010
Sumber by. Dynamic drive

Myscript2010

Home Page
 
 

Copyright@2015

Copyright © Cibeber Cimahi