Главная > CMS > Joomla: LavaLamp + mod_mainmenu

Joomla: LavaLamp + mod_mainmenu

26 марта 2010 Написать комментарий К комментариям

1. Скачать дистрибутив. http://www.gmarwaha.com/jquery/lavalamp/zip/lavalamp-0.2.0.zip Скопировать файлы *.js в папку с шаблоном.
2. В шаблоне:
2.1. Подключаем css:

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/style/menu.css" type="text/css" media="screen" />

Содержание файла menu.css:

.menu {
   position: relative;
   height: 29px;
   /*width: 421px;*/
   background-color: white;
   padding: 15px;
   margin: 10px 0;
   overflow: hidden;
   border: 1px solid gray;
}
 
.menu li {
   float: left;
   list-style: none;
}
 
.menu li.back {
   border: 1px solid #000;
   background-color: #e6e8ea;
   width: 9px;
   height: 30px;
   z-index: 8;
   position: absolute;
}
 
.menu li a {
   font: bold 14px arial;
   text-decoration: none;
   color: #000;
   outline: none;
   text-align: center;
   top: 7px;
   text-transform: uppercase;
   letter-spacing: 0;
   z-index: 10;
   display: block;
   float: left;
   height: 30px;
   position: relative;
   overflow: hidden;
   margin: auto 10px;
}
 
.menu li a:hover, .menu li a:active, .menu li a:visited {
   border: none;
}

2.2. Подклюаем *.js например:

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/js/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/js/jquery.lavalamp.min.js"></script>
<script type="text/javascript">
   $(function() {
      $("#menu").lavaLamp({
         fx: "backout",
         speed: 700,
         click: function(event, menuItem) {
            return true;
         }
      });
   });
</script>

3. Редактируем файл /modules/mod_mainmenu/helper.php:
После (159 строка)

$xml->addAttribute('class', 'menu'.$class);

добавляем:

$xml->addAttribute('id', 'menu'.$class);

4. Редактируем файл /modules/mod_mainmenu/tmpl/default.php
вместо (45 строка)

$node->addAttribute('class', 'active');

пишем

$node->addAttribute('class', 'current');

Материал сформирован (описана интергация с mod_mainmenu в Joomla) на основе статьи http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

Categories: CMS Tags:
  1. wemarus.ru
    7 марта,2013 в 06:49 | #1
    Ответить | Цитата

    Спасибо, конечно не совсем то что нужно…

  2. Алксандр
    27 февраля,2011 в 20:55 | #2
    Ответить | Цитата

    Спасибо за статейку, думаю что на джумле 1.5 работает, но я установил уже джумлу 1.6, и я так поня что в 1.6 mod_mainmenu устроен по другому. Не подскажете какие изменения нужно вносить в mod_mainmenu для джумлы 1.6?

  3. Алксандр
    27 февраля,2011 в 20:53 | #3
    Ответить | Цитата

    Спасибо за статейку, думаю что на джумле 1.5 работает, но я установил уже джумлу 1.6, и я так поня что в не

Похожие публикации