Beranda
JavaScript

Membuat Efek Underline Menu Tabs Dengan jQuery

Halo sobat, pada kesempatan kali ini codepelajar akan memberikan cara Membuat Efek Underline Menu Tabs Dengan jQuery dan bahan yang eprlu sobat siapkan terlebih dahulu hanyalah text editor untuk ngoding agar tidak salah saat pengerjaan.

Cara ini sangat mudah dan ringan bagi website sobat nantinya juga dapat di edit nantinya sesuai kemauan dan yang jelas ini aman untuk website.

Membuat Efek Underline Menu Tabs Dengan jQuery

1. Langkah pertama buat file yang berisi HTML dengan kode seperti berikut:

<body>
<div id="bgbdy">
	<img src="images/background.jpg">
</div>
<div class="outer">
<h1>Membuat Efek Underlined Pada Tabs</h1>

	<div class="tab">
        <ul>
            <li>
                <a class="tab-active" data-index="0" href="#">Tabs I</a>
            </li>
            <li>
                <a data-index="1" href="#">Tabs II</a>
            </li>
            <li>
                <a data-index="2" href="#">Tabs III</a>
            </li>
            <li>
                <a data-index="3" href="#">Tabs IV</a>
            </li>
        </ul>


	<div class="content">
		<div class="content-active">
			<h2>Framework Ionic</h2>
			<p>Ionic Framework merupakan sebuah framework open source yang menyeidakan UI Toolkit untuk membuat aplikasi web PWA, dekstop, mobile (Android dan iOS) dengan menggunakan bahasa web seperti HTML, CSS, dan Javascript.</p>
			<img src="images/Ionic.png">
		</div>
        <div>
        	<h2>Flutter</h2>
			<p>Flutter adalah sebuah framework open-source yang dikembangkan oleh Google untuk membangun antarmuka (user interface/UI) aplikasi Android dan iOS.</p>
			<img src="images/flutter.jpeg">
		</div>
        <div>
        	<h2>React</h2>
			<p>React Native adalah salah satu framework javascript yang bisa digunakan untuk mengembangkan aplikasi mobile. Dengan React Native kita akan merasakan sensasi membuat aplikasi yang sangat mendekati bahkan tidak dapat dibedakan dengan  aplikasi native.</p>
			<img src="images/react.png">
		</div>
        <div>
        	<h2>Swift</h2>
			<p>Swift adalah bahasa pemrograman yang digunakan untuk membangun aplikasi untuk produk apple seperti iOS, OSX dan lain sebagainya.</p>
			<img src="images/swift.jpg">
		</div>
        
	</div>
    
</div>

2. Pada code diatas codepelajar menambahkan beberapa gambar untuk content tampilannya, jadi sobat hanya perlu focus pada

• setelah class=tab yang berisi list menu tabs nya.

• untuk class=content isi content dari setiap menu nya

3. Lalu selanjutnya jangan lupa sebuah style CSS agar tampilan terlihat rapih dan menarik silahkan ketikkan code CSS berikut ini:

body{background:#8b5824}

#bgbdy{ width:100%;	height:99.3%;	position:absolute;	top:0px;	left:0px;	}
#bgbdy img{	width:100%;	height:100%;	}

.outer{	width:90%; height:620px; position:relative; background:rgba(255,255,255,0.6); margin:0px auto;}

h1{text-align:center; padding:0px; font-size:38px; padding:20px; color:#123f0f; }

.tab{
    width:754px;
    box-sizing: border-box;
    border: 1px solid #dddddd;
    background-color: #fff;
    font: bold 13px sans-serif;
    margin: 0px auto;
    text-align: center;
    padding: 30px;
}

.tab ul{
    list-style: none;
    text-align: left;
    margin: 0px;
    padding: 0px;
    text-align: center;
}

.tab ul li{
    display: inline-block;
}

.tab ul li a{
    display: block;
    text-decoration: none;
    color:  #7f888d;
    font-size: 14px;
    margin: 0px 20px 15px 0px;
    padding-bottom: 5px;
}

.tab ul li a.tab-active {
    color: #656a6d;
    border-bottom: 2px solid #031194;
}

.tab .content{
    overflow: hidden;
    font-weight: normal;
}

.tab .content div{
    display: none;
}

.tab .content div.content-active{
    display: block;
}

.tab .content div p{
    color: #565a5c;
    line-height: 1.5;
    text-align: left;
    margin: 5px 0px 20px;
}

.tab .content div img{
    max-width: 100%;
	height:250px;
}

4. Selanjutnya bagian yang terpenting adalah script dari jquery dengan kode di bawah ini:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	var widget = $('.tab');
    var tabs = widget.find('ul a'),
    content = widget.find('.content > div');
    tabs.on('click', function (e) {
		e.preventDefault();
		var index = $(this).data('index');
        tabs.removeClass('tab-active');
        content.removeClass('content-active');
	    $(this).addClass('tab-active');
        content.eq(index).addClass('content-active');
		});
});
</script>

Jadi saat menu tabs di  tekan maka menu tersebut akan dianggap aktif, sehingga akan menampilkan content sesuai urutan index dan ada sebuah efek underline pada tabs yang aktif.

Penutup

Jadi itu saja yang daoat codepelajar sampaikan semoga dengan artikel ini website sobat lebih menarik perhatian dan tentunya SEO bagi mata google.