Membuat Simple Drop Down Menu dengan CSS -Assalamu Alaikum WR.WB Hallo sahabat TrikMITOS-blog seputar informasi, islami,kesehatan, kecantikan Tips dan Trik android kord gitar dll, Pada Artikel yang anda baca kali ini dengan judul Membuat Simple Drop Down Menu dengan CSS, saya telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya, yang mungkin bermanfaat buat anda. mudah-mudahan isi postingan Artikel Blogger Tutorials, Artikel Modifikasi Tab Menu, Artikel Tutorial Blogger, Artikel Widget, yang saya tulis ini dapat anda pahami, karna mungkin dari beberapa pengunjung bahasa atau tulisan saya ini agak sulit di mengerti...hehehe benarkah??!!!. baiklah, tanpa panjang lebar dan bertele-tele lagi selamat membaca, jangan lupa baca juga artikel lainnya, karena masih banyak artkel yang menarik lainnya yang menurut saya pribadi sangat bermanfaat

Judul : Membuat Simple Drop Down Menu dengan CSS
link : Membuat Simple Drop Down Menu dengan CSS
Gambar dibawah ini

Membuat Simple Drop Down Menu dengan CSS

Alhamdulillah bisa kembali online dan berbagi tips dan trik blogging lagi kepada teman-teman setelah beberapa pekan fakum. Tentu kefakuman ini bukan karena banyaknya kesibukan offline yang menyita waktu tapi tidak lebih karena keterbatasan dan sedikit problem pada sarana yang selama ini setia membantu aktifitas online saya.

Melalui kesempatan ini pula saya memohon maaf kepada teman-teman blogger dan pengunjung setia blog ini atas segala hak yang tidak bisa saya penuhi selama masa offline, seperti saling kunjung atau blogwalking ke 'rumah maya' teman-teman.

Untuk postingan perdana setelah masa fakum kemarin, insyaAllah kali ini saya hanya ingin mengetengahkan tutorial blogger yang mudah, kalau sebelumnya saya pernah posting tutorial cara membuat multi level drop down menu dengan JQuery maka postingan kali ini bagaimana membuat simple drop down menu dengan CSS.

Langsung pada tutorial

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

2. Tambahkan kode CSS berikut diatas tag  ]]></b:skin>:

#pad {height:100px;}
#menuPositioner {width:100%; position:relative; float:left; top:-40px; margin-bottom:-40px; }

#menuHolder {position:relative; float:left; left:50%;}

#menu,
#menu ul {padding:0; margin:0; list-style:none; font: 12px arial, verdana, sans-serif; background:url(http://sites.google.com/site/amatullah83/background/trans.gif); position:relative; z-index:100;}
#menu {height:40px; float:left; padding:0; background:#4b4d3f; position:relative; right:50%;}
#menu ul {position:absolute; left:-9999px; top:-9999px;}

#menu table {border-collapse:collapse; margin:-1px; padding:0; width:0; height:0;}
#menu li {float:left;}

#menu li a {display:block; float:left; color:#fff; height:40px; padding:0 20px 0 0; line-height:38px; text-decoration:none; background:url(http://sites.google.com/site/amatullah83/background/button1a.gif) no-repeat right top;}
#menu li a.sub {background:url(http://sites.google.com/site/amatullah83/background/button3a.gif) no-repeat right top;}
#menu li a b {display:block; float:left; height:40px; background:url(http://sites.google.com/site/amatullah83/background/button1.gif) left top; padding:0 0 0 20px; cursor:pointer;}

#menu li:hover {position:relative; z-index:100;}
#menu a:hover {position:relative; z-index:100; color:#fc0;}
#menu a.sub:hover {background:url(http://sites.google.com/site/amatullah83/background/button3a.gif) no-repeat right top;}

#menu li:hover > a {color:#fc0;}
#menu li:hover > a.sub {background:url(http://sites.google.com/site/amatullah83/background/button3.gif) no-repeat right top;}

#menu :hover ul {left:0; top:40px; z-index:300; width:130px; padding-top:4px; background:url(http://sites.google.com/site/amatullah83/background/trans.gif);}
#menu :hover ul li a {height:25px; width:120px; padding:0 0 0 10px; line-height:25px; background:#546775; color:#fff; border-bottom:1px solid #a3b6c4; font-size:11px;}
#menu :hover ul li a.fly {background:#546775 url(http://sites.google.com/site/amatullah83/background/fly.gif) no-repeat right center;}

