Sliding Vertical Tab Menu adalah satu set menu yang bisa diaplikasikan dalam blog dengan ciri khas apabila mouse berada di atas salah satu menu maka menu akan bergeser secara vertical ke bawah. Menu ini selain bisa meminimalisir tampilan sidebar, mampu menambah nilai artistik sebuah menu dari blog.

Cara membuat menu ini sama sekali tidak menggunakan kode javascript, tapi asli merekayasa CSS dan html. Jadi tidak perlu khawatir jika menu ini akan berat untuk dijalankan. Anda boleh coba sendiri betapa ringan aplikasi ini untuk diloading.

Menu yang sedang kita bicarakan adalah seperti menu berikut ini:


Nah jika tertarik dan ingin membuat menu sliding drop down ini ke blog, caranya sangat mudah.

Pertama Login ke blogger lalu klik >> Tata Letak >> Tambah Gadget >> HTML/JavaScript . Kemudian kopy paste kode di bawah ini kedalamnya.

<style type="text/css">
* {
margin: 0px;
  padding: 0px;
}
.Vertical {
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.5;
  margin:1px auto; /*for display only*/
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.menu-item {
  background: #fff;
  width: 300px;
}
/*Menu Header Styles 1*/
.menu-item h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 7px 12px;
  background: #9DB6D7;
}
.menu-item h4 a {
  color: white;
  display: block;
  text-decoration: none;
  width: 300px;
}
/*Menu Header Styles 2*/
.menu-item h4 {
  border-bottom: 1px solid rgba(0,0,0,0.3);
  border-top: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 7px 12px;
  background: #a90329; /* Old browsers */
  background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
  background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.menu-item h4:hover {
  background: #cc002c; /* Old browsers */
  background: -moz-linear-gradient(top,  #cc002c 0%, #6d0019 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* IE10+ */
  background: linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.alpha p {
  font-size: 13px;
  padding: 8px 12px;
  color: #aaa;
}
/*ul Styles*/
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
}
.menu-item ul a {
  margin-left: 20px;
  text-decoration: none;
  color: #0A0A0A;
  display: block;
  width: 250px;
}
/*li Styles*/
.menu-item li {
  border-bottom: 1px solid #eee;
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiF04cxsO6g_S4zt8LFE1fa5Pv9cbJWCPBLIq-OfyDZrb4ri4FjzmjNvy-9TcT3lWqQybIzqbqRUNKI5cv-MA5USoOQ-ofxzrwk8yTJ20b8OPxV_5LMxJF0gKwriDILYaiY2sLY1txYC0/s1600/libg300.png) no-repeat scroll left -1px;
line-height:1.5em;
margin:0;
padding:0 0 0.25em 15px;
text-decoration: none !important;
}
.menu-item li:hover {
  background: #eee;
}
/*ul Styles*/
.menu-item ul {
  background: #B2D8E0;
  font-size: 13px;
  line-height: 30px;
  height: 0px; /*Collapses the menu*/
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
}
/*ul Styles*/
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  height: 0px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
  /*Animation*/
  -webkit-transition: height 1s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
          transition: height 1s ease;
}
.menu-item:hover ul {
  height: 115px;
}
</style>
<div class='Vertical'>
    <div class="menu-item">
      <h4><a>Menu Navigation 1</a></h4>
      <ul>
        <li><a href="URL-HERE" target="_blank">Link Name 1</a></li>
        <li><a href="URL-HERE" target="_blank">Link Name 2</a></li>
        <li><a href="URL-HERE" target="_blank">Link Name 3</a></li>
    <li><a href="URL-HERE" target="_blank">Link Name 4</a></li>
    <li><a href="URL-HERE" target="_blank">Link Name 5</a></li>
    </ul>
    </div>

<div class="menu-item">
      <h4><a>Menu Navigation 2</a></h4>
      <ul>
        <li><a href="URL-HERE" target="_blank">Link Name 1</a></li>
        <li><a href="URL-HERE" target="_blank">Link Name 2</a></li>
        <li><a href="URL-HERE" target="_blank">Link Name 3</a></li>
    <li><a href="URL-HERE" target="_blank">Link Name 4</a></li>
    <li><a href="URL-HERE" target="_blank">Link Name 5</a></li>
    </ul>
    </div>

    <div class="menu-item">
      <h4><a>Menu Navigation 3</a></h4>
      <ul>
        <li><a href="URL-HERE" target="_blank">Link Name 1</a></li>
        <li><a href="URL-HERE" target="_blank">Link Name 2</a></li>
        <li><a href="URL-HERE" target="_blank">Link Name 3</a></li>
    <li><a href="URL-HERE" target="_blank">Link Name 4</a></li>
    <li><a href="URL-HERE" target="_blank">Link Name 5</a></li>
    </ul>
    </div>

<div class="menu-item">
      <h4><a>Menu Navigation 4</a></h4>
      <ul>
        <li><a href="URL-HERE" target="_blank">Link Name 1</a></li>
        <li><a href="URL-HERE" target="_blank">Link Name 2</a></li>
        <li><a href="URL-HERE" target="_blank">Link Name 3</a></li>
    <li><a href="URL-HERE" target="_blank">Link Name 4</a></li>
    <li><a href="URL-HERE" target="_blank">Link Name 5</a></li>
    </ul>
    </div>

    <div class="menu-item">
      <h4><a>Menu Navigation 5</a></h4>
      <ul>
        <li><a href="URL-HERE" target="_blank">Link Name 1</a></li>
        <li><a href="URL-HERE" target="_blank">Link Name 2</a></li>
        <li><a href="URL-HERE" target="_blank">Link Name 3</a></li>
    <li><a href="URL-HERE" target="_blank">Link Name 4</a></li>
    <li><a href="URL-HERE" target="_blank">Link Name 5</a></li>
    </ul>
    </div>

    </div>
