Cara Membuat According Dengan CSS dan JQuery

Baca Juga

According Menu

Bismillah.... di hari yang cerah ini semoga sobat masih semangat dalam dunia blog dan masih ingin berkreasi di dunia online via blog baik menggunakan CMS Blogger ataupun CMS WordPress atau CMS yang lainnya. pada postingan ini saya akan sedikit share cara membuat according dengan menggunakan CSS dan JavaScript JQuery.

Untuk membuat according sekarang ini tidak terlalu sulit karena sobat tinggal contek aja kode kodenya dari blog/web orang lain dan sobat tinggal terapkan di blog kita, bukan ngajarin yang tidak benar tapi daripada kita tidak berkreasi dan tidak bergerak sama sekali he he,mendingan kita ngembangin yang sudah ada, karena untuk berkreasi itu emang cukup sulit dan diperlukan skil yang tinggi.

Oke daripada bicara kesana kemari, mendingan kita langsung ke cara membuat Menu According, untuk membuat menu ini yang diperlukan adalah 

• JavaScript Jquery silahkan sobat kunjungi situs Jquery nya di alamat http://jquery.com/ 
• CSS untuk mendesain tampilan Menu According
• Terakhir adalah Script HTML

Terus seperti apa Menu According itu? saya kuang paham dan kurang tau definisi according itu seperti apa, jika sobat penasaran dengan arti dan makna According silahkan sobat cari di mesin pencari misalkan Google,Yahoo,Bing, dan lainnya.

Sekarang kita lanjut saja ke TKP jika sobat tertarik dengan menu according (klik untuk melihat contoh  According) ini, silahkan sobat ikuti dan bisa di copy paste, he he.

Script CSS According

<style type='text/css'>
.container {
    width: 500px;
    margin: 0 auto;
}
h1 {
    font: 4em normal Georgia, &#39;Times New Roman&#39;, Times, serif;
    text-align:center;
    padding: 20px 0;
    color: #aaa;
}
h1 small{
    font: 0.3em normal Verdana, Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    letter-spacing: 0.5em;
    display: block;}
h2.acc_trigger {
    padding: 0;    margin: 0 0 5px 0;
    height: 46px;    line-height: 46px;
    width: 500px;
    font-size: 2em;
    font-weight: normal;
    float: left;
background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
background: -moz-linear-gradient(top, #c9151b, #a11115);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#c9151b&#39;, endColorstr=&#39;#a11115&#39;);
cursor: pointer;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
h2.acc_trigger a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 0 10px 0 10px;
}
h2.acc_trigger a:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
background: -moz-linear-gradient(top, #c9151b, #a11115);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#c9151b&#39;, endColorstr=&#39;#a11115&#39;);
cursor: pointer;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
h2.active {
color: #de898c;
background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
background: -moz-linear-gradient(top, #aa1317, #ed1c24);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#aa1317&#39;, endColorstr=&#39;#ed1c24&#39;);
cursor: pointer;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.acc_container {
margin: 0 0 5px; padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
color: #d9eef7;
border: solid 1px #0076a3;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#00adee&#39;, endColorstr=&#39;#0078a5&#39;);
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.acc_container .block {
    padding: 20px;
}
.acc_container .block p {
    padding: 5px 0;
    margin: 5px 0;
}
.acc_container h3 {
    font: 1.5em normal Georgia, &quot;Times New Roman&quot;, Times, serif;
    margin: 0 0 10px;
    padding: 0 0 5px 0;
    border-bottom: 1px dashed #ccc;
}
</style> 

JavaScript According

<script type='text/javascript'>
$(document).ready(function(){
   
//Set default open/close settings
$(&#39;.acc_container&#39;).hide(); //Hide/close all containers
$(&#39;.acc_trigger:first&#39;).addClass(&#39;active&#39;).next().show(); //Add &quot;active&quot; class to first trigger, then show/open the immediate next container

//On Click
$(&#39;.acc_trigger&#39;).click(function(){
    if( $(this).next().is(&#39;:hidden&#39;) ) { //If immediate next container is closed...
        $(&#39;.acc_trigger&#39;).removeClass(&#39;active&#39;).next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
        $(this).toggleClass(&#39;active&#39;).next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
    }
    return false; //Prevent the browser jump to the link anchor
});

});
</script>

Terus kita gunakan Script Jquery kita cukup panggil saja dengan secript seperti di bawah

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

Jika sobat sudah punya hosting sendiri silahkan sobat donwload Script Jquery nya di disini dan masukan dalam server hosting sobat.

Langkah terakhir cara penerpan di tag HTML sebagai contoh saya menggunakan 5 tab According 

<div class="container">
    <h2 class="acc_trigger"><a href="#">TAB 1</a></h2>
    <div class="acc_container">
        <div class="block">
            <h3>TAB 1</h3>
            <p>isi Tab 1 </p>
        </div>
    </div>
        <h2 class="acc_trigger"><a href="#">TAB 2</a></h2>
    <div class="acc_container">
        <div class="block">
            <h3>TAB 2</h3>
            <p>isi Tab 2 </p>
        </div>
    </div>
    <h2 class="acc_trigger"><a href="#">TAB 3</a></h2>
    <div class="acc_container">
        <div class="block">
            <h3>TAB 3</h3>
            <p>isi Tab 3 </p>
        </div>
    </div>
    <h2 class="acc_trigger"><a href="#">TAB 4</a></h2>
    <div class="acc_container">
        <div class="block">
            <h3>TAB4</h3>
                <p>isi Tab 4 </p>
        </div>
    </div>
    <h2 class="acc_trigger"><a href="#">TAB 5</a></h2>
    <div class="acc_container">
        <div class="block">
            <h3>TAB5</h3>
                <p>isi Tab 5 </p>
        </div>
    </div>
</div>

Nah munkin itu sedikit info tentang cara membuat menu according jika sobat mau menerapkan dalam blogger sobat tinggal copy Code JavaScriptnya dan Code CSS dan masukan di bawah tag <head> atau di atas tag </head>, terus sobat tinggal sisipkan Code HTML nya di dalam tag <body> atau sobat tinggal masukan di dalam Gadget HTML/JavaScript. Terakhir Good Luck Happy Blogging.