Tab menu cantik di Mambo CMS

Published
by
adisetiawan
on 17 April 2007
in Mambo CMS, PHP and css
.

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,

PLAIN TEXT
HTML:
  1. <div id="tabsJ">
  2.   <ul>
  3.     <li><a href="#" title="Link 1"><span>Link 1</span></a></li>
  4.     <li><a href="#" title="Link 2"><span>Link 2</span></a></li>
  5.     <li><a href="#" title="Link 3"><span>Link 3</span></a></li>
  6.     <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
  7.  
  8.     <li><a href="#" title="Link 5"><span>Link 5</span></a></li>
  9.     <li><a href="#" title="Link 6"><span>Link 6</span></a></li>
  10.     <li><a href="#" title="Link 7"><span>Link 7</span></a></li>
  11.   </ul>
  12. </div>

dan css nya

PLAIN TEXT
HTML:
  1. #tabsJ {
  2.       float:left;
  3.       width:100%;
  4.       background:#F4F4F4;
  5.       font-size:93%;
  6.       line-height:normal;
  7.       border-bottom:1px solid #24618E;
  8.       }
  9.     #tabsJ ul {
  10.       margin:0;
  11.       padding:10px 10px 0 50px;
  12.       list-style:none;
  13.       }
  14.     #tabsJ li {
  15.       display:inline;
  16.       margin:0;
  17.       padding:0;
  18.       }
  19.     #tabsJ a {
  20.       float:left;
  21.       background:url("tableftJ.gif") no-repeat left top;
  22.       margin:0;
  23.       padding:0 0 0 5px;
  24.       text-decoration:none;
  25.       }
  26.     #tabsJ a span {
  27.       float:left;
  28.       display:block;
  29.       background:url("tabrightJ.gif") no-repeat right top;
  30.       padding:5px 15px 4px 6px;
  31.       color:#24618E;
  32.       }
  33.     /* Commented Backslash Hack hides rule from IE5-Mac \*/
  34.     #tabsJ a span {float:none;}
  35.     /* End IE5-Mac hack */
  36.     #tabsJ a:hover span {
  37.       color:#FFF;
  38.       }
  39.     #tabsJ a:hover {
  40.       background-position:0% -42px;
  41.       }
  42.     #tabsJ a:hover span {
  43.       background-position:100% -42px;
  44.       }

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

PLAIN TEXT
PHP:
  1. switch ($mitem->browserNav) {
  2.             // cases are slightly different
  3.             case 1:
  4.             // open in a new window
  5.             $txt = '<a href="'. $mitem->link .'" target="_blank" class="'. $menuclass .'" '. $id .'>'. $mitem->name .'</a>';
  6.             break;
  7.  
  8.             case 2:
  9.             // open in a popup window
  10.             $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";
  11.             break;
  12.  
  13.             case 3:
  14.             // don't link it
  15.             $txt = '<span class="'. $menuclass .'" '. $id .'>'. $mitem->name .'</span>';
  16.             break;
  17.  
  18.             default:    // formerly case 2
  19.             // open in parent window
  20.             $txt = '<a href="'. $mitem->link .'" class="'. $menuclass .'" '. $id .'>'. $mitem->name .'</a>';
  21.             break;
  22.         }

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:

PLAIN TEXT
PHP:
  1. switch ($mitem->browserNav) {
  2.             // cases are slightly different
  3.             case 1:
  4.             // open in a new window
  5.             $txt = '<a href="'. $mitem->link .'" target="_blank" class="'. $menuclass .'" '. $id .'><span>'. $mitem->name .'</span></a>';
  6.             break;
  7.  
  8.             case 2:
  9.             // open in a popup window
  10.             $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";
  11.             break;
  12.  
  13.             case 3:
  14.             // don't link it
  15.             $txt = '<span class="'. $menuclass .'" '. $id .'>'. $mitem->name .'</span>';
  16.             break;
  17.  
  18.             default:    // formerly case 2
  19.             // open in parent window
  20.             $txt = '<a href="'. $mitem->link .'" class="'. $menuclass .'" '. $id .'><span>'. $mitem->name .'</span></a>';
  21.             break;
  22.         }

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!!

8 Responses to “Tab menu cantik di Mambo CMS”

Feed for this Entry Trackback Address
  1. 1 Suwahadi
    17 April 2007 at 17:09

    Kayaknya koq ruwet banget, hehehe :D
    Tapi dicoba dulu ah…
    BTW, thanks for your share :D

  2. 2 didats
    18 April 2007 at 13:51

    kenapa harus pake span mas?

  3. 3 adisetiawan
    18 April 2007 at 14:51

    [quote comment="304"]kenapa harus pake span mas?[/quote]
    lha contohnya ada span, ya ngikut aja :D
    http://exploding-boy.com/images/cssmenus/menus.html

  4. 4 Yogi
    18 April 2007 at 16:24

    Nah lho di komplain sama master CSS :D

  5. 5 rizkyonline
    20 April 2007 at 08:25

    Ikut nimbrung yak :)

  6. 6 majid
    22 April 2007 at 02:13

    HI
    Thanks about your site

    but can you write them English ???

    best regard

  7. 7 faloya
    23 May 2007 at 15:26

    aku ikutan yaaaaaaaaaaaaaa

  8. 8 Sonny
    19 June 2007 at 20:54

    Wah kok rada ribet,napa ga pake tab module aja,lebih mudah n simple :D

Leave a Reply

It seems you're using an unsafe, out-of-date browser. Click here to upgrade to Firefox for free. X