Kumpulan Dropdown Menu tanpa JavaScript

Biasanya dropdown menu dibuat menggunakan JavaScript/jQuery. Padahal tanpa itupun dropdown menu (baik vertikal maupun horizonal) dapat dicip...

Biasanya dropdown menu dibuat menggunakan JavaScript/jQuery. Padahal tanpa itupun dropdown menu (baik vertikal maupun horizonal) dapat diciptakan. Berikut ini saya salinkan untuk pembaca jelasinblog.blogspot.com beberapa contoh dropdown menu tanpa JavaScript.



Neoteric Dark Red



HTML
<!-- Start css3menu.com BODY section -->
<ul id="css3menu1" class="topmenu">
    <li class="topmenu"><a href="#" style="height:32px;line-height:32px;"><img src="http://css3menu.com/images/neoteric-dark-red/home1.png" alt=""/>Home</a>
    </li>
    <li class="topmenu"><a href="#" style="height:32px;line-height:32px;"><span><img src="http://css3menu.com/images/neoteric-dark-red/info.png" alt=""/>Product info</span></a>

        <ul>
            <li><a href="#"><img src="http://css3menu.com/images/neoteric-dark-red/pencil.png" alt=""/>Features</a>
            </li>
            <li><a href="#"><span><img src="http://css3menu.com/images/neoteric-dark-red/hammer.png" alt=""/>Installation</span></a>

                <ul>
                    <li><a href="#"><img src="http://css3menu.com/images/neoteric-dark-red/push_pin.png" alt=""/>Description of files</a>
                    </li>
                    <li><a href="#"><img src="http://css3menu.com/images/neoteric-dark-red/gear.png" alt=""/>How to setup</a>
                    </li>
                </ul>
            </li>
            <li><a href="#"><img src="http://css3menu.com/images/neoteric-dark-red/documents.png" alt=""/>Parameters info</a>
            </li>
            <li><a href="#"><span><img src="http://css3menu.com/images/neoteric-dark-red/world.png" alt=""/>Supported browsers</span></a>

                <ul>
                    <li><a href="#">Firefox</a>
                    </li>
                    <li><a href="#">Internet Explorer</a>
                    </li>
                    <li><a href="#">Opera</a>
                    </li>
                    <li><a href="#">Safari</a>
                    </li>
                    <li><a href="#">Google Chrome</a>
                    </li>
                </ul>
            </li>
            <li><a href="#"><img src="http://css3menu.com/images/neoteric-dark-red/help1.png" alt=""/>CSS3 info</a>
            </li>
        </ul>
    </li>
    <li class="topmenu"><a href="#" style="height:32px;line-height:32px;"><span><img src="http://css3menu.com/images/neoteric-dark-red/heart.png" alt=""/>Samples</span></a>

        <ul>
            <li><a href="#"><img src="http://css3menu.com/images/neoteric-dark-red/add.png" alt=""/>Android template</a>
            </li>
            <li><a href="#"><img src="http://css3menu.com/images/neoteric-dark-red/add1.png" alt=""/>Mac template</a>
            </li>
            <li><a href="#"><span><img src="http://css3menu.com/images/neoteric-dark-red/add2.png" alt=""/>Mercury template</span></a>

                <ul>
                    <li><a href="#">Blue theme</a>
                    </li>
                    <li><a href="#">Green theme</a>
                    </li>
                    <li><a href="#">Lilac theme</a>
                    </li>
                    <li><a href="#">Orange theme</a>
                    </li>
                </ul>
            </li>
            <li><a href="#"><img src="http://css3menu.com/images/neoteric-dark-red/add3.png" alt=""/>Elegant template</a>
            </li>
            <li><a href="#"><span><img src="http://css3menu.com/images/neoteric-dark-red/add4.png" alt=""/>Point template</span></a>

                <ul>
                    <li><a href="#">Aquamarine theme</a>
                    </li>
                    <li><a href="#">Blue theme</a>
                    </li>
                    <li><a href="#">Green theme</a>
                    </li>
                    <li><a href="#">Grey theme</a>
                    </li>
                    <li><a href="#">Orange theme</a>
                    </li>
                    <li><a href="#">Red theme</a>
                    </li>
                </ul>
            </li>
            <li><a href="#"><img src="http://css3menu.com/images/neoteric-dark-red/add5.png" alt=""/>Toolbars template</a>
            </li>
        </ul>
    </li>