<div class='clear'></div>

Simpan HTML dan lihat hasilnya, oia silahkan sobat merubah sendiri kode CSS maupun HTML diatas sesuai selera.good luck!

Semoga tutorial kali ini bermanfaat bagi anda! ^^

Today we will create a collapsing menu that contains vertical navigation bars and a slide out content area. When hovering over a menu item, an image slides down from the top and a submenu slides up from the bottom. Clicking on one of the submenu items will make the whole menu collapse like a card deck and the respective content area will slide out.
The beautiful fashion photos are taken from Beyrouth’s photostream on flickr. The specific set can be found here.
So, let’s get started!

Example Collapsing Site Navigation Klik here,,,

CSS::

.cc_menu{
width:700px; /*140px * 5*/
height:600px;
position:relative;
font-size:14px;
text-transform:uppercase;
color:#fff;
}
.cc_item{
text-align:center;
width:140px;
height:600px;
float:left;
border-bottom:1px solid #000;
background:#444 url(http://tympanus.net/Tutorials/CollapsingSiteNavigation/images/bg.png) repeat top left;
position:relative;
-moz-box-shadow:3px -3px 10px #000;
-webkit-box-shadow:3px -3px 10px #000;
box-shadow:3px -3px 10px #000;
}
span.cc_title{
color:#fff;
font-size:16px;
top:200px;
left:5px;
position:absolute;
padding:3px 0px;
background:#111;
width:130px;
display:block;
z-index:11;
-moz-box-shadow:1px 1px 4px #000;
-webkit-box-shadow:1px 1px 4px #000;
box-shadow:1px 1px 4px #000;
}
.cc_submenu ul{
list-style:none;
width:140px;
margin:0;
padding:0;
height:0px; /*increase to 200px to slide up*/
overflow:hidden;
text-align:left;
background:#000;
position:absolute;
left:0px;
bottom:0px;
opacity:0.7;
z-index:13;
}
.cc_submenu ul li{
color:#ddd;
cursor:pointer;
padding:10px;
}
.cc_item img{
position:absolute;
width:140px;
height:600px;
top:-600px;
left:0px;
}
.cc_content{
width:600px;
height:600px;
border-bottom:1px solid #000;
position:absolute;
left:-700px;
background:#444 url(http://tympanus.net/Tutorials/CollapsingSiteNavigation/images/bg.png) repeat top left;
overflow:hidden;
-moz-box-shadow:4px 0 7px #000;
-webkit-box-shadow:4px 0 7px #000;
box-shadow:4px 0 7px #000;
}
.cc_content div{
display:none;
margin:20px;
}
.cc_content p{
background:#000;
padding:20px;
opacity:0.7;
}
span.cc_back{
position:absolute;
bottom:10px;
right:10px;
cursor:pointer;
color:#ddd;
}

SCRIPT::

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script src="http://tympanus.net/Tutorials/CollapsingSiteNavigation/js/cufon-yui.js" type="text/javascript"></script>
<script src="http://tympanus.net/Tutorials/CollapsingSiteNavigation/js/Liberation_Sans.font.js" type="text/javascript"></script>

<script type="text/javascript">
Cufon.replace('span');
Cufon.replace('li');
Cufon.replace('h1');
Cufon.replace('p');
</script>

<!-- The JavaScript -->
<script type="text/javascript">
$(function() {
//all the menu items
                var $items         = $('#cc_menu .cc_item');
                //number of menu items
                var cnt_items    = $items.length;
                //if menu is expanded then folded is true
                var folded        = false;
                //timeout to trigger the mouseenter event on the menu items
                var menu_time;
                /**
                bind the mouseenter, mouseleave to each item:
                - shows / hides image and submenu
                bind the click event to the list elements (submenu):
                - hides all items except the clicked one,
                and shows the content for that item
                */
                $items.unbind('mouseenter')
                      .bind('mouseenter',m_enter)
                      .unbind('mouseleave')
                      .bind('mouseleave',m_leave)
                      .find('.cc_submenu > ul > li')
                      .bind('click',function(){
                    var $li_e = $(this);
                          //if the menu is already folded,
                          //just replace the content
                    if(folded){
                        hideContent();
                        showContent($li_e.attr('class'));
                    }   
                          else //fold and show the content
                        fold($li_e);
                });
               
                /**
                mouseenter function for the items
                the timeout is used to prevent this event
                to trigger if the user moves the mouse with
                a considerable speed through the menu items
                */
                function m_enter(){
                    var $this     = $(this);
                    clearTimeout(menu_time);
                    menu_time     = setTimeout(function(){
                    //img
                    $this.find('img').stop().animate({'top':'0px'},400);
                    //cc_submenu ul
                    $this.find('.cc_submenu > ul').stop().animate({'height':'200px'},400);
                    },200);
                }
               
//mouseleave function for the items
                function m_leave(){
                    var $this = $(this);
                    clearTimeout(menu_time);
                    //img
                    $this.find('img').stop().animate({'top':'-600px'},400);
                    //cc_submenu ul
                    $this.find('.cc_submenu > ul').stop().animate({'height':'0px'},400);
                }
               
                //back to menu button - unfolds the menu
                $('#cc_back').bind('click',unfold);
               
                /**
                hides all the menu items except the clicked one
                after that, the content is shown
                */
                function fold($li_e){
                    var $item        = $li_e.closest('.cc_item');
                   
                    var d = 100;
                    var step = 0;
                    $items.unbind('mouseenter mouseleave');
                    $items.not($item).each(function(){
                        var $item = $(this);
                        $item.stop().animate({
                            'marginLeft':'-140px'
                        },d += 200,function(){
                            ++step;
                            if(step == cnt_items-1){
                                folded = true;
                                showContent($li_e.attr('class'));
                            }   
                        });
                    });
                }
               
                /**
                shows all the menu items
                also hides any item's image / submenu
                that might be displayed
                */
                function unfold(){
                    $('#cc_content').stop().animate({'left':'-700px'},600,function(){
                        var d = 100;
                        var step = 0;
                    $items.each(function(){
                            var $item = $(this);
                           
                            $item.find('img')
                                 .stop()
                                 .animate({'top':'-600px'},200)
                                 .andSelf()
                                 .find('.cc_submenu > ul')
                                 .stop()
                                 .animate({'height':'0px'},200);
                               
                            $item.stop().animate({
                            'marginLeft':'0px'
                            },d += 200,function(){
                                ++step;
                                if(step == cnt_items-1){
                                    folded = false;
                                    $items.unbind('mouseenter')
                                          .bind('mouseenter',m_enter)
                                          .unbind('mouseleave')
                                          .bind('mouseleave',m_leave);
                                   
                                    hideContent();
                                }         
                            });
                        });
                    });
                }
               
//function to show the content
                function showContent(idx){
                    $('#cc_content').stop().animate({'left':'140px'},200,function(){
                        $(this).find('.'+idx).fadeIn();
                    });
                }
               
//function to hide the content
                function hideContent(){
                    $('#cc_content').find('div').hide();
                }
});
</script>

