Skip to main content

Cara Membuat MENU DROPDOWN dengan CSS

BLOGGINGPASURUAN kesempatan ini saya hanya ingin mengetengahkan tutorial blogger yang mudah, yaitu tentang cara membuat simple drop down menu dengan CSS.

Langsung saja tutorial :
1. Setelah sig in pada account blogger Anda >>> pada Dasbor >>> Klik Template >>> Edit HTML

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

CSS
#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

HTML
<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>

4. Simpan Template. Hasil dari tutorial membuat simple drop down menu dengan CSS ini seperti screnshot diatas.

Mudah bukan? Jika ada kesulitan silahkan tinggalkan pesan pada kolom komentar. Semoga bermanfaat.

 
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar