Bangun subuh memang banyak manfaatnya. Contohnya subuh ini aku cobain efek jquery lava lamp pada primary menu di website aku dan setelah garuk kepala berapa kali hasilnya buat hati senang. Memang banyak kendala yang aku hadapi. seperti bagaimana sih nambah elemen div pada primary menu drupal, kemudian kenapa function javascript yang dipanggil malah munculkan pesan $ is not a function.
Awalnya googling sana sini, cari yang paling sederhana untuk buat lava lamp ini. Dari sekian banyak aku cobain tutorial Queness.com
Pertama aku harus buat struktur HTML menu seperti dibawah.
$links = $variables['links'];
$attributes = $variables['attributes'];
$heading = $variables['heading'];
global $language_url;
$output = '';
if (count($links) > 0) {
$output = '';
if (!empty($heading)) {
if (is_string($heading)) {
$heading = array(
'text' => $heading,
'level' => 'h2',
);
}
$output .= '<' . $heading['level'];
if (!empty($heading['class'])) {
$output .= drupal_attributes(array('class' => $heading['class']));
}
$output .= '>' . check_plain($heading['text']) . '</' . $heading['level'] . '><div id="lava">';
}
$output .= '<ul' . drupal_attributes($attributes) . '>';
$num_links = count($links);
$i = 1;
foreach ($links as $key => $link) {
$class = array($key);
if ($i == 1) {
$class[] = 'first';
}
if ($i == $num_links) {
$class[] = 'last';
}
if (isset($link['href']) && ($link['href'] == $_GET['q'] || ($link['href'] == '<front>' && drupal_is_front_page()))
&& (empty($link['language']) || $link['language']->language == $language_url->language)) {
$class[] = 'selected'; /* sebelumnya active*/
}
$output .= '<li' . drupal_attributes(array('class' => $class)) . '>';
if (isset($link['href'])) {
$output .= l($link['title'], $link['href'], $link);
}
elseif (!empty($link['title'])) {
if (empty($link['html'])) {
$link['title'] = check_plain($link['title']);
}
$span_attributes = '';
if (isset($link['attributes'])) {
$span_attributes = drupal_attributes($link['attributes']);
}
$output .= '<span' . $span_attributes . '>' . $link['title'] . '</span>';
}
$i++;
$output .= "</li>\n";
}
/* penambahan div box */
$output .= '</ul><div id="box"><div class="head"></div></div></div>';
}
return $output;
}
Nah setelah edit file template.php. Berikutnya adalah CSS yang aku pakai/* lava menu*/
#lava {
position:relative;
text-align:center;
height:20px;
}
#lava ul {
margin:0;
padding:0;
position:absolute;
top:0;
right:0;
z-index:100;
}
#lava ul li {
margin:0 15px;
float:left;
}
#lava #box {
position:absolute;
left:0;
bottom:0;
z-index:50;
background:#ff5500;
height:2px;
padding-right:8px;
margin-left:-6px;
}
#lava #box .head {
background:#ff9900;
height:2px;
padding-left:10px;
}
Kemudian untuk Javascript. Aku download jQuery Easing dan aku simpan di dalam folder ../namathemes/js/easing.js. Terus aku buat file script.js dengan folder yang sama dengan easing.js. Isi dari script.js seperti dibawah. Disini yang aku maksud kenapa class active aku ganti jadi selected. Maksudnya biar tidak merubah satu persatu selected menjadi active.
jQuery(document).ready(function () {
var style = 'easeOutElastic';
var default_left = Math.round(jQuery('#lava li.first').offset().left - jQuery('#lava').offset().left);
var default_width = jQuery('#lava li.selected').width();
jQuery('#box').css({left: default_left});
jQuery('#box .head').css({width: default_width});
jQuery('#lava li').hover(function () {
left = Math.round(jQuery(this).offset().left - jQuery('#lava').offset().left);
width = jQuery(this).width();
jQuery('#box').stop(false, true).animate({left: left},{duration:1000, easing: style});
jQuery('#box .head').stop(false, true).animate({width:width},{duration:1000, easing: style});
}).click(function () {
jQuery('#lava li').removeClass('selected');
jQuery(this).addClass('selected');
});
jQuery('#lava').mouseleave(function () {
default_left = Math.round(jQuery('#lava li.selected').offset().left - jQuery('#lava').offset().left);
default_width = jQuery('#lava li.selected').width();
jQuery('#box').stop(false, true).animate({left: default_left},{duration:1500, easing: style});
jQuery('#box .head').stop(false, true).animate({width:default_width},{duration:1500, easing: style});
});
});
Pada kode diatas juga aku melakukan perubahan tanda dollar ($) aku ganti menjadi jQuery. Karena sempat muncul error $ is not a function. Solusinya cuman googling dulu. Ketemunya di Using Jquery in Drupal. Terakhir menambahkan kedua file javascript tersebut di themes dan clear cache. Untuk menambahkan file javascript tersebut aku edit file namatheme.info.
Sumber: Queness.com | Drupal Theme Development | Drupal Add JS | Using Jquery in Drupal.(thanks eaton)