HTML::

<div id="cc_menu" class="cc_menu">
<div class="cc_item" style="z-index:5;">
<img src="http://tympanus.net/Tutorials/CollapsingSiteNavigation/images/1.jpg" alt="image" />
<span class="cc_title">Collection</span>
<div class="cc_submenu">
<ul>
<li class="cc_content_1">Winter 2010</li>
<li class="cc_content_2">Spring 2011</li>
</ul>
</div>
</div>

<div class="cc_item" style="z-index:4;">
<img src="http://tympanus.net/Tutorials/CollapsingSiteNavigation/images/2.jpg" alt="image" />
<span class="cc_title">Stores</span>
<div class="cc_submenu">
<ul>
<li class="cc_content_3">Milano</li>
<li class="cc_content_4">Paris</li>
<li class="cc_content_5">New York</li>
<li class="cc_content_6">Miami</li>
</ul>
</div>
</div>

<div class="cc_item" style="z-index:3;">
<img src="http://tympanus.net/Tutorials/CollapsingSiteNavigation/images/3.jpg" alt="image" />
<span class="cc_title">About</span>
<div class="cc_submenu">
<ul>
<li class="cc_content_7">About us</li>
<li class="cc_content_8">Our Philosophy</li>
</ul>
</div>
</div>

<div class="cc_item" style="z-index:2;">
<img src="http://tympanus.net/Tutorials/CollapsingSiteNavigation/images/4.jpg" alt="image" />
<span class="cc_title">Events</span>
<div class="cc_submenu">
<ul>
<li class="cc_content_9">Bacardi Summer Party</li>
<li class="cc_content_10">Lonestyle Auction</li>
</ul>
</div>
</div>

<div class="cc_item" style="z-index:1;">
<img src="http://tympanus.net/Tutorials/CollapsingSiteNavigation/images/5.jpg" alt="image" />
<span class="cc_title">Contact</span>
<div class="cc_submenu">
<ul>
<li class="cc_content_11">Custom Orders</li>
<li class="cc_content_12">Get in touch</li>
</ul>
</div>
</div>

<div id="cc_content" class="cc_content">
<span id="cc_back" class="cc_back">&lt;&lt; Go back</span>
<div class="cc_content_1">
<h1>Winter 2010</h1>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
</div>

<div class="cc_content_2">
<h1>Spring 2011</h1>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.</p>
</div>

<div class="cc_content_3">
<h1>Milano</h1>
<p>She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek</p>
</div>

<div class="cc_content_4">
<h1>Paris</h1>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. </p>
</div>

<div class="cc_content_5">
<h1>New York</h1>
<p>It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame.</p>
</div>

<div class="cc_content_6">
<h1>Miami</h1>
<p>It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame.</p>
</div>

<div class="cc_content_7">
<h1>About us</h1>
<p>It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather.</p>
</div>

<div class="cc_content_8">
<h1>Our Philosophy</h1>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>

<div class="cc_content_9">
<h1>Bacardi Summer Party</h1>
<p>I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth</p>
</div>

<div class="cc_content_10">
<h1>Lonestyle Auction</h1>
<p>To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire</p>
</div>

<div class="cc_content_11">
<h1>Custom Orders</h1>
<p>Winter collection</p>
</div>

<div class="cc_content_12">
<h1>Get in touch</h1>
<p>Winter collection</p>
</div>

</div>
</div>

<div></div>

Baiklah kali ini saya akan memberikan trik blogger yaitu 'Membuat Vertical Menu Menggunakan jQuery Plugin' Saya datang ke website Desain Persempit. Menu gulir Nya menangkap banyak perhatian saya, saya bermain dengan itu untuk sementara waktu. Ya, sayangnya, itu dibangun dalam sekejap. Dan, Ya, kita akan menerapkannya dengan jquery - menu javascript gulir berbasis yang akan melakukan hal yang sama. Tentu saja, itu tidak akan 100% sama, karena beberapa fitur mewah yang hanya tidak praktis untuk menerapkan dengan javascript.

DEMO Vertical Scroll Menu With jQuery Plugin.


Jika sobat tertarik untuk mencoba, silahkan perhatikan CSS, HTML, & SCRIPT dibawah ini!