</ul>
<p class="_css3m"><a href="http://css3menu.com/neoteric-dark-red.html" target="_blank">Original Code </a> </p><p class="_css3m"> <a href="http://jelasinblog.blogspot.com/2014/05/kumpulan-dropdown-menu-tanpa-javascript.html">Back to Tutorial </a>
</p>
<!-- End css3menu.com BODY section -->


CSS
ul#css3menu1, ul#css3menu1 ul {
    margin:0;
    list-style:none;
    padding:0;
    background-color:#201816;
    border-width:0;
    border-style:solid;
    border-color:;
}
ul#css3menu1 ul {
    visibility:hidden;
    position:absolute;
    left:0;
    top:100%;
    opacity:0;
    -moz-transition:all 0.5s;
    -webkit-transition:opacity 0.5s;
    -o-transition:opacity 0.5s, visibility 0.5s;
    transition:opacity 0.5s;
    background-color:#CB4E48;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    -moz-box-shadow:0 -8px 16px -4px #ba3b35 inset;
    -webkit-box-shadow:0 -8px 16px -4px #ba3b35 inset;
    box-shadow:0 -8px 16px -4px #ba3b35 inset;
    padding:0 7px 7px;
}
ul#css3menu1 li:hover>ul {
    visibility:visible;
    opacity:1;
}
ul#css3menu1 li {
    position:relative;
    display:block;
    white-space:nowrap;
    font-size:0;
    float:left;
}
ul#css3menu1 li:hover {
    z-index:1;
}
ul#css3menu1 ul ul {
    position:absolute;
    left:100%;
    top:0;
    -moz-box-shadow:0 -8px 16px -4px #ba3b35 inset;
    -webkit-box-shadow:0 -8px 16px -4px #ba3b35 inset;
    box-shadow:0 -8px 16px -4px #ba3b35 inset;
}
ul#css3menu1 {
    font-size:0;
    z-index:999;
    position:relative;
    display:inline-block;
    zoom:1;
    padding:0;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    *display:inline;
}
* html ul#css3menu1 li a {
    display:inline-block;
}
ul#css3menu1>li {
    margin:0;
}
ul#css3menu1 a:active, ul#css3menu1 a:focus {
    outline-style:none;
}
ul#css3menu1 a {
    display:block;
    vertical-align:middle;
    text-align:left;
    text-decoration:none;
    font:16px Dosis, Arial, sans-serif;
    color:#000000;
    cursor:pointer;
    padding:17px 20px;
    background-color:;
    background-repeat:repeat;
    border-width:0px;
    border-style:none;
    border-color:;
}
ul#css3menu1 ul li {
    float:none;
    margin:7px 0 0;
}
ul#css3menu1 ul a {
    text-align:left;
    padding:5px 15px;
    background-color:transparent;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    color:#EDC1BF;
    text-decoration:none;
    text-shadow:0 1px 1px #BE3C36;
}
ul#css3menu1 li:hover>a, ul#css3menu1 li a.pressed {
    border-style:none;
    color:#FFFFFF;
    text-decoration:none;
}
ul#css3menu1 img {
    border:none;
    vertical-align:middle;
    margin-right:17px;
}
ul#css3menu1 ul span {
    background-image:none;
    padding-right:5px;
}
ul#css3menu1 ul li:hover>a, ul#css3menu1 ul li a.pressed {
    background-color:#BC433D;
    color:#ffffff;
    text-decoration:none;
    text-shadow:0 1px 1px #BE3C36;
}
ul#css3menu1 li.topmenu>a {
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
    background-color:#201816;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    -moz-transition:all 0.5s;
    -webkit-transition:all 0.5s;
    -o-transition:all 0.5s;
    color:#988989;
}
ul#css3menu1 li.topmenu:hover>a, ul#css3menu1 li.topmenu a.pressed {
    -moz-box-shadow:inset 0 8px 12px -2px #ba3b35;
    -webkit-box-shadow:inset 0 8px 12px -2px #ba3b35;
    box-shadow:inset 0 8px 12px -2px #ba3b35;
    background-color:#CB4E48;
    color:#FFFFFF;
}



