MENU ACCORDION CSS

Ass Wr-Wb.

Pembahasan kali ini,akan membahas tentang bagaimana cara membuat menu accordion dengan hanya menggunakan CSS dan HTML

Tutor ini sengaja saya buat,untuk adik2 saya yang ada di kampus yang mungkin baru mempelajari atau baru mengenal apa itu Css.untuk mengetahui Fungsi dan defenisi Css situ sendiri anda Bisa membacanya di sini.

Seperti yang sudah kita ketahui Css merupakan style,yang bisa membuat Halaman Web tampil lebih Dinamis.jika di irabatkan sebagai Rumah Css merupakan Cat dari rumah itu sendiri.

Berikut ini Mendemonstrasikan Cara membuat menu Accordion.

Copy Kode CSS dan HTMLyang ada di bawah ini kedalam notepad dan simpan dengan menggunakan Ekstensi .html

<html>

<head>

<title> Belajar Css/menu accordion </title>

<style type="text/css">

#acc{background:#ffffff;font:13px trebuchet ms; line-height:1.2em;padding:10px;margin:0;}

#acc h3{background:-moz-linear-gradient(top,#ccc,#999);padding:5px 10px;margin:0;color:#222; text-shadow:0px 1px 1px #fff; border-bottom:2px solid #444;}

#acc h3 a{color:#555} #acc h3 a:hover{color: red}

#acc .post{background:#fff;color:#000;padding:10px;margin:10px 0px;display:none; border-bottom:2px solid #222;}

#acc :target h3 + .post {display:block;height:150px;overflow:auto;} #acc :target h3 a{color:#aa5500

</head>

</style>

<body>

<div id="acc"> <div id="isi1">

<h3><a href="#isi1"> Judul 1</a></h3> <div class="post"> isi konten anda Disini </div> </div>

<div id="isi2"> <h3><a href="#isi2">Judul 2</a></h3> <div class="post"> isi konten anda Disini </div> </div>

<div id="isi3"> <h3><a href="#isi3">Judul 3</a></h3> <div class="post"> isi konten anda Disini</div> </div> </div>

</body>

</html>

Hasil dari listing Di atas :

Catatan : warna yang saya Beri tanda merah Merupakan Elemen CSS.Untuk tanda yang saya beri warna hijau merupakan Judul Menu accordion,dan yang berwarna biru merupakan isi conten menu accordion anda

Untuk Penjelasan tentang Tag di dalam HTML dan Property pada CSS anda bisa membacanya di TAG HTML Dan Property pada CSS

D-Crow

Cara membuat Menu Accordion Dengan CSS

MENU ACCORDION CSS

Tambahkan Komentar

2 komentar: