Menu Horizontal alaTemplate Dynamic View

Jika anda pernah menggunakan template dynamic view, anda pasti akan mengenali horizontal dropdown menu yang disertakan di dalamnya. Menu ini sangat sedrhana namun cukup menarik untuk digunakan sebagai pelengkap blog. Jika di Template dynamic view atau tampilan dynamis mungkin dibuat menggunakan javascript, dalam dropdown menu yang akan kita buat hanya menggunakan kode css. Anda bisa melihat bentuk dan tampilan serta cara kerja menu ini dengan mengarahkan cursor anda di atas posting, di bawah header blog.

Kode CSS

<style type="text/css">
#myGRtabmenu ul,#myGRtabmenu ul li,#myGRtabmenu ul li a{
      padding:0;
      margin:0;
      list-style-type:none;
}
#myGRtabmenu{
      height:30px;
      position:relative;
      background:rgba(0,0,0,.8);
      text-align:left;
      line-height:30px;
      box-shadow:0 2px 2px #999;
      margin:0;
      font-family:Arial, sans-serif;
}
#myGRtabmenu span{
      position:relative;
      display:block;
      width:150px;
      float:left;
}
#myGRtabmenu span a{
      font-size:16px;
      padding:0 10px;
      text-decoration:none;
      color:#ddd;
}
#myGRtabmenu span:after{
      position:absolute;
      display:block;
      content:"";
      width:1px;
      background:#aaa;
      height:20px;
      top:5px;
      right:0;
}
#myGRtabmenu span:before{
      position:absolute;
      display:block;
      content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe6-z-J_rXB1ujX_J9nPPy5UjeMSqRYNPTbm7ugyOhwqExpxDdGudNfDaQhbFfYFmoRzMPYYJVSKngP0c4se1KLXQJevGgYxgH1_CcnVGfUtuVVOFeCAoCFYoNVwXsp9Pf-0dptFwVfrU/);
      color:#fff;
      top:14px; /* by: http://gubhugreyot.blogspot.com, 18 Agust 2012 */
      right:5px;
      transition:0.4s;
      -o-transition:0.4s;
      -ms-transition:0.4s;
      -moz-transition:0.4s;
      -webkit-transition:0.4s;
}
#myGRtabmenu span:hover:before{
      transform:rotate(180deg);
      -o-transform:rotate(180deg);
      -ms-transform:rotate(180deg);
      -moz-transform:rotate(180deg);
      -webkit-transform:rotate(180deg);
      top:12px; 
}
#myGRtabmenu span ul{
      position:absolute;
      left:0; /* by: http://gubhugreyot.blogspot.com, 18 Agust 2012 */
      top:31px;
      text-align:left;
      float:left;
      width:150px;
      max-height:0px;
      overflow:hidden;
      transition:0.6s ease-in 0.2s;
      -o-transition:0.6s ease-in 0.2s;
      -ms-transition:0.6s ease-in 0.2s;
      -moz-transition:0.6s ease-in 0.2s;
      -webkit-transition:0.6s ease-in 0.2s;
      background:rgba(0,0,0,.6);
}
#myGRtabmenu span:hover ul{
      z-index:999;
      max-height:600px;
      background:rgba(0,0,0,.6);
}
#myGRtabmenu span:hover ul, #myGRtabmenu ul li, #myGRtabmenu span a, #myGRtabmenu span a:visited,#myGRtabmenu ul li a{
      transition:1.0s;
      -o-transition:1.0s;
      -ms-transition:1.0s;
      -moz-transition:1.0s;
      -webkit-transition:1.0s;
}
#myGRtabmenu ul li{
      display:block;
      width:140px;
      overflow:hidden;
      border-bottom:1px dotted rgba(0,0,0,.1);
      line-height:18px;
      padding:5px;
}
#myGRtabmenu ul li:hover{
      background:rgba(0,0,0,.6);
}
#myGRtabmenu ul li a{
      font-size:14px;
      color:#eee;
      display:block;
      font-family:Arial, sans-serif;
      font-weight:normal;
      text-decoration:none;
}
#myGRtabmenu span a:visited{
      color:#999; /* by: http://gubhugreyot.blogspot.com, 18 Agust 2012 */
}
#myGRtabmenu ul li a:visited{
      color:#ddd;
}
#myGRtabmenu span a:hover{
      text-decoration:none;
}
#myGRtabmenu span a:hover,#myGRtabmenu ul li a:hover{
      color:#fff;
      text-decoration:underline;
}
</style>

xHTML

<div id="myGRtabmenu"><span><a href="#">My Blog</a>
<ul>
    <li><a href="http://gubhugreyot.blogspot.com">gubhugreyot</a></li>
    <li><a href="http://bgsgr.blogspot.com">css3 Tutorial & Demo</a></li>
    <li><a href="http://gubhugreyot-demo-tutorial-1.blogspot.com">Demo Tutorial-1</a></li>
    <li><a href="http://gubhugreyot-demo-tutorial-2.blogspot.com">Demo Tutorial-2</a></li>
    <li><a href="http://lightbox-demo-tutorial.blogspot.com">Lightbox for Blogger</a></li>
    <li><a href="http://tantytm.blogspot.com">Modifikasi Blog</a></li>
    <li><a href="http://gubhugreyot.blogdetik.com">gubhugreyot-blogdetik</a></li>
    <li><a href="http://bloggerstuars.blogspot.com">Bloggerstars1</a></li>
    <li><a href="http://gitosimin.blogspot.com">Mas Gitosamin</a></li>
    <li><a href="http://bestbloggerhack.blogspot.com">Best Blogger Hacks</a></li>
    <li><a href="http://css3-tutorial-demo.blogspot.com/">Tutorial css3, Demo Tips & Trick</a></li>
</ul></span>
<span><a href="#">Seni &amp; Budaya</a>
<ul>
    <li><a href="http://gubhugreyot.blogspot.com">Kuda Lumping</a></li>
    <li><a href="http://bgsgr.blogspot.com">Reyog Ponorogo</a></li>
    <li><a href="http://gubhugreyot-demo-tutorial-1.blogspot.com">Tari Seudati</a></li>
    <li><a href="http://gubhugreyot-demo-tutorial-2.blogspot.com">Barongsai</a></li>
    <li><a href="http://lightbox-demo-tutorial.blogspot.com">Tari Tor Tor</a></li>
    <li><a href="http://tantytm.blogspot.com">Tari Pendet</a></li>
    <li><a href="http://gubhugreyot.blogdetik.com">Wayang Orang</a></li>
    <li><a href="http://bloggerstuars.blogspot.com">Kethoprak</a></li>
    <li><a href="http://gitosimin.blogspot.com">Ludruk</a></li>
    <li><a href="http://bestbloggerhack.blogspot.com">Wayang Kulit</a></li>
</ul></span>
<span><a href="http://bestbloggermenus.blogspot.com">Home</a></span>
<span><a href="http://gubhugreyot.blogspot.com" target="_blank">gubhugreyot</a></span>
</div>