Reflex Black Vertical



HTML
<!-- Start Reflex Black Vertical dropdown -->
<ul id="css3menu1" class="topmenu">
    <li class="topfirst"><a href="#" title="Home" style="width:146px;"><img src="http://css3menu.com/images/reflex-black-vertical/computer on.png" alt=""/>Home</a>
    </li>
    <li class="topmenu"><a href="#" title="Product info" style="width:146px;"><span><img src="http://css3menu.com/images/reflex-black-vertical/splash green.png" alt=""/>Product info</span></a>

        <ul>
            <li class="subfirst"><a href="#" title="Features"><img src="http://css3menu.com/images/reflex-black-vertical/applications.png" alt=""/>Features</a>
            </li>
            <li><a href="#" title="Installation"><span><img src="http://css3menu.com/images/reflex-black-vertical/advanced.png" alt=""/>Installation</span></a>

                <ul>
                    <li class="subfirst"><a href="#" title="Description of files"><img src="http://css3menu.com/images/reflex-black-vertical/notebook.png" alt=""/>Description of files</a>
                    </li>
                    <li class="sublast"><a href="#" title="How to setup"><img src="http://css3menu.com/images/reflex-black-vertical/library bookmarked.png" alt=""/>How to setup</a>
                    </li>
                </ul>
            </li>
            <li><a href="#" title="Parameters info"><img src="http://css3menu.com/images/reflex-black-vertical/info3.png" alt=""/>Parameters info</a>
            </li>
            <li><a href="#" title="Supported browsers"><span><img src="http://css3menu.com/images/reflex-black-vertical/color.png" alt=""/>Supported browsers</span></a>

                <ul>
                    <li class="subfirst"><a href="#" title="Firefox">Firefox</a>
                    </li>
                    <li><a href="#" title="Internet Explorer">Internet Explorer</a>
                    </li>
                    <li><a href="#" title="Opera">Opera</a>
                    </li>
                    <li><a href="#" title="Safari">Safari</a>
                    </li>
                    <li class="sublast"><a href="#" title="Google Chrome">Google Chrome</a>
                    </li>
                </ul>
            </li>
            <li class="sublast"><a href="#" title="CSS3 info"><img src="http://css3menu.com/images/reflex-black-vertical/edit2.png" alt=""/>CSS3 info</a>
            </li>
        </ul>
    </li>
    <li class="topmenu"><a href="#" title="Samples" style="width:146px;"><span><img src="http://css3menu.com/images/reflex-black-vertical/star1.png" alt=""/>Samples</span></a>

        <ul>
            <li class="subfirst"><a href="#" title="Android template"><img src="http://css3menu.com/images/reflex-black-vertical/universal1.png" alt=""/>Android template</a>
            </li>
            <li><a href="#" title="Mac template"><img src="http://css3menu.com/images/reflex-black-vertical/universal2.png" alt=""/>Mac template</a>
            </li>
            <li><a href="#" title="Mercury template"><span><img src="http://css3menu.com/images/reflex-black-vertical/universal3.png" alt=""/>Mercury template</span></a>

                <ul>
                    <li class="subfirst"><a href="#" title="Blue theme">Blue theme</a>
                    </li>
                    <li><a href="#" title="Green theme">Green theme</a>
                    </li>
                    <li><a href="#" title="Lilac theme">Lilac theme</a>
                    </li>
                    <li class="sublast"><a href="#" title="Orange theme">Orange theme</a>
                    </li>
                </ul>
            </li>
            <li><a href="#" title="Elegant template"><img src="http://css3menu.com/images/reflex-black-vertical/universal4.png" alt=""/>Elegant template</a>
            </li>
            <li><a href="#" title="Point template"><span><img src="http://css3menu.com/images/reflex-black-vertical/universal5.png" alt=""/>Point template</span></a>

                <ul>
                    <li class="subfirst"><a href="#" title="Aquamarine theme">Aquamarine theme</a>
                    </li>
                    <li><a href="#" title="Blue theme">Blue theme</a>
                    </li>
                    <li><a href="#" title="Green theme">Green theme</a>
                    </li>
                    <li><a href="#" title="Grey theme">Grey theme</a>
                    </li>
                    <li><a href="#" title="Orange theme">Orange theme</a>
                    </li>
                    <li class="sublast"><a href="#" title="Red theme">Red theme</a>
                    </li>
                </ul>
            </li>
            <li class="sublast"><a href="#" title="Toolbars template"><img src="http://css3menu.com/images/reflex-black-vertical/universal6.png" alt=""/>Toolbars template</a>
            </li>
        </ul>
    </li>
    <li class="toplast"><a href="#" title="Download" style="width:146px;"><img src="http://css3menu.com/images/reflex-black-vertical/install.png" alt=""/>Download</a>
    </li>
