Skip to main content

Cara membuat Menu Horizontal dengn CSS



Cara Membuat Menu Horizontal
Bismillah... setelah beberapa hari saya absen dari dunia online, kini saya akan kembali lagi share tentang tutorial blog, css, Design, template dll.., maklum banyak pekerjaan offline yang harus di kerjakan. he he. sekarang saya akan sedikit membahas tentang CSS, yaitu cara membuat menu/navigasi Horizontal dengan CSS, kenapa menggunkan CSS?? karena sekarang sudah bnyak sekali cara membuat menu dengan berbagi cara misalkan dengan JQuery dan lain sebaginya,



Dasar Pembuatan Menu Horizontal dengan CSS



Oke sekarang saya akan mulai dulu dari dasar cara membuat menu dengan menggunkan CSS, untuk membuat menu navigasi caranya mudah sobat tinggal mengahaplkan beberapa tag diantaranya tag ul dan tag li, oke sekarang kita langusung saja yu, pertama sobat buat script menggunkan tag ul dan li contonya penulisannya seperti di bawah
<ul></ul>
<li></li>
  • <ul>: Adalah tag pembuka yang kepanjangannya Unordered List
  • </ul>: Adalah tag penutup dari dari tag ul
  • <li> : Adalah tag pembuka yang kepanjangannya List Item
  • </li>: Adalah tag penutup dari dari tag ul

Cara penulisannya tag li harus selalu di dalam tag ul untuk contoh di bawah
<ul>
<li>text/images/etc</li>
<li>text/images/etc</li>
</ul>

Cara Membuat Menu Horizontal dengan CSS


Oke mungkin itu seputar tag ul dan tag li, sekarang kita lanjut ke cara membuat menu horizontal pertama sobat buat tag seperti di bawah


<ul id="menu">
    <li><a href="#" title="Home">Home</a></li>
    <li><a href="#" title="Products">Products</a></li>
    <li><a href="#" title="Services">Services</a></li>
    <li><a href="#" title="Support">Support</a></li>
    <li><a href="#" title="FAQ">FAQ</a></li>
</ul>
Setelah itu sobat beri CSS di bawah ini

Kode CSS Menu Horizontal 
<style type="text/css">
    #menu {
    background: #333;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
#menu li {
    float: left;
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}
#menu a {
    background: #333 ;
    color: #ccc;
    display: block;
    float: left;
    margin: 0;
    padding: 8px 12px;
    text-decoration: none;
}
#menu a:hover {
    background: #2580a2 ;
    color: #fff;
    padding-bottom: 8px;
</style>
Silahkan sobat sesuaikan backgroun warnanya seseuai dengan style menu yang sobat mau, Oke sobat mungkin itu sedikit tutorial Cara membuat menu Horizontal dengan CSS semoga bermanfaat.. Good Luck Happi Blogging


Baca Juga :

Comments

Popular posts from this blog

Lirik Indal Faji kuntu usolli

Lirik lagu Indal Fajri ***
Indal fajri
kuntu usolli
Usolli lillahi ta'ala
Adzkuru syauqon
Ismallahi
hubban ikroman ijlala 2X

subhanallaah
manrofaassama
waahsanal bina
subhanallah

subhannalah
faahatidzuhur
biazmalil 'utur
subhanallah

subhanallah
manzada bil hawa
antamuhu jawa
subhanallah

subahanllah
maasmalasuhun
minhosmihatakun
subhanallah

allah allah ....ya allah .....ya allah .....ya allah


Indal fajri
kuntu usolli
Usolli lillahi ta'ala
Adzkuru syauqon
Ismallahi
hubban ikroman ijlala 2X

subhanallah
kawwanal insan 'allamal bayan subhanallah

subhanallah
yaman wahab dalluh
 hatta nagtu wanaruh
 subhanallah

subhanallah
wal aqla wal janan
wal hubba wal hanan
subhanallah

subhanallah
hamdan syukron lillah
kullu rojabillah
subhanallah

allah.. ya allah... ya allah... ya allah


Indal fajri
kuntu usolli
Usolli lillahi ta'ala
Adzkuru syauqon
Ismallahi
hubban ikroman ijlala 2X

Tahapan alur novel, cerpen dan drama