CSS ::

#gridmenu {background:#ddd;
height:375px;
overflow:hidden;
position:relative;
}
#verscrolmenu {float:right;
width:100%;
list-style:none;
padding:0;
margin:0;
top:0;
position:relative;
height:100%;
width:300px;
}
#verscrolmenu li {
padding:10px 0;
text-align:right;
display:block;
cursor:hand;
cursor:pointer;
}
#verscrolmenu li a {
color:#ddd;background:url() repeat #1f1f1f;
font-family:helvetica, arial, verdana;
font-size:10px;
font-weight:900;
display:inline;
padding:20px 8px 5px 20px;
text-decoration:none;
}
#verscrolmenu li span {
font-family:georgia, arial;
font-size:10px;
color:#464646;
}

HTML ::

<div id="gridmenu">
<ul id="verscrolmenu">
<li><a href="#">MENU 1 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE 2 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 3 <span> / 2007</span></a></li>
<li><a href="#">MENU 4 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE 5 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 6 <span> / 2007</span></a></li>
<li><a href="#">MENU 7 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE 8 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 9 <span> / 2007</span></a></li>
<li><a href="#">MENU 10 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE 11 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 12 <span> / 2007</span></a></li>
<li><a href="#">MENU 13 <span> / 2007</span></a></li>
<li><a href="#">SUPER LONG MENU SIZE 14 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 15 <span> / 2007</span></a></li>
<li><a href="#">MENU 16 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE 17 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 18 <span> / 2007</span></a></li>
<li><a href="#">MENU 19 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE 20 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 21 <span> / 2007</span></a></li>
<li><a href="#">MENU 22 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE 5 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 23 <span> / 2007</span></a></li>
<li><a href="#">MENU 24 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE 25 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 26 <span> / 2007</span></a></li>
<li><a href="#">MENU 27 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE 28 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 29 <span> / 2007</span></a></li>
<li><a href="#">MENU 30 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE 31 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 32 <span> / 2007</span></a></li>
<li><a href="#">MENU 33 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE 34 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 35 <span> / 2007</span></a></li>
<li><a href="#">MENU 34 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE 34 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 35 <span> / 2007</span></a></li>
<li><a href="#">MENU 35 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE 34 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 35 <span> / 2007</span></a></li>
<li><a href="#">MENU 36 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE 34 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 35 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE EXTRA LARGE 36 <span> / 2007</span></a></li>
</ul>
</div>

SCRIPT ::

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

<script type="text/javascript" src="http://www.queness.com/resources/html/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://www.queness.com/resources/html/js/jquery.color.js"></script>

<script type="text/javascript">
$(document).ready(function() {   

//Background color, mouseover and mouseout
    var colorOver = '#31b8da';
    var colorOut = '#1f1f1f';

//Padding, mouseover
    var padLeft = '20px';
    var padRight = '20px';
   
    //Default Padding
    var defpadLeft = $('#verscrolmenu li a').css('paddingLeft');
    var defpadRight = $('#verscrolmenu li a').css('paddingRight');
       
//Animate the LI on mouse over, mouse out
    $('#verscrolmenu li').click(function () {   
//Make LI clickable
        window.location = $(this).find('a').attr('href');
       
    }).mouseover(function (){
       
//mouse over LI and look for A element for transition
        $(this).find('a')
        .animate( { paddingLeft: padLeft, paddingRight: padRight}, { queue:false, duration:100 } )
        .animate( { backgroundColor: colorOver }, { queue:false, duration:200 });

    }).mouseout(function () {
   
//mouse oout LI and look for A element and discard the mouse over transition
        $(this).find('a')
        .animate( { paddingLeft: defpadLeft, paddingRight: defpadRight}, { queue:false, duration:100 } )
        .animate( { backgroundColor: colorOut }, { queue:false, duration:200 });
    });   
   
//Scroll the menu on mouse move above the #gridmenu layer
    $('#gridmenu').mousemove(function(e) {

//Gridmenu Offset, Top value
        var s_top = parseInt($('#gridmenu').offset().top);       
       
//Gridmenu Offset, Bottom value
        var s_bottom = parseInt($('#gridmenu').height() + s_top);
   
//Roughly calculate the height of the menu by multiply height of a single LI with the total of LIs
        var mheight = parseInt($('#verscrolmenu li').height() * $('#verscrolmenu li').length);
           
//Calculate the top value
//This equation is not the perfect, but it 's very close   
var top_value = Math.round(( (s_top - e.pageY) /100) * mheight / 2);
       
//Animate the #menu by chaging the top value
$('#verscrolmenu').animate({top: top_value}, { queue:false, duration:500});
});
});   
</script>

Selamat mencoba dan silahkan berkreasi sendri agar tampilan vertical menu ini terlihat lebih menarik! Goodluck guys ^^

Hallo sobat blogger, Sudah lama yaa sy gk update tutorial blogger? :D
oke pada kesemptan kli ini saya akan berbagi tutorial lgi nih, yaitu cara membuat 'FixedNavigation and Back to Top With jQuery', sebenar'nya sy juga gk tau persis judul apa yg tepat untuk trik ini, tp setidaknya gk jauh beda lah ama hasilnya.hehee....

Sebelum saya melanjutkan tutorial ini, sy akan mencoba jelaskan sedikit mengenai cara kerja tutorial ini, jadi selain dilengkapi dengan fitur 'back to top' fixednavigation ini jg memiliki menunavigation tambhan, dimana pada saat anda melakukan scroll di blog, mka fitur ini akan muncul dan menampilkan menunavigation + Back To Top!
dan untuk contohnya sobat bisa lihat di themes 'JKT48 REV' disini, dan perhatikan menu dibagian atas yang akan kluar jika anda mencoba scroll..