</ul>
<p class="_css3m"><a href="http://css3menu.com/" target="_blank">CSS3 Button </a>
</p>
<p class="_css3m"><a href="http://jelasinblog.blogspot.com/2014/05/kumpulan-dropdown-menu-tanpa-javascript.html">Back to Tutorial </a>
</p>
<!-- End section -->


CSS

ul#css3menu1, ul#css3menu1 ul {
    margin:0;
    list-style:none;
    padding:0;
    background-color:#FFFFFF;
    border-width:0;
    border-style:solid;
    border-color:;
}
ul#css3menu1 ul {
    visibility:hidden;
    position:absolute;
    left:200%;
    top:0;
    opacity:0;
    -moz-transition:all 0.5s;
    -webkit-transition:opacity 0.5s, left 0.5s;
    -o-transition:opacity 0.5s, left 0.5s, visibility 0.5s;
    transition:opacity 0.5s, left 0.5s;
    -moz-box-shadow:0px 0px 2px #000;
    -webkit-box-shadow:0px 0px 2px #000;
    box-shadow:0px 0px 2px #000;
    background-color:#3e3f41;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    padding:0;
}
ul#css3menu1 li:hover>ul {
    visibility:visible;
    opacity:1;
}
ul#css3menu1 li {
    position:relative;
    display:block;
    white-space:nowrap;
    font-size:0;
}
ul#css3menu1 li:hover {
    z-index:1;
}
ul#css3menu1 ul ul {
    position:absolute;
    left:200%;
    top:0;
}
ul#css3menu1>li:hover>ul {
    left:100%;
}
ul#css3menu1 ul li:hover>ul {
    left:100%;
}
ul#css3menu1 {
    font-size:0;
    z-index:999;
    position:relative;
    display:block;
    float:left;
    padding:0 4px 0 0;
    background-color:#6f7474;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
