Tab menu cantik di Mambo CMS
tau tab menu kan? kalo jaman dulu biasanya kita membuat dengan sebuah image yg dimasukkan kedalam column table untuk memposisikan kemudian ditambah javascript utk fungsi hovernya. Saat ini hal kayak gitu udah gak jaman lagi. Sekarang kita bisa pake css utk membuat tab menu dari list markup yg cantik. Ada satu contoh berbagai macam tab menu cantik bisa diliat disini. Dengan sedikit modifikasi di file core Mambo, website mambo-mu juga bisa memiliki tab menu seperti itu.
Kalo kita liat source contoh, ambil contoh di tabs menu J,
<div id="tabsJ">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
<li><a href="#" title="Link 7"><span>Link 7</span></a></li>
</ul>
</div>
dan css nya
#tabsJ {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
border-bottom:1px solid #24618E;
}
#tabsJ ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsJ li {
display:inline;
margin:0;
padding:0;
}
#tabsJ a {
float:left;
background:url("tableftJ.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsJ a span {
float:left;
display:block;
background:url("tabrightJ.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsJ a span {float:none;}
/* End IE5-Mac hack */
#tabsJ a:hover span {
color:#FFF;
}
#tabsJ a:hover {
background-position:0% -42px;
}
#tabsJ a:hover span {
background-position:100% -42px;
}
seperti terlihat diatas, diperlukan tag span yang disisipkan di dalam tag a. Tanpa span, tab menu tidak bisa dibuat. Di sisi lain, mambo meng output kan list menu tanpa span, sehingga memerlukan sedikit modifikasi. Diasumsikan mambo yg kita gunakan versi 4.6.x. Buka file includes/core.classes.php dan cari fungsi mosGetMenuLink di sekitar line 1612. Fungsi ini berfungsi utk membuat link dari menu item di mambo. di dalam fungsi mosGetMenuLink cari control structure ini
switch ($mitem->browserNav) {
// cases are slightly different
case 1:
// open in a new window
$txt = '<a href="'. $mitem->link .'" target="_blank" class="'. $menuclass .'" '. $id .'>'. $mitem->name .'</a>';
break;
case 2:
// open in a popup window
$txt = "<a href=\"#\" onclick=\"javascript: window.open('". $mitem->link ."', '', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=550'); return false\" class=\"$menuclass\" ". $id .">". $mitem->name ."</a>\n";
break;
case 3:
// don't link it
$txt = '<span class="'. $menuclass .'" '. $id .'>'. $mitem->name .'</span>';
break;
default: // formerly case 2
// open in parent window
$txt = '<a href="'. $mitem->link .'" class="'. $menuclass .'" '. $id .'>'. $mitem->name .'</a>';
break;
}
untuk setiap variabel $txt tambahkan tag span di awal setelah opening a dan sebelum closing tag (kecuali utk case 3) sehingga snipper lengkap akan seperti:
switch ($mitem->browserNav) {
// cases are slightly different
case 1:
// open in a new window
$txt = '<a href="'. $mitem->link .'" target="_blank" class="'. $menuclass .'" '. $id .'><span>'. $mitem->name .'</span></a>';
break;
case 2:
// open in a popup window
$txt = "<a href=\"#\" onclick=\"javascript: window.open('". $mitem->link ."', '', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=550'); return false\" class=\"$menuclass\" ". $id ."><span>". $mitem->name ."</span></a>\n";
break;
case 3:
// don't link it
$txt = '<span class="'. $menuclass .'" '. $id .'>'. $mitem->name .'</span>';
break;
default: // formerly case 2
// open in parent window
$txt = '<a href="'. $mitem->link .'" class="'. $menuclass .'" '. $id .'><span>'. $mitem->name .'</span></a>';
break;
}
that’s all! 
. sekarang tinggal mempublish menu set yg ada dan rubah menu style ke tipe flat list. Jangan lupa utk mengupdate css style nya agar sesuai dengan id container menu dan path utk image background nya.
Selamat mencoba!!
