Cara menampilkan sub menu di web - design web


Assalamualikum wr.wb
Kali ini kita akan membahas cara membuat tampilan sub menu di desain web
Dalam pembuatan komentar pada design web,kita akan menggunakan tanda <!--- ---> i dalam setiap  pembuatan komentar  
Kali ini kita akan mendesain web tentang menampilkan sub menu di web kita
1.Buat index.html
<html><!--komentar. ini harus ada sewaktu kita membuat pemograman web -->

<head><!—ini merupakan bagian kepala desain web yang di buat -->

<title>latihan menu</title><!--berfungsi untuk menjadi judul di bagian bar web yang di buat-->

<link rel="stylesheet" type="text/css" href="slamet.css">

</head><!--berfungsi mengeksekusi kepala yang kita buat tadi-->

<button class="mainmenubtn">main menu</button>

<div class="dropdown-chile"><--menampilkan blok sub daftar menu ke bawah-->

<a href=" http://aldisaputra99.blogspot.co.id/2018/05/cara-instalasi-java-di-windows.html ">menu pertama</a><--merupakan sub menu dan langsung menujul ink-->

<a href=" http://aldisaputra99.blogspot.co.id/2018/04/cara-mengurutkan-huruf-di-bahasa-c.html”> menu kedua</a><--merupakan sub menu dan langsung menujul ink-->

<a href=" http://aldisaputra99.blogspot.co.id/2017/12/fungsi-multimeter-dan-kesimpulannya.html “>menu ketiga</a><--merupakan sub menu dan langsung menujul ink-->

<a href="https://www.youtube.com/channel/UCRFt_tjV4De7xpP7s-4qbOA?view_as=subscriber/">menu keempat</a><!--- fungsi dari href tersebut adalah supaya untuk menampilkan isi dari main menu tersebut tanpa di tekan-->

</div><!-- karna diatas tadi dibuka dengan div maka harus ditutup kembali dengan /div-->
</div>
</head>

====================================================================================
2.pembuatan  css
<!-- sekarang kita buat warna dari bg color tersebut-->
 .mainmenubtn{
backrground-color: red; <!--kita membuat warna background menjadi warna merah-->
color: white;
border:none;
cursor:pointer;
padding:20px;
margin:20px;
}
.mainmenubtn:hover {
background-color: red;
}<!---berfungsi  ketika kursor berada di sub menu,maka background warna teks berubah -->
.dropdown {
position:relatif;
display:inline-block;
} <!-- ini maksudnya main menu posisinya di garis awal-->
 .dropdown-chile {<!—isi sub menu-->
display: none;
background-color:black;
min-width: 200px
}
.dropdown-chile a { <!--menu menuju kebawah href-->
color: white;
padding: 20px;
text-decoration:none;
display:black:
}
a:hover { <!--tampilan akan mengikuti sehingga terjadi perubahaan warna -->
backgroun-color: black;
}
.dropdown:hover .dropdown-chile {
display: black;
}

Selesai
Itulah cara membuat sub menu dalam desain web…
Assalumalaikum wr.wb

Komentar

Posting Komentar

Postingan populer dari blog ini

Fungsi multimeter dan kesimpulannya

Assalamualikum wr.wb Selamat datang diblog saya,disini saya akan membahas tentang fungsi dan kegunaan multimeter serta kesimpulan praktek kami yang kami lakukan Fungsi dan kegunaan Multimeter: Dalam pekerjaan elektronik maupun listrik, pengukuran tegangan, arus dan tahanan merupakan hal pertaman dan utama yang harus dilakukan. Peralatan yang digunakan untuk mengukur besaran ini, dulunya berbeda-beda. Ada peralatan seperti: Voltmeter sebagai alat ukur tegangan, Ammeter/Ampermeter yang digunakan untuk mengukur arus, danOhmmeter yang berfungsi untuk mengukur tahanan/resistansi. Sekarang, ketiga alat ukur yang diatas sudah dikombinasikan dan menjadi satu alat ukur saja yang dikenal dengan namaMultimeter/Multitester. Oleh sebab itu,dalam pengoperasiannya dapat dilakukan dengan memilih besaran yang akan diukur menggunakan saklar putar. Untuk melakukan pengukuran tahanan, dapat dilakukan secara langsung dimana sebuah resistor diukur dengan memilih mode pengukuran Ohmmeter (Ω). Pada...
Baca selengkapnya

Cara mengurutkan huruf di bahasa C

Assalamualaikum wr.wb :) Hallo kwn2,kali ini ane akan membagikan cara mengurutkan huruf di bahasa C Ok,,lngsung saja kita copy aja kodingannya :v #include <stdlib.h> #include <stdio.h> #include <string.h> static int myCompare (const void * a, const void * b) {     return strcmp (*(const char **) a, *(const char **) b); } void sort(const char *arr[], int n) {     qsort (arr, n, sizeof (const char *), myCompare); } int main () {     const char *arr[] = {"P","O","L","I","T","E","K","N","I","K","K","A","M","P","A","R"};     int n = sizeof(arr)/sizeof(arr[0]);     int i;     printf("ini data awal\n");     for (i = 0; i < n; i++)         printf("%d: %s \n", i, arr[i]);     sort(arr, n);     printf("\nini setelah diurut\n");     for (i = 0; i < n; i++...
Baca selengkapnya

OPERATOR UNARY

Gambar
Assalamualaikum wr.wb Selamat datang di blog saya..kali ini kita akan membahas tentang… OPERATOR UNARY Apa itu unary operator? Operator yang beroperasi pada operan tunggal (yaitu melakukan operasi melalui operator ini, kita hanya memerlukan satu operan). Daftar Operator Unary dalam bahasa pemrograman C.  Berikut ini adalah operator unary dalam bahasa pemrograman C dan C ++ Contoh operasi Tanda ++ atau -- sesudah dan sebelum variabel memberikan pengaruh yang berbeda jika operator ini digunakan pada proses assigment variabel lain. Contoh unary (+) operator disini, saya menugaskan +4 ke variabel x dan hasilnya adalah 4. Contoh unary (-) operator Di sini, saya menugaskan 10 ke variabel x dan -20 ke variabel y, ketika kami mencetak nilai kedua variabel menggunakan operator Unary minus, hasilnya adalah -x = 10 dan -y = 20 .
Baca selengkapnya