Widget Unik Menu Multiple Drop Down

Widget Unik Menu Multiple Drop Down - Kali ini saya masih melanjutkan tentang widget unik seperti yang saya posting diartikel sebelumnya yaitu widget unik metro ui drop down sliding dan tips widget navigasi unik metro ui . Untuk widget yang satu ini adalah menu multiple drop down, mungkin kalian sudah tidak asing lagi dengan widget menu efek drop down. Namun saya memberikan efek yang sedikit berbeda yaitu multiple drop down, yang ini sangat bermanfaat sekali buat mereka yang punya blog dengan berbagai macam kategori /label.

Untuk pemasangan di blog cukup mudah tinggal Add Gadget >> HTML/Javascript >> Copas kode dibawah ini : 

<style type="text/css" scoped="scoped">
#sam-multi-menu, #sam-multi-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#sam-multi-menu {
    width: 900px;
    margin: 40px auto;
    border: 1px solid #222;
    background-color: #007f74;
    background-image: linear-gradient(#444, #007f74);
    border-radius: 6px;
    box-shadow: 0 1px 1px #777;
}
#sam-multi-menu:before,
#sam-multi-menu:after {
    content: "";
    display: table;
}

#sam-multi-menu:after {
    clear: both;
}

#sam-multi-menu {
    zoom:1;
}
#sam-multi-menu li {
    float: left;
    border-right: 1px solid #222;
    box-shadow: 1px 0 0 #444;
    position: relative;
}

#sam-multi-menu a {
    float: left;
    padding: 12px 20px;
    color: #999;
    text-transform: uppercase;
    font: bold 12px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
}

#sam-multi-menu li:hover > a {background-color: #007f74;
    background-image: linear-gradient(#000, #FF8C00);
    color: #fff;
}

*html #sam-multi-menu li a:hover {
    color: #fff;
}
#sam-multi-menu ul {
    margin: 20px 0 0 0;
    _margin: 0;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 38px;
    left: 0;
    z-index: 1;
    background: #444;
    background: linear-gradient(#444, #007f74);
    box-shadow: 0 -1px 0 rgba(255,255,255,.3);
    border-radius: 3px;
    transition: all .2s ease-in-out;
}

#sam-multi-menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
}

#sam-multi-menu ul ul {
    top: 0;
    left: 150px;
    margin: 0 0 0 20px;
    _margin: 0;
    box-shadow: -1px 0 0 rgba(255,255,255,.3);    
}

#sam-multi-menu ul li {
    float: none;
    display: block;
    border: 0;
    _line-height: 0;
    box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

#sam-multi-menu ul li:last-child {
    box-shadow: none;
}

#sam-multi-menu ul a {
    padding: 10px;
    width: 130px;
    _height: 10px;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

#sam-multi-menu ul a:hover {
    background-color: #007f74;
    background-image: linear-gradient(#000, #FF8C00);
}
#sam-multi-menu ul li:first-child > a {
    border-radius: 3px 3px 0 0;
}

#sam-multi-menu ul li:first-child > a:after {
    content: '';
    position: absolute;
    left: 40px;
    top: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #444;
}

#sam-multi-menu ul ul li:first-child a:after {
    left: -6px;
    top: 50%;
    margin-top: -6px;
    border-left: 0;
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid #3b3b3b;
}

#sam-multi-menu ul li:first-child a:hover:after {
    border-bottom-color: #fff;
}

#sam-multi-menu ul ul li:first-child a:hover:after {
    border-right-color: #0299d3;
    border-bottom-color: transparent;  
}

#sam-multi-menu ul li:last-child > a {
    border-radius: 0 0 3px 3px;
}
#sam-multi-menu-trigger {
    display: none;
}