Baiklah jika sobat tertarik membuatnya silahkan ikuti langkah-langkah berikut:

/* FixedMenuNavigation */
#go_headerFixedNavigation{width:100%;background:#222F63;text-shadow:0 0 1px #fff;position:fixed;display:none;top:0px;z-index:99999;height:31px;overflow:hidden;font-family:'arial',Helvetica,Arial;}
#go_headerFixedNavigation ul#go_mainNav {margin:0;list-style:none;padding:0;float:left}
#go_headerFixedNavigation ul#go_mainNav li{margin:0;padding:0;float:left}
#go_headerFixedNavigation ul#go_mainNav li a{display:block;padding:4px 8px;text-decoration:none;}
#go_headerFixedNavigation ul#go_mainNav li a:hover{background:#f8f8f8}
#go_headerFixedNavigation nav#go_leftNav{}
#go_headerFixedNavigation nav#go_rightNav{float:right}
#go_headerFixedNavigation nav#go_rightNav a{display:block;background:#cf0404;height:19px;padding:7px 22px 5px 23px}
#go_headerFixedNavigation nav#go_rightNav a:hover{background:#f7f7f7;color:#888;}
#go_headerFixedNavigation ul#go_mainNav li a{font-family:'Oswald',Helvetica,Arial;font-size:140%;color:#ddd;text-transform:uppercase}
#go_headerFixedNavigation ul#go_mainNav li a:hover{color:#888;}
#go_headerFixedNavigation nav#go_rightNav a{font-size:120%;text-transform:uppercase;color:#fff}
#go_headerFixedNavigation nav#go_rightNav a:hover{text-decoration:underline}

4. Selanjutnya cari kode </head> , lalu letakkan script berikut tepat diatasnya :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