ul#css3menu1>li {
    margin:0;
}
ul#css3menu1 a:active, ul#css3menu1 a:focus {
    outline-style:none;
}
ul#css3menu1 a {
    display:block;
    vertical-align:middle;
    text-align:left;
    text-decoration:none;
    font:bold 14px'Scada', Lucida Sans Unicode, Lucida Grande, sans-serif;
    color:#FFF5A5;
    text-shadow:1px 1px 1px rgba(0, 0, 0, 0.9);
    cursor:pointer;
    padding:3px;
    background-color:;
    background-repeat:repeat;
    border-width:0px;
    border-style:none;
    border-color:;
}
ul#css3menu1 ul li {
    float:none;
    margin:0;
}
ul#css3menu1 ul a {
    text-align:left;
    padding:7px;
    -moz-box-shadow:0;
    -webkit-box-shadow:0;
    box-shadow:0;
    background-color:transparent;
    background-image:none;
    border-width:1px 0 1px 0;
    border-style:solid;
    border-color:#545557 transparent #303132 transparent;
    font:13px'Scada', Lucida Sans Unicode, Lucida Grande, sans-serif;
    color:#FFF5A5;
    text-decoration:none;
}
ul#css3menu1 li:hover>a, ul#css3menu1 li a.pressed {
    border-style:none;
    color:#FFFFFF;
    text-shadow:1px 1px 1px rgba(0, 0, 0, 0.9);
    text-decoration:none;
}
ul#css3menu1 img {
    border:none;
    vertical-align:middle;
    margin-right:3px;
}
ul#css3menu1 span {
    display:block;
    overflow:visible;
    background-image:url("arrowsub.png");
    background-position:right center;
    background-repeat:no-repeat;
    padding-right:30px;
}
ul#css3menu1 ul span {
    background-image:url("arrowsub.png");
    padding-right:22px;
}
ul#css3menu1 ul li:hover>a, ul#css3menu1 ul li a.pressed {
    -moz-box-shadow:;
    -webkit-box-shadow:;
    box-shadow:;
    background-color:transparent;
    background-image:-o-linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0));
    background-image:-moz-linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0));
    background-image:linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0));
    background-image:-webkit-linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0));
    border-style:solid;
    border-color:#545557 transparent #303132 transparent;
    color:#FFFFFF;
    text-decoration:none;
    filter:progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr=#00000000, endColorstr=#4DFFFFFF)
}
ul#css3menu1>li>a {
    padding:9px 15px;
}
ul#css3menu1 li.topfirst>a {
    background-color:#393d3e;
    background-image:-o-linear-gradient(-90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    background-image:-moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    background-image:linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    background-image:-webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    border-width:1px;
    border-style:solid;
    border-color:#464a4a #474b4c #2b2e2e #474b4c;
    border-radius:3px 3px 0 0;
    -moz-border-radius:3px 3px 0 0;
    -webkit-border-radius:3px;
    -webkit-border-bottom-right-radius:0;
    -webkit-border-bottom-left-radius:0;
    padding:9px 15px;
    filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#21FFFFFF, endColorstr=#00FFFFFF)
}
ul#css3menu1 li.topfirst:hover>a, ul#css3menu1 li.topfirst a.pressed {
    background-color:#333738;
    background-image:-o-linear-gradient(135deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    background-image:-moz-linear-gradient(135deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    background-image:linear-gradient(45deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    background-image:-webkit-linear-gradient(135deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    border-style:solid;
    border-color:#464a4a #474b4c #2b2e2e #474b4c;
    filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#00555555, endColorstr=#7FEEEEEE)
}
ul#css3menu1 li.topmenu>a {
    background-color:#393d3e;
    background-image:-o-linear-gradient(-90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    background-image:-moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    background-image:linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    background-image:-webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    border-width:1px;
    border-style:solid;
    border-color:#464a4a #474b4c #2b2e2e #474b4c;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    padding:9px 15px;
    filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#21FFFFFF, endColorstr=#00FFFFFF)
}
ul#css3menu1 li.topmenu:hover>a, ul#css3menu1 li.topmenu a.pressed {
    background-color:#333738;
    background-image:-o-linear-gradient(135deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    background-image:-moz-linear-gradient(135deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    background-image:linear-gradient(45deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    background-image:-webkit-linear-gradient(135deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    border-style:solid;
    border-color:#464a4a #474b4c #2b2e2e #474b4c;
    filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#00555555, endColorstr=#7FEEEEEE)
}
ul#css3menu1 li.toplast>a {
    background-color:#393d3e;
    background-image:-o-linear-gradient(-90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    background-image:-moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    background-image:linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    background-image:-webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
    border-width:1px;
    border-style:solid;
    border-color:#464a4a #474b4c #2b2e2e #474b4c;
    border-radius:0 0 3px 3px;
    -moz-border-radius:0 0 3px 3px;
    -webkit-border-radius:0;
    -webkit-border-bottom-right-radius:3px;
    -webkit-border-bottom-left-radius:3px;
    padding:9px 15px;
    filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#21FFFFFF, endColorstr=#00FFFFFF)
}
ul#css3menu1 li.toplast:hover>a, ul#css3menu1 li.toplast a.pressed {
    background-color:#333738;
    background-image:-o-linear-gradient(135deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    background-image:-moz-linear-gradient(135deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    background-image:linear-gradient(45deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    background-image:-webkit-linear-gradient(135deg, rgba(238, 238, 238, 0.5), rgba(85, 85, 85, 0));
    border-style:solid;
    border-color:#464a4a #474b4c #2b2e2e #474b4c;
    filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#00555555, endColorstr=#7FEEEEEE)
}
ul#css3menu1 li.subfirst>a {
    border-width:0 0 1px 0;
    border-radius:3px 3px 0 0;
    -moz-border-radius:3px 3px 0 0;
    -webkit-border-radius:3px;
    -webkit-border-bottom-right-radius:0;
    -webkit-border-bottom-left-radius:0;
}
ul#css3menu1 li.sublast>a {
    border-width:1px 0 0 0;
    border-radius:0 0 3px 3px;
    -moz-border-radius:0 0 3px 3px;
    -webkit-border-radius:0;
    -webkit-border-bottom-right-radius:3px;
    -webkit-border-bottom-left-radius:3px;
}

Dua contoh di atas sudah cukup memberi gambaran bagaimana menciptakan dropdown menu tanpa JavaScript/jQuery. Lebih lanjut Kumpulan Dropdown Menu tanpa JavaScript dapat Anda eksplorasi di http://css3menu.com

Selamat belajar :)

COMMENTS

BLOGGER: 6

Name

Adsense,2,Blockquote,1,Blogger,17,Blogger Tool,1,Blogspot,1,Contact Form,3,CSS,23,CSS3,1,Domain,1,Font,2,Halaman,3,HTML,5,JavaScript,17,jQuery,6,Komentar,2,Page Loading,1,SEO,1,Share Button,1,Sidebar,1,Tag Kondisional,1,Tema,11,Trik,1,Website,1,WordPress,2,
ltr
item
Jelas in Blog: Kumpulan Dropdown Menu tanpa JavaScript
Kumpulan Dropdown Menu tanpa JavaScript
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizPF6HOh5uHOErGaUVIYNpeHv56ramA3te_PKkXydYZpdBk3XkXBgLq4pDd81G5Owx3KCFuF2Et4s4oDbj0vgY4tc-Wjxfx-7yjGEn2EO6EnlNAr9NP6XeT-xnxvJ2EADSJE5QpE2J8SY/s1600/dropdown+menu+tanpa+javascript+1.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizPF6HOh5uHOErGaUVIYNpeHv56ramA3te_PKkXydYZpdBk3XkXBgLq4pDd81G5Owx3KCFuF2Et4s4oDbj0vgY4tc-Wjxfx-7yjGEn2EO6EnlNAr9NP6XeT-xnxvJ2EADSJE5QpE2J8SY/s72-c/dropdown+menu+tanpa+javascript+1.png
Jelas in Blog
https://jelasinblog.blogspot.com/2014/05/kumpulan-dropdown-menu-tanpa-javascript.html
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/2014/05/kumpulan-dropdown-menu-tanpa-javascript.html
true
2350744749749285503
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content