Horizontal Dropdown menu mungkin udah banyak di Posting oleh master - master Blog yang lainya, tapi tidak ada salahnya saya akan berbagi tips kepada saudara - saudaraku sebangsa dan setanah air, mungkin saja tabrakan pena saya lebih gampang untuk dipahami....hehehhe, Buat yang masih bingung perihal apa itu Horizontal Dropdown Menu, liat aja gambar dibawah ini :
Ada foto saya-nya ya....!!!...hehehihihihuhuhuhu..... dikit nampang gpp deh, tapi bukan foto saya lho yang namanya Horizontal Dropdown Menu, Tapi sajian yang berjejer dari kiri kekanan secara Horizontal dan jikalau disorot salah satu menunya akan keluar Sub Menu didalamnya. Horizontal Dropdown Menu ini memakai CSS jadi tidak menciptakan lambat loading blog, akan tetapi tidak berjalan normal di Ie6 kebawah. Sekedar memberitahu aja jikalau Menu tersebut sudah tak pasang di Blog saya yang memakai template klasik. Jika Saudara - saudaraku sebangsa dan setanah air ingin membuatnya, silahkan ikuti langkah berikut :
1. Login Blog Anda, lalu pilih Tab Menu Template
2. Cari isyarat </head>
3. Copykan isyarat berikut :
/*---------------------
menufs3 ateonsoft.com
------------------------*/
#menufs3-wrapper {width:100%; height:27px; background: #E67817 url('http://i283.photobucket.com/albums/kk304/fays_alfahrus/judul6.png') repeat-x top left;
border-top:0px solid #FFE394; padding-left:0px; margin-bottom:9px; overflow:hidden}
#menufs3-wrapper h2 {width:100%; height:27px; background: #E67817 url('http://i283.photobucket.com/albums/kk304/fays_alfahrus/judul6.png') repeat-x top left;
border-top:0px solid #FFE394; padding-left:0px; margin-bottom:9px; overflow:hidden}
#menufs3, #menufs3 ul {padding: 0px; margin: 0; list-style: none; font: normal 0.95em arial; color:#fff;}
#menufs3 a {display: block;text-decoration: none; border-right: 1px solid #E67817; border-left: 1px solid #FFE394; color: #fff;
background: #FFE394 url('http://i283.photobucket.com/albums/kk304/fays_alfahrus/judul6.png') repeat-x top left;; padding-left:9px; padding-right:9px; padding-top:6px; padding-bottom:7px}
#menufs3 a.awal {padding: 0px; border-left: 0px none;width: 90px; height:27px;
background: #E67817 url('http://i283.photobucket.com/albums/kk304/fays_alfahrus/judul6.png') no-repeat;}
#menufs3 a.awal:hover{background: #E67817 url('http://i283.photobucket.com/albums/kk304/fays_alfahrus/judul6.png') no-repeat;}
#menufs3 a.awal em {width:100%; height:27px; background: #E67817 url('http://i283.photobucket.com/albums/kk304/fays_alfahrus/judul6.png') repeat-x top left;
border-top:1px solid #FFE394; padding-left:0px; margin-bottom:9px; overflow:hidden}
#menufs3 a.IndukMenu {font-weight:bold; text-transform:uppercase;}
#menufs3 a.akhir {padding: 0px; border-left: 0px none; border-right: 0px none; width: 27px; height:27px;
background: #FFE394 url('http://i283.photobucket.com/albums/kk304/fays_alfahrus/judul6.png') no-repeat;}
#menufs3 a.akhir:hover {background: #E67817 url('http://i283.photobucket.com/albums/kk304/fays_alfahrus/judul6.png') no-repeat;}
#menufs3 a.akhir em {width:100%; height:27px; background: #E67817 url('http://i283.photobucket.com/albums/kk304/fays_alfahrus/judul6.png') repeat-x top left;
border-top:1px solid #FFE394; padding-left:0px; margin-bottom:9px; overflow:hidden}
#menufs3 li {float: left;width: 9em;}
#menufs3 li.akhir{border-left: 1px solid #FFE394; height:27px; width: 1px; padding: 0px}
#menufs3 li.akhir em{width:100%; height:27px; background: #E67817 url('http://i283.photobucket.com/albums/kk304/fays_alfahrus/judul6.png') repeat-x top left;
border-top:1px solid #FFE394; padding-left:0px; margin-bottom:9px; overflow:hidden}
#menufs3 li.kanan{float: right; border-left: 0px none;}
#menufs3 li ul, #menufs3 ul li {width: 14em;}
#menufs3 ul li a {color: #E67817;border-left: 0px none; border-right: 0px none; padding-left:5px; padding-right:5px; padding-top:5px; padding-bottom:5px}
#menufs3 li ul {position: absolute; display: none; background-color: #E67817; z-index:200;border-right: 0px solid #141414; border-left: 0px solid
#141414;
border-bottom: 1px solid #fff; margin-left:-1px;text-align: left;}
#menufs3 li:hover a, #menufs3 a:focus, #menufs3 a:active{color: #ffff00; background-color: #E67817;
background-image:url('http://i283.photobucket.com/albums/kk304/fays_alfahrus/judul6.png'); background-repeat:repeat-x}
#menufs3 li:hover ul{display: block;}
#menufs3 li:hover ul a{color: #fff; border-top:1px solid #fff; background-image:url('none');}
#menufs3 ul a:hover {background-color: #FFE394!important;color: #E67817!important;}
#menufs3 li {width: auto;}
Tepat diatas isyarat </head>
3. Kemudian Copykan Code berikut di Sidebar anda :
<div id="menufs3-wrapper">
<ul id="menufs3">
<li><a class="IndukMenu" href="https://tutorialdasar404.blogspot.com/" title="Horizontal Dropdown Menu dengan CSS"><b>Halaman Depan</b></a>
<li><a class="IndukMenu" href="#" title="Horizontal Dropdown Menu dengan CSS"><b>Design Grafis</b></a>
<ul>
<li> <li><a href="https://tutorialdasar404.blogspot.com//search/label/Adobe%20Photoshop"><b>Adobe Photoshop</b></a></li>
<li><a href="https://tutorialdasar404.blogspot.com//search/label/Corel%20Draw"><b>Corel Draw</b></a></li>
</ul>
<li><a class="IndukMenu" href="https://tutorialdasar404.blogspot.com/" title="Horizontal Dropdown Menu dengan CSS"><b>Microsoft Office</b></a>
<ul>
<li>
<a href="https://tutorialdasar404.blogspot.com//search/label/Microsoft%20Word"><b>Microsoft Word</b></a>
</li>
<li>
<a href="https://tutorialdasar404.blogspot.com//search/label/Microsoft%20Excel"><b>Microsoft Excel</b></a>
</li>
<li>
<a href="https://tutorialdasar404.blogspot.com//search/label/Microsoft%20Word"><b>Microsoft Access</b></a>
</li>
<li>
<a href="https://tutorialdasar404.blogspot.com//search/label/Microsoft%20Word"><b>Microsoft Power Point</b></a>
</li>
<li>
<a href="https://tutorialdasar404.blogspot.com//search/label/Microsoft%20Word"><b>Microsoft Front Page</b></a>
</li>
</ul>
</li>
<li><a class="IndukMenu" href="https://tutorialdasar404.blogspot.com/" title="Horizontal Dropdown Menu dengan CSS">Web Design</a>
<ul>
<li><a href="https://tutorialdasar404.blogspot.com//search/label/HTML">HTML</a></li>
<li><a href="https://tutorialdasar404.blogspot.com//search/label/CSS">CSS</a></li>
<li><a href="https://tutorialdasar404.blogspot.com//search/label/Java">Java</a></li>
<li><a href="https://tutorialdasar404.blogspot.com//search/label/Tutorial%20Blog">Tutorial Blog</a></li>
</ul>
</li>
<li><a class="IndukMenu" href="https://tutorialdasar404.blogspot.com/" title="Horizontal Dropdown Menu dengan CSS">Komputer Akuntansi</a>
<ul>
<li><a href="https://tutorialdasar404.blogspot.com//search/label/AKUNTANSI">Akuntansi Dasar</a></li>
<li><a href="https://tutorialdasar404.blogspot.com//search/label/MYOB">MYOB</a></li>
</ul>
</li>
<li><a class="IndukMenu" href="https://tutorialdasar404.blogspot.com/" title="Horizontal Dropdown Menu dengan CSS">Tutorial Lain-nya</a>
<ul>
<li><a href="https://tutorialdasar404.blogspot.com//search/label/Linux">Linux</a></li>
<li><a href="https://tutorialdasar404.blogspot.com//search/label/Internet">Internet</a></li>
<li><a href="https://tutorialdasar404.blogspot.com//search/label/Email">Email</a></li>
<li><a href="https://tutorialdasar404.blogspot.com//search/label/Virus">Virus</a></li>
<li><a href="https://tutorialdasar404.blogspot.com//search/label/Tip%20dan%20Trik%20Komputer">Tips & Trik Komputer</a></li>
</ul>
</li>
<li><a class="IndukMenu" href="https://tutorialdasar404.blogspot.com/" title="Horizontal Dropdown Menu dengan CSS">Serba - Serbi</a>
<ul>
<li><a href="https://tutorialdasar404.blogspot.com//search/label/Batik%20Pekalongan">Batik Pekalongan</a></li>
<li><a href="https://tutorialdasar404.blogspot.com//search/label/Curhat">Curhat</a></li>
</ul>
</li>
<li><a class="IndukMenu" href="http://forumblogger.co.cc" target="_blank" title="Horizontal Dropdown Menu dengan CSS">Forum</a>
</ul><!-- end ul menufs3 -->
</div><!-- end menufs3-wrapper -->
4. Silahkan edit sendiri ya, coba - coba aja deh, Pasti bisa kok....
5. Selamat Mencoba.
Sumber http://www.tips-trick.com
Ada foto saya-nya ya....!!!...hehehihihihuhuhuhu..... dikit nampang gpp deh, tapi bukan foto saya lho yang namanya Horizontal Dropdown Menu, Tapi sajian yang berjejer dari kiri kekanan secara Horizontal dan jikalau disorot salah satu menunya akan keluar Sub Menu didalamnya. Horizontal Dropdown Menu ini memakai CSS jadi tidak menciptakan lambat loading blog, akan tetapi tidak berjalan normal di Ie6 kebawah. Sekedar memberitahu aja jikalau Menu tersebut sudah tak pasang di Blog saya yang memakai template klasik. Jika Saudara - saudaraku sebangsa dan setanah air ingin membuatnya, silahkan ikuti langkah berikut :
1. Login Blog Anda, lalu pilih Tab Menu Template
2. Cari isyarat </head>
3. Copykan isyarat berikut :
/*---------------------
menufs3 ateonsoft.com
------------------------*/
#menufs3-wrapper {width:100%; height:27px; background: #E67817 url('http://i283.photobucket.com/albums/kk304/fays_alfahrus/judul6.png') repeat-x top left;
border-top:0px solid #FFE394; padding-left:0px; margin-bottom:9px; overflow:hidden}
#menufs3-wrapper h2 {width:100%; height:27px; background: #E67817 url('http://i283.photobucket.com/albums/kk304/fays_alfahrus/judul6.png') repeat-x top left;
border-top:0px solid #FFE394; padding-left:0px; margin-bottom:9px; overflow:hidden}
#menufs3, #menufs3 ul {padding: 0px; margin: 0; list-style: none; font: normal 0.95em arial; color:#fff;}
#menufs3 a {display: block;text-decoration: none; border-right: 1px solid #E67817; border-left: 1px solid #FFE394; color: #fff;
background: #FFE394 url('http://i283.photobucket.com/albums/kk304/fays_alfahrus/judul6.png') repeat-x top left;; padding-left:9px; padding-right:9px; padding-top:6px; padding-bottom:7px}
#menufs3 a.awal {padding: 0px; border-left: 0px none;width: 90px; height:27px;
background: #E67817 url('http://i283.photobucket.com/albums/kk304/fays_alfahrus/judul6.png') no-repeat;}
#menufs3 a.awal:hover{background: #E67817 url('http://i283.photobucket.com/albums/kk304/fays_alfahrus/judul6.png') no-repeat;}
#menufs3 a.awal em {width:100%; height:27px; background: #E67817 url('http://i283.photobucket.com/albums/kk304/fays_alfahrus/judul6.png') repeat-x top left;
border-top:1px solid #FFE394; padding-left:0px; margin-bottom:9px; overflow:hidden}
#menufs3 a.IndukMenu {font-weight:bold; text-transform:uppercase;}
#menufs3 a.akhir {padding: 0px; border-left: 0px none; border-right: 0px none; width: 27px; height:27px;
background: #FFE394 url('http://i283.photobucket.com/albums/kk304/fays_alfahrus/judul6.png') no-repeat;}
#menufs3 a.akhir:hover {background: #E67817 url('http://i283.photobucket.com/albums/kk304/fays_alfahrus/judul6.png') no-repeat;}
#menufs3 a.akhir em {width:100%; height:27px; background: #E67817 url('http://i283.photobucket.com/albums/kk304/fays_alfahrus/judul6.png') repeat-x top left;
border-top:1px solid #FFE394; padding-left:0px; margin-bottom:9px; overflow:hidden}
#menufs3 li {float: left;width: 9em;}
#menufs3 li.akhir{border-left: 1px solid #FFE394; height:27px; width: 1px; padding: 0px}
#menufs3 li.akhir em{width:100%; height:27px; background: #E67817 url('http://i283.photobucket.com/albums/kk304/fays_alfahrus/judul6.png') repeat-x top left;
border-top:1px solid #FFE394; padding-left:0px; margin-bottom:9px; overflow:hidden}
#menufs3 li.kanan{float: right; border-left: 0px none;}
#menufs3 li ul, #menufs3 ul li {width: 14em;}
#menufs3 ul li a {color: #E67817;border-left: 0px none; border-right: 0px none; padding-left:5px; padding-right:5px; padding-top:5px; padding-bottom:5px}
#menufs3 li ul {position: absolute; display: none; background-color: #E67817; z-index:200;border-right: 0px solid #141414; border-left: 0px solid
#141414;
border-bottom: 1px solid #fff; margin-left:-1px;text-align: left;}
#menufs3 li:hover a, #menufs3 a:focus, #menufs3 a:active{color: #ffff00; background-color: #E67817;
background-image:url('http://i283.photobucket.com/albums/kk304/fays_alfahrus/judul6.png'); background-repeat:repeat-x}
#menufs3 li:hover ul{display: block;}
#menufs3 li:hover ul a{color: #fff; border-top:1px solid #fff; background-image:url('none');}
#menufs3 ul a:hover {background-color: #FFE394!important;color: #E67817!important;}
#menufs3 li {width: auto;}
Tepat diatas isyarat </head>
3. Kemudian Copykan Code berikut di Sidebar anda :
<div id="menufs3-wrapper">
<ul id="menufs3">
<li><a class="IndukMenu" href="https://tutorialdasar404.blogspot.com/" title="Horizontal Dropdown Menu dengan CSS"><b>Halaman Depan</b></a>
<li><a class="IndukMenu" href="#" title="Horizontal Dropdown Menu dengan CSS"><b>Design Grafis</b></a>
<ul>
<li> <li><a href="https://tutorialdasar404.blogspot.com//search/label/Adobe%20Photoshop"><b>Adobe Photoshop</b></a></li>
<li><a href="https://tutorialdasar404.blogspot.com//search/label/Corel%20Draw"><b>Corel Draw</b></a></li>
</ul>
<li><a class="IndukMenu" href="https://tutorialdasar404.blogspot.com/" title="Horizontal Dropdown Menu dengan CSS"><b>Microsoft Office</b></a>
<ul>
<li>
<a href="https://tutorialdasar404.blogspot.com//search/label/Microsoft%20Word"><b>Microsoft Word</b></a>
</li>
<li>
<a href="https://tutorialdasar404.blogspot.com//search/label/Microsoft%20Excel"><b>Microsoft Excel</b></a>
</li>
<li>
<a href="https://tutorialdasar404.blogspot.com//search/label/Microsoft%20Word"><b>Microsoft Access</b></a>
</li>
<li>
<a href="https://tutorialdasar404.blogspot.com//search/label/Microsoft%20Word"><b>Microsoft Power Point</b></a>
</li>
<li>
<a href="https://tutorialdasar404.blogspot.com//search/label/Microsoft%20Word"><b>Microsoft Front Page</b></a>
</li>
</ul>
</li>
<li><a class="IndukMenu" href="https://tutorialdasar404.blogspot.com/" title="Horizontal Dropdown Menu dengan CSS">Web Design</a>
<ul>
<li><a href="https://tutorialdasar404.blogspot.com//search/label/HTML">HTML</a></li>
<li><a href="https://tutorialdasar404.blogspot.com//search/label/CSS">CSS</a></li>
<li><a href="https://tutorialdasar404.blogspot.com//search/label/Java">Java</a></li>
<li><a href="https://tutorialdasar404.blogspot.com//search/label/Tutorial%20Blog">Tutorial Blog</a></li>
</ul>
</li>
<li><a class="IndukMenu" href="https://tutorialdasar404.blogspot.com/" title="Horizontal Dropdown Menu dengan CSS">Komputer Akuntansi</a>
<ul>
<li><a href="https://tutorialdasar404.blogspot.com//search/label/AKUNTANSI">Akuntansi Dasar</a></li>
<li><a href="https://tutorialdasar404.blogspot.com//search/label/MYOB">MYOB</a></li>
</ul>
</li>
<li><a class="IndukMenu" href="https://tutorialdasar404.blogspot.com/" title="Horizontal Dropdown Menu dengan CSS">Tutorial Lain-nya</a>
<ul>
<li><a href="https://tutorialdasar404.blogspot.com//search/label/Linux">Linux</a></li>
<li><a href="https://tutorialdasar404.blogspot.com//search/label/Internet">Internet</a></li>
<li><a href="https://tutorialdasar404.blogspot.com//search/label/Email">Email</a></li>
<li><a href="https://tutorialdasar404.blogspot.com//search/label/Virus">Virus</a></li>
<li><a href="https://tutorialdasar404.blogspot.com//search/label/Tip%20dan%20Trik%20Komputer">Tips & Trik Komputer</a></li>
</ul>
</li>
<li><a class="IndukMenu" href="https://tutorialdasar404.blogspot.com/" title="Horizontal Dropdown Menu dengan CSS">Serba - Serbi</a>
<ul>
<li><a href="https://tutorialdasar404.blogspot.com//search/label/Batik%20Pekalongan">Batik Pekalongan</a></li>
<li><a href="https://tutorialdasar404.blogspot.com//search/label/Curhat">Curhat</a></li>
</ul>
</li>
<li><a class="IndukMenu" href="http://forumblogger.co.cc" target="_blank" title="Horizontal Dropdown Menu dengan CSS">Forum</a>
</ul><!-- end ul menufs3 -->
</div><!-- end menufs3-wrapper -->
4. Silahkan edit sendiri ya, coba - coba aja deh, Pasti bisa kok....
5. Selamat Mencoba.
Komentar
Posting Komentar