#menu :hover ul li a:hover {color:#fc0;}
#menu :hover ul li a:hover.fly {background:#546775 url(http://sites.google.com/site/amatullah83/background/fly-over.gif) no-repeat right center;}
#menu :hover ul li:hover > a {color:#fc0;}
#menu :hover ul li:hover > a.fly {background:#546775 url(http://sites.google.com/site/amatullah83/background/fly-over.gif) no-repeat right center;}

#menu :hover ul ul {position:absolute; left:-9999px; top:-9999px;}

#menu :hover ul :hover ul {left:117px; top:0; padding:0;}
#menu :hover ul :hover ul li a {background:#a3b6c4; color:#000; border-bottom:1px solid #546775; font-size:11px;}
#menu :hover ul :hover ul li a:hover {color:#fff;}

3. Tambahkan kode HTML berikut dibawah atau diatas <div id='header-wrapper'> atau bisa juga sobat tambahkan pada bagian elemen halaman sebagai widget

<div id="menuPositioner">
<div id="menuHolder">
<ul id="menu">
    <li><a href="index.html"><b>Home</b></a></li>
    <li><a href="single.html"><b>Single Level</b></a></li>
    <li class="current"><a class="sub" href="dropdown.html"><b>Dropdown</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="sub1">
            <li><a class="fly" href="#url">Dropdown one<!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="fly1">
                    <li><a href="#url">Dropdown 1.1</a></li>
                    <li><a href="#url">Dropdown 1.2</a></li>
                    <li><a href="#url">Dropdown 1.3</a></li>
                    <li><a href="#url">Dropdown 1.4</a></li>
                    <li><a href="#url">Dropdown 1.5</a></li>
                    <li><a href="#url">Dropdown 1.6</a></li>
                </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li class="currentsub"><a class="fly" href="#url">Dropdown two<!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="fly2">
                    <li><a href="#url">Dropdown 2.1</a></li>
                    <li><a href="#url">Dropdown 2.2</a></li>
                    <li class="currentfly"><a href="#url">Dropdown 2.3</a></li>
                    <li><a href="#url">Dropdown 2.4</a></li>
                    <li><a href="#url">Dropdown 2.5</a></li>
                </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li><a href="#url">Dropdown three</a></li>
            <li><a href="#url">Dropdown four</a></li>
            <li><a class="fly" href="#url">Dropdown five<!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="fly3">
                    <li><a href="#url">Dropdown 5.1</a></li>
                    <li><a href="#url">Dropdown 2.2</a></li>
                    <li><a href=http://amatullah83.blogspot.com>Dropdown 3.3</a></li>
                </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
        </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a class="sub" href="dropline.html"><b>Dropline</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="sub2">
            <li><a href=http://amatullah83.blogspot.com>Dropline one</a></li>
            <li><a href="#url">Dropline two</a></li>
            <li><a href="#url">Dropline three</a></li>
            <li><a href="#url">Dropline four</a></li>
            <li><a href="#url">Dropline five</a></li>
            <li><a href="#url">Dropline six</a></li>
        </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a class="sub" href="flyout.html"><b>Flyout</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="sub3">
            <li><a href="#url">Flyout one</a></li>
            <li><a href="#url">Flyout two</a></li>
            <li><a href="#url">Flyout three</a></li>
            <li><a href="#url">Flyout four</a></li>
        </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li id="support"><a href="support.html"><b>Support</b></a></li>
    <li id="contact"><a href="contact.html"><b>Contact</b></a></li>
</ul>
</div>
</div>

4. Simpan template. Hasil dari tutorial membuat simple drop down menu dengan CSS ini seperti screnshot diatas atau lihat live demo disini.

Mudah bukan? Semoga bermanfaat.

Source from CSSMenu.co.uk

Demikianlah Artikel Membuat Simple Drop Down Menu dengan CSS

Sekianlah artikel Membuat Simple Drop Down Menu dengan CSS kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya jangan lupa tinggalkan komentar anda dan share yang banyak....heheheh.

Anda sekarang membaca artikel Membuat Simple Drop Down Menu dengan CSS dengan alamat link https://trikmitos.blogspot.com/2010/04/membuat-simple-drop-down-menu-dengan-css.html