Thursday, August 30, 2018

Navigasi Sederhana Menggunakan CSS

Isi html awal :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> Simple Nav </title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <nav>
            <ul>
                <li> <a href="#"> Home </a>
                    <ul>                        
                        <li><a href="#">Home 1</a></li>
                        <li><a href="#">Home 2</a></li>
                    </ul>
                </li>                
                <li><a href="#"> Articles </a></li>
                <li><a href="#"> List </a></li>
                <li><a href="#"> Number </a>
                    <ul>
                        <li><a href="#"> Number 1</a></li>
                        <li><a href="#"> Number 2</a></li>
                    </ul>
                </li>
                <li><a href="#"> Contact Poipo </a></li>
            </ul>
        </nav>
    </body>
</html>

Terus beralih ke style.css yg masih kosong...Tambahkan kode dibawah buat settingan dasar...

1
2
3
4
5
6
7
8
9
nav {
    background-color: rgba(93, 236, 189, 0.6);
    position: relative;
    padding: 45px 0 45px 18px;
}

nav ul {
    list-style: none;
}

Tampilan awal kek gini :
Terus di nav ul kita ilangin margin sama paddingnya, jadinya kek gini :

1
2
3
4
5
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

Okay... terus tambain css buat children pertama dari ul, kyk gini :

1
2
3
nav > ul > li {
    float: left;
}
Terus tambain pseudo kek gini :

1
2
3
4
5
nav ul::after {
    content: '';
    display: block;
    clear: both;
} 

Naah klu diperhatiin semua menunya udah masuk dalam nav element (masuk ke warna cyannya) soalnya udah ditambain block untuk setiap ul.
Siipss...berikutnya kita ke anchor element....

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
nav ul li a {
    display: inline-block;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    width: 125px;
}

nav ul li a:hover {
    background-color: #399939;
}


Naah berikutnya kita target submenunya...

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
nav ul ul {
    display: none;
    position: absolute;
    top: 100%;
    background-color: rgba(0, 102, 102, .7);
}

nav ul li:hover {
    background-color: rgba(0, 102, 102, .7);
}

nav ul li:hover > ul {
    display: block;
}

Hasil :
Naah... sampai sini sebenarnya udaah selseee navigasi css yang sederhana.. :v.. Cuman karena terlalu pendek... baiknya kita tambain submenu ajjah yg akan dilanjutkan di part berikutnya... :-)

Membuat Drag and Drop Angka di Javascript - I

Ookie disini kita setting awal projectnya dulu... Jadi silahkan cari list angka2 dari google, trs tempatin dalam suatu folder, ters buat index.hmtl, style.css, dan script.js... semuanya akan terlihat seperti ini :
Isi index.html seperti ini :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> Drag Drop Angka </title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

    
    <script src="script.js"></script>
    </body>
</html>

Seeepsss... berikutnya kita masukin semua angka-angka kita kedalam file html, contoh 1 biji kek gini propertinya...

1
2
<img draggable="true" id='angka_0a' src="_angka/0a.png" alt="angka_0a"
        style="position: absolute; left: 34px; top: 34px; z-index: 7;" />

Jadi klu dimasukin semua angkanya.. jadinya seperti ini :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    <body>
        <img draggable="true" id='angka_0a' src="_angka/0a.png" alt="angka_0a"
        style="position: absolute; left: 34px; top: 34px; z-index: 7;" />

        <img draggable="true" id='angka_1a' src="_angka/1a.png" alt="angka_1a"
        style="position: absolute; left: 44px; top: 34px; z-index: 7;" />

        <img draggable="true" id='angka_2a' src="_angka/2a.png" alt="angka_2a"
        style="position: absolute; left: 54px; top: 300px; z-index: 7;" />

        <img draggable="true" id='angka_3a' src="_angka/3a.png" alt="angka_3a"
        style="position: absolute; left: 664px; top: 234px; z-index: 7;" />

        <img draggable="true" id='angka_4a' src="_angka/4a.png" alt="angka_4a"
        style="position: absolute; left: 274px; top: 34px; z-index: 7;" />

        <img draggable="true" id='angka_5a' src="_angka/5a.png" alt="angka_5a"
        style="position: absolute; left: 40px; top: 534px; z-index: 7;" />

        <img draggable="true" id='angka_6a' src="_angka/6a.png" alt="angka_6a"
        style="position: absolute; left: 340px; top: 304px; z-index: 7;" />

        <img draggable="true" id='angka_7a' src="_angka/7a.png" alt="angka_7a"
        style="position: absolute; left: 734px; top: 34px; z-index: 7;" />

        <img draggable="true" id='angka_8a' src="_angka/8a.png" alt="angka_8a"
        style="position: absolute; left: 500px; top: 300px; z-index: 7;" />

        <img draggable="true" id='angka_9a' src="_angka/9a.png" alt="angka_9a"
        style="position: absolute; left: 600px; top: 550px; z-index: 7;" />
    
        <script src="script.js"></script>
    </body>


Kalu kita liad disitu ada draggable = "true", itu mskdnya biar tar bisa didrag...berikutnya kita taroin styling cursor move di css kyk gini :

Hasilnya :

(cursor movenya g' bisa diprint screent trnyata.. :D)

Siipsss.... sampai disini dl... berikutnya kita akan beralih kebagian javascriptnya... See yaa in the next post...