<script language='JavaScript' type='text/javascript'>
$(document).ready(function () {
  var top = $(&#39;#go_bottomLine&#39;).position().top;
  $(window).scroll(function (event) {
    var y = $(this).scrollTop();
     if (y &gt;= top) {
        if(!$(&#39;#go_headerFixedNavigation&#39;).hasClass(&#39;open&#39;)) {
            $(&#39;#go_headerFixedNavigation&#39;).addClass(&#39;open&#39;);
            $(&#39;#go_headerFixedNavigation&#39;).slideDown(&#39;fast&#39;);
        }
    } else {
        if($(&#39;#go_headerFixedNavigation&#39;).hasClass(&#39;open&#39;) ){
            $(&#39;#go_headerFixedNavigation&#39;).removeClass(&#39;open&#39;);
            $(&#39;#go_headerFixedNavigation&#39;).slideUp(&#39;fast&#39;);
}}
});
$('.go_backTopButton').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
</script>

5. Selanjutnya cari kode <body> , lalu letakkan kode berikut dibawahnya :

<div id='go_headerFixedNavigation'>
<nav id='go_leftNav'>
<ul id='go_mainNav'>
<li><a expr:href='data:blog.homepageUrl'>Portal</a></li>
<li><a href='#LINK-HERE'>Forum</a></li>
<li><a href='#LINK-HERE'>Blog</a></li>
<li><a href='#LINK-HERE'>Archive</a></li>
<li><a href='#LINK-HERE'>Store</a></li>
<li><a href='#LINK-HERE'>Files</a></li>
<li><a href='#LINK-HERE'>Search</a></li>
<li><a href='#LINK-HERE'>Members</a></li>
</ul></nav>
<nav id='go_rightNav'>
<a class='go_backTopButton' href='#' title='Top'>Back to Top</a>
</nav>
</div>

6. Selanjutnya cari kode <div id='header-wrapper'> , lalu letakkan kode berikut ini diatas/dibawah nya :

<div id='go_bottomLine'/>

7. Langkah terakhir Priview dlu, jika tidak terjadi kesalahan, baru deh sobat save template.

Assalamu Alaikum. Wr.Wb..
Baiklah pada kesempatan kali ini saya akan berbagi lagi mengenai cara membuat 'Menu Horizontal Lavalamp Special Dark + Search Forum', dimana pada postingan saya yang lalu pernah juga membahas :

1. Menu Horizontal Dark With Sound jQuery Ala UTta'. dan
2. Menu Horizontal Dark Lavalamp With jQuery.

Jika sobat tertarik ingin mencobanya, silahkan ikuti langkah-langkah berikut.
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode : ]]></b:skin> , Jika Sudah Ketemu, letakkan Kode CSS berikut tepat diatasnya.

/* lavalampv2_ut menu */
.lavalampv2_ut {margin:0;
    position: relative;
    padding:15px;
 height: 20px;
font-family: PT Sans Narrow;
}
.lavalampv2_ut a {font-weight:bold;
text-transform:uppercase;font-weight:bold;
    color: #aaa;font-size:14px;
    line-height: 20px;
}
.lavalampv2_ut a:hover {
color:#fff;text-shadow: 0 1px 0 #000;
    }
.lavalampv2_ut ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}
.lavalampv2_ut ul li {
    list-style: none;
    float:left;
    text-align: center;
    }
.lavalampv2_ut ul li a {
    padding: 0 20px;
    text-align: center;
    }
.akautlamp {
    position: absolute;
    top:8px;
    z-index:50;
    width:70px;
    height:30px;
-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;
background : rgba(5,171,224, 0.8);border:1px solid rgba(5,171,224,0.9);
transition: all .4s ease-in-out;-webkit-transition: all .4s ease-in-out;-moz-transition: all .4s ease-in-out;
}
.sepecialdark {background: rgb(30,30,30);background:-moz-linear-gradient(top, rgba(30,30,30,1) 0%, rgba(15,15,15,1) 100%);
background:-webkit-linear-gradient(top, rgba(30,30,30,1) 0%, rgba(15,15,15,1) 100%);border: 1px solid rgba(0,0,0,.20);
}

/* e-searchbox */
#e-searchbox{float:right;padding:0;margin-top:-6px;}
#search {}
#search input[type="text"] {background:rgba(5,171,224, 0.8) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvhbYED7rjmMdp9NK7aLoK5Ua0Hc-d5PhWBue_G5seBNZi84xD7a4xCARtIULW8sevYf8qf-T0iq38Gvygiw1LKfxxbXI9o2Vu7FscOgmR0q8iBnhwh7u0y_OeUE0oTVwT4z7Rxw0xFNo/s1600/cari.png) no-repeat 10px 6px;font:normal 12px century gothic;color:#ddd;width:150px;padding:6px 15px 6px 35px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;
border:1px solid rgba(5,171,224,0.9);-webkit-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.8s ease 0s;-moz-transition: all 0.8s ease 0s;-o-transition: all 0.8s ease 0s;transition: all 0.8s ease 0s;}

#search input[type="text"]:focus {background:rgba(0, 0, 0, 0.5) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvhbYED7rjmMdp9NK7aLoK5Ua0Hc-d5PhWBue_G5seBNZi84xD7a4xCARtIULW8sevYf8qf-T0iq38Gvygiw1LKfxxbXI9o2Vu7FscOgmR0q8iBnhwh7u0y_OeUE0oTVwT4z7Rxw0xFNo/s1600/cari.png) no-repeat 10px 6px;width:190px;border:1px solid rgba(5,171,224,0.9);
-webkit-box-shadow:inset 0px 1px 4px rgba(5,171,224,1);-moz-box-shadow:inset 0px 1px 4px rgba(5,171,224,1);box-shadow:inset 0px 1px 4px rgba(5,171,224,1);}

5. Langkah selanjutnya letakkan kode script berikut diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://ut2a-4down-blogspot-com.googlecode.com/files/lavalamp_specialdark.js' type='text/javascript'/>

6. Selanjutnya letakkan kode berikut, di atas kode header-wrapper (sesuaikan template) Masing-masing :

<div class='lavalampv2_ut sepecialdark'>
<ul>
<li class='active'><a href='/'><span style='color:#eee;text-shadow:0 1px 0 #000;'>Home</span></a></li>
<li><a href='URL-HERE'>Forum</a></li>
<li><a href='/search?max-results=20'>Archive</a></li>
<li><a href='URL-HERE'>SiteMap</a></li>
<li><a href='URL-HERE'>Contact</a></li>
<li><a href='URL-HERE'>Link Exchange</a></li>
<li><a href='URL-HERE'>Guest Book</a></li>
</ul>
 <div class='akautlamp'/>

<div id='e-searchbox'><form action='/search' id='search' method='get'>
<input name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Find article here&quot;;}' onfocus='if (this.value == &quot;Find article here&quot;) {this.value = &quot;&quot;;}' size='40' type='text' value='Find article here'/>
</form></div>

</div>

7. Silahkan anda priview dulu, apabila semua berjalan dengan sempurna barulah anda save template.

Selamat mencoba, dan kembangkan sesuai keinginan masing-masing... :)

Jika ada pertanyaan jangan sungkan untuk meninggalkan jejak di kotak komentar trim atas kunjungannya ^_^

Baiklah pada kesempatan kali ini saya akan memberikan tutorial blogger yaitu cara membuat 'Menu Horizontal Dark Lavalamp With jQuery', dimana pada postingan saya yang lalu pernah juga memberikan Cara Membuat 'Menu Horizontal Dark With Sound jQuery Ala UTta'.

Jika sobat ingin melihat contohnya silahkan klik disini.

Jika sobat tertarik ingin mencobanya, silahkan ikuti langkah-langkah berikut.
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode : ]]></b:skin> , Jika Sudah Ketemu, letakkan Kode CSS berikut tepat diatasnya.