@media screen and (max-width: 600px) {

    #sam-multi-menu-wrap {
        position: relative;
    }

    #sam-multi-menu-wrap * {
        box-sizing: border-box;
    }

    #sam-multi-menu-trigger {
        display: block;
        height: 40px;
        line-height: 40px;
        cursor: pointer;    
        padding: 0 0 0 35px;
        border: 1px solid #222;
        color: #fff;
        font-weight: bold;
        background-color: #111;
        background: url(data:image/png;base64,iVBOR...) no-repeat 10px center, linear-gradient(#444, #111);
        border-radius: 6px;
        box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
    }

    #sam-multi-menu {
        margin: 0; padding: 10px;
        position: absolute;
        top: 40px;
        width: 100%;
        z-index: 1;
        display: none;
        box-shadow: none;    
    }

    #sam-multi-menu:after {
        content: '';
        position: absolute;
        left: 25px;
        top: -8px;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid #444;
    }

    #sam-multi-menu ul {
        position: static;
        visibility: visible;
        opacity: 1;
        margin: 0;
        background: none;
        box-shadow: none;            
    }

    #sam-multi-menu ul ul {
        margin: 0 0 0 20px !important;
        box-shadow: none;    
    }

    #sam-multi-menu li {
        position: static;
        display: block;
        float: none;
        border: 0;
        margin: 5px;
        box-shadow: none;        
    }

    #sam-multi-menu ul li{
        margin-left: 20px;
        box-shadow: none;    
    }

    #sam-multi-menu a{
        display: block;
        float: none;
        padding: 0;
        color: #999;
    }

    #sam-multi-menu a:hover{
        color: #fff;
    }

    #sam-multi-menu ul a{
        padding: 0;
        width: auto;    
    }

    #sam-multi-menu ul a:hover{
        background: none;
    }

    #sam-multi-menu ul li:first-child a:after,
    #sam-multi-menu ul ul li:first-child a:after {
        border: 0;
    }    

}

@media screen and (min-width: 600px) {
    #sam-multi-menu {
        display: block !important;
    }
}

.no-transition {
    transition: none;
    opacity: 1;
    visibility: visible;
    display: none;        
}

#sam-multi-menu li:hover > .no-transition {
    display: block;
}
</style>

<br />
<ul id="sam-multi-menu">
<li><a href="#">HOME</a></li>
<li>

<a href="#">CATEGORIES</a>

<ul>
<li>
<a href="#">CSS</a>
<ul>
<li><a href="#">CSS 1</a></li>
<li><a href="#">CSS 2</a></li>
<li><a href="#">CSS 3</a></li>
<li><a href="#">CSS 4</a></li>
</ul>
</li>
<li>
<a href="#">HTML</a>

<ul>
<li><a href="#">HTML 1</a></li>
<li><a href="#">HTML 2</a></li>
<li><a href="#">HTML 3</a></li>
<li><a href="#">HTML 4</a></li>
</ul>
</li>
<li>
<a href="#">DOWNLOAD</a>
<ul>
<li><a href="#">DOWNLOAD 1</a></li>
<li><a href="#">DOWNLOAD 2</a></li>
<li><a href="#">DOWNLOAD 3</a></li>
<li><a href="#">DOWNLOAD 4</a></li>
</ul>
</li>
<li>
<a href="#">TUTORIAL</a>
<ul>
<li><a href="#">TUTORIAL 1</a></li>
<li><a href="#">TUTORIAL 2</a></li>
<li><a href="#">TUTORIAL 3</a></li>
<li><a href="#">TUTORIAL 4</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">LINK</a>
<ul>
<li><a href="#">LINK 1</a></li>
<li><a href="#">LINK 2</a></li>
<li><a href="#">LINK 3</a></li>
<li><a href="#">LINK 4</a></li>
</ul>
</li>
<li><a href="#">SOFTWARE</a></li>
<li><a href="#">CONTACT ME</a></li>
<li><a href="http://samsury-sites.blogspot.com/">SAMSURY SITES</a>
</li>
</ul>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
  if ($.browser.msie && $.browser.version.substr(0,1)<7)
  {
    $('li').has('ul').mouseover(function(){
        $(this).children('ul').css('visibility','visible');
        }).mouseout(function(){
        $(this).children('ul').css('visibility','hidden');
        })
  }
});
/* Mobile */
$('#sam-multi-menu-wrap').prepend('<div id="sam-multi-menu-trigger">
sam-multi-menu</div>
');    
$("#sam-multi-menu-trigger").on("click", function(){
    $("#sam-multi-menu").slideToggle();
});

// iPad
var isiPad = navigator.userAgent.match(/iPad/i) != null;
if (isiPad) $('#sam-multi-menu ul').addClass('no-transition');
</script>

Anda tinggal mengubah tanda # dengan URL dan nama yang akan ditampilkan

Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit