notes

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposu

Cara membuat menu horizontal ini diharapkan sobat dapat membuatnya secara mandiri tanpa harus searching sana-sini dan pada akhirnya tidak sesuai dengan harapan. mungkin cara ini adalah cara paling sederhana sehingga bagi para pemula dapat memahami untuk mempelajari cara pembuatannya

Pertama anda buka dokumen HTML atau Notpad untuk menuliskan kerangka dibawah ini

<div class="mental">
    <ul>
        <li><a href="/"​>Home</a></li>
        <li><a href="/">About</a></li>
        <li><a href="/">Category</a></li>
        <li><a href="/">Contact</a></li>
    </ul>
</div>

Perhatikan bahwa tag div diberi class mental, class inilah yang akan kita gunakan saat menulis kode CSS nantinya. Karena struktur menu menggunakan tag <li> maka akan berbentuk daftar list pada browsr, lihat gambar dibawah.

Langkah ini kita baru saja membuat list calon horizontal

Berikutnya kita akan menambahkan CSS rule untuk tag mental, ul dan li agar tersusun horizontal

.mental {
  width:100%;
  height:30px;
  background:orange;
}
.mental ul {
  margin: 0px;
  padding: 0px;}
.mental li {
  color:black;
  float: left;
  list-style: none;
  margin:5px 10px 2px 10px;
  padding: 0px;
  background:orange;}

Pada selector .margin li saya telah menambahkan list-style: none; agar list yang menempel pada li tidak di ikut sertakan, sedangkan penambah float-left dengan tujuan menu ini searah dengan menu induk (lihat gambar dibawah)

Hasil akhir pembuatan menjadi list menjadi horizontal
dengan bantuan CSS

Sampai disini kita telah berhasil menyusun list ini menjadi horizontal. Namun langkah ini belum berakhir sampai disini, bagaimana kita dapat memodifikasi menu horizontal tersebut agar terlihat menarik.

Untuk selanjutnya kita hanya membutuhkan css "a" untuk anchor dengan tujuan menu horizontal ini sedikit terlihat interaktif.

.mental li a {
  display: block;
  color:black;
  text-decoration:none;}
.mental li a:hover {
    color:BlueViolet;
    background:Lime;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;}

Hasil akhir dari penggunaan tag a, a:focus dan a:hover

Sehubung postingan ini hanya Bagaimana cara membuat menu horizontal, Selebihnya anda dapat memvariasikannya kembali dengan border dan warna kesayangan anda. Untuk membuat Submenu horizontal kita hanya memanfaatkan tag ul dan li sebagai acuan, dan tidak lepas dari CSS untuk mengaturnya agar cara kerja submenu tersebut berjalan dengan semestinya.

Dipertemuan berikutnya saya akan share bagaimana cara membuat submenu horizontal untuk menindak lanjuti dipostingan Bagaimana cara membuat menu horizontal ini.