/* Lavalamp-Menu */
.sf-menu li:hover ul, .sf-menu li.sfHover ul { top: 2.5em; z-index: 400; }
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; z-index: 400; }
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { top: 0; }
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top:    -999em; }
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { top: 0; }
.sf-menu { position: relative; margin:0 5px 5px; padding:0; list-style: none;clear:both; float: left;margin-bottom:1em; background: url('url') no-repeat;border-bottom:3px solid #111;border-top:3px solid #111;width: 960px; z-index: 400; }
.sf-menu a { display: block; position: relative; text-decoration:none; color: #fff; padding:15px 10px 0px 10px; height:30px; text-decoration: none; text-shadow: 1px 1px 1px #000; font-size:15px;font-weight: normal; float :left; }
.sf-menu li { float: left; position: relative;font-family:Advent Pro,serif;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR4svh7RuGulcNGsdFFayoLnSYFGdQXpG7RyEbAu4giThPjS7o19yzHnQ7V-JL8-xPFWo8n21uy2NoWkW3z6TKQUPTmOAkwYh_yGmLbS8gHqa7F6SwKodbW941Zbawd-PELLb265fpNdo/') no-repeat; }
.sf-menu li ul li ul { left: 212px; margin-top: 0px;}
.sf-menu li a:hover {color: #00b4ff; }
.sf-menu li:hover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {background:rgba(5,5,5,0.55);outline: 0; }
ul.sf-menu li.backLava { position: absolute; z-index: 3; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCN3BUagyV5nReVlaLAI3lYAREcQchOr8sr3cO0TekmCbsUbXqVC8I2EqIYsHVIYRqA6hnHF5pkxq07eripo6lU7khU2STZks_QSqcmyU8u7V7v5zR1ewmU6tvYyr5FZCU7o6iKRBjyL0/') no-repeat; background-position: center 0px; padding: 0; height: 16px; margin-top: 42px;}

5. Langkah selanjutnya letakkan kode script berikut diatas kode </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<script charset='utf-8' src='http://javatemplates-project.googlecode.com/files/jquery.lavalamp.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(function(){
        jQuery.noConflict();
        var active_subpage = jQuery('ul.sf-menu ul li.current-cat, ul.sf-menu ul li.current_page_item').parents('li.top-level').prevAll().length;
        if (active_subpage) jQuery('ul.sf-menu').lavaLamp({ startItem: active_subpage });
        else jQuery('ul.sf-menu').lavaLamp();           
        });
//]]>
</script>

6. Selanjutnya letakkan kode berikut, di bawah kode Head-nav (sesuaikan template) Masing-masing :

<!-- Start Menu Lavalamp -->
<ul class='sf-menu'>
<li><a expr:href='data:blog.homepageUrl' style='background:#000;color:#00b4ff;'>Home</a></li>
<li><a href='URL-HERE' target='_blank' title='Site Maps'>Site Maps</a></li>
<li><a href='URL-HERE' target='_blank' title='Tips-Triks'>Tips-Triks</a></li>
<li><a href='URL-HERE' target='_blank' title='Handphone'>Handphone</a></li>
<li><a href='URL-HERE' target='_blank' title='Info UniQx'>Info UniQx</a></li>
<li><a href='URL-HERE' target='_blank' title='Entertainment'>Entertainment</a></li>
<li><a href='URL-HERE' target='_blank' title='Blogger Template'>Blogger Template</a></li>
<li><a href='URL-HERE' target='_blank' title='TV Online'>TV Online</a></li>
<li><a href='URL-HERE' target='_blank' title='Link Banner'>Link Exchange</a></li>
<li><a href='URL-HERE' target='_blank' title='Buku Tamu'>Guest Book</a></li>
</ul>
<div style='clear:both;'/>

7. Silahkan anda priview dulu, apabila semua berjalan dengan sempurna barulah anda save template.

Selamat mencoba, dan kembangkan sesuai keinginan masing-masing... :)

Jika ada pertanyaan jangan sungkan untuk meninggalkan jejak di kotak komentar trim atas kunjungannya ^_^

Baiklah Pada kesempatan kali ini saya akan mencoba memberikan tutorial cara 'Membuat Menu Ribbon Menggunakan CSS', dimana pada postingan saya yang lalu pernah juga memberikan beberapa menu navigasi keren yaitu 'Menu Navigasi Horizontal Dropdown Bag.3'. menu ribbon ini memang terlihat sederhana. tetapi ketika cursor di arahkan ke menu tersebut maka akan terlhat lebih menarik. baiklah jika penasaran, silahkan arahkan kursor sobat ke menu ribbon dibawah ini.. :D


Gimana??? keren kan.hehee,.. untuk membuatnya sangat mudah koq, berikut ini kode yang di gunakan.

HTML::

<div class='ribbon'>
    <a href='#'><span>Home</span></a>
    <a href='#'><span>About</span></a>
    <a href='#'><span>Services</span></a>
    <a href='#'><span>Contact</span></a>
</div>

CSS::

.ribbon:after, .ribbon:before {
    margin-top:0.5em;
    content: "";
    float:left;
    border:1.5em solid #fff;
}

.ribbon:after {
    border-right-color:transparent;
}

.ribbon:before {
    border-left-color:transparent;
}
.ribbon a:link, .ribbon a:visited {
    color:#000;
    text-decoration:none;
    float:left;
    height:3.5em;
    overflow:hidden;
}
.ribbon span {
    background:#fff;
    display:inline-block;
    line-height:3em;
    padding:0 1em;
    margin-top:0.5em;
    position:relative;

    -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
    -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
    -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
    -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
    transition: background-color 0.2s, margin-top 0.2s;
}

.ribbon a:hover span {
    background:#FFD204;
    margin-top:0;
}

.ribbon span:before {
    content: "";
    position:absolute;
    top:3em;
    left:0;
    border-right:0.5em solid #9B8651;
    border-bottom:0.5em solid #fff;
}

.ribbon span:after {
    content: "";
    position:absolute;
    top:3em;
    right:0;
    border-left:0.5em solid #9B8651;
    border-bottom:0.5em solid #fff;
}

Jgn malu tuk meninggalkan komentar sobat jika msh kurang paham.OKE..!! Good luck.

Wow,.. Menu lagi,.. menu lagi,..hehee,..
oia lagsung sj yah, ini menu horizontal bag.3 ala akaUTta', dan silahkan lihat menu horizontal dropdown sy sebelumnya:
1. Menu Navigasi Horizontal Dropdown
2. Menu Navigasi Horizontal Dropdown Bag.2
yaa,.. itu klw sobat tdk tertrik mencoba menu yang ini. :D

Baiklah saya tdk akan byk menjelaskan pada tutorial saya kali ini: :D
dan dibawah ini adlah contohnya:

Masih Kurang puas?? silahkan lihat demonya disini..

Mari saya tunjukkan bagaimana cara membuat menu tersebut.

::HTML::

<!-- Horizontal Dropdown START -->
<div class='navaka'>
<ul>
<li><a href='/'>Home</a></li>
<li class='sub'><a href=''>Category</a>
<ul>
<li class='sub'><a href=''>AntiVirus</a>
<ul>
<li><a href='URL-HERE'>Avast</a></li>
<li><a href='URL-HERE'>Avira</a></li>
<li><a href='URL-HERE'>Eset</a></li>
<li><a href='URL-HERE'>Kaspersky</a></li>
<li><a href='URL-HERE'>Norton</a></li>
<li><a href='URL-HERE'>PCmaV</a></li>
<li><a href='URL-HERE'>Smadav</a></li>
</ul>
</li>
<li><a href='URL-HERE'>Cheat Game </a></li>
<li><a href='URL-HERE'>Game </a></li>
<li><a href='URL-HERE'>Hardware</a></li>
<li><a href='URL-HERE'>Turtorial komputer</a></li>
<li><a href='URL-HERE'>W 7 Themes </a></li>
<li class='sub'><a href=''>Printer</a>
<ul>
<li><a href='URL-HERE'>Canon</a></li>
<li><a href='URL-HERE'>Epson</a></li>
<li><a href='URL-HERE'>HP</a></li>
</ul>
</li>
</ul>
</li>
<li class='sub'><a href=''>Blogger Trick</a>
<ul>
<li><a href='URL-HERE'>CSS</a></li>
<li><a href='URL-HERE'>jQuery</a></li>
<li><a href='URL-HERE'>Javascript</a></li>
<li><a href='URL-HERE'>Widget</a></li>
</ul></li>
<li><a href='URL-HERE' target='_blank'>Pasang Iklan</a></li>
<li><a href='URL-HERE' target='_blank'>Request</a></li>
<li class='sub'><a href=''>Follow Me</a>
<ul>
<li><a href='URL-HERE'>on Facebook</a></li>
<li><a href='URL-HERE'>on Twitter</a></li>
</ul></li>
<li><a href='URL-HERE'>Tukar Banner</a></li>
<li><a href='URL-HERE'>Tukar Link Otomatis</a></li>
</ul>
</div>
<!-- Horizontal Dropdown END -->

::CSS::

/*Horizontal Dropdown*/
.navaka{
font:bold 16px Calibri,Arial,Sans-Serif;
max-width:100%;margin-bottom:5px;
}
.navaka *{margin:0 0 0 0;padding:0 0 0 0;list-style:none;}
.navaka ul{
background:#DE9000;
background:-webkit-linear-gradient(top, #E9A72E, #DE9000);
background:-moz-linear-gradient(top, #E9A72E, #DE9000);
background:-ms-linear-gradient(top, #E9A72E, #DE9000);
background:-o-linear-gradient(top, #E9A72E, #DE9000);
background:linear-gradient(top, #E9A72E, #DE9000);
height:40px;
-webkit-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.1), inset 0px 2px 0px rgba(255,255,255,0.2), 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.1), inset 0px 2px 0px rgba(255,255,255,0.2), 0px 1px 3px rgba(0,0,0,0.4);
box-shadow:inset 0px 1px 0px rgba(0,0,0,0.1), inset 0px 2px 0px rgba(255,255,255,0.2), 0px 1px 3px rgba(0,0,0,0.4);
}
.navaka li{float:left;display:inline;}
.navaka li a{
padding:0px 15px;
line-height:40px;
color:#111;
text-shadow:0px 1px 0px rgba(255,255,255,0.3);
display:block;
text-decoration:none;
-webkit-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1), inset -1px 0px 0px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1), inset -1px 0px 0px rgba(0,0,0,0.1);
box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1), inset -1px 0px 0px rgba(0,0,0,0.1);
}
.navaka li a:hover{
-webkit-box-shadow:inset 0px 0px 30px rgba(0,0,0,0.2);
-moz-box-shadow:inset 0px 0px 30px rgba(0,0,0,0.2);
box-shadnw:inset 0px 0px 30px rgba(0,0,0,0.2);
color:#eee;text-shadow:0px -1px 1px #000;
}
.navaka li a:active{
background:#E9A72E;
background:-webkit-linear-gradidnt(bottom, #E9A72E, #DE9000);
background:-moz-linear-gradient(bottom, #E9A72E, #DE9000);
background:-ms-linear-gradient(bottom, #E9A72E, #DE9000);
background:-o-linear-gradient(bottom, #E9A72E, #DE9000);
background:linear-gradient(bottom, #E9A72E, #DE9000);
}
.navaka li ul{
display:block;
width:170px;
position:absolute;
left:auto;
z-index:10;
visibility:hidden;
opacity:0;
height:auto;
-webkit-transition:all 0.26s ease-out 0.2s;
-moz-transition:all 0.26s ease-out 0.2s;
-ms-transition:all 0.26s ease-out 0.2s;
-o-transition:all 0.26s ease-out 0.2s;
transition:all 0.26s ease-out 0.2s;
}
.navaka li li{
display:block;
float:none;
width:100%;
}
.navaka li:hover > ul{
visibility:visible;
width:200px;opacity:1;
}
.navaka li li ul{
left:200px;
margin-top:-40px;
}
.navaka li.sub > a{
position:relative;
padding-right:30px;
}
.navaka li.sub > a:after{
content:"";
width:0px;
height:0px;
border-width:4px;
border-style:solid;
border-color:#fff transparent transparent transparent;
position:absolute;
top:20px;
right:10px;
}
.navaka li.sub li.sub > a:after{
content:"";
width:0px;
height:0px;
border-width:4px;
border-style:solid;
border-color:transparent transparent transparent #fff;
position:absolute;
top:16px;
right:10px;
}
.clear{clear:both;}

- kode CSS Menu di atas mungkin kurang menarik bagi sobat, tetapi untuk seorang ‘beginner’ seperti saya sudah cukup lumayan….he..he..he…
dan jgn malu tuk meninggalkan komentar sobat jika msh kurang paham.OKE..!! Good luck