| Galyanov |
24.01.2011 17:31 |
Вот код меню:
<div class="jquery">
<div class="item">
<a class="link icon_mail"></a>
<div class="item_content">
<h2>Связь с нами</h2>
<p>
<a href="index.php?option=com_content&view=article&id=6">Контакты</a>
<a href="http://vkontakte.ru/club17313455">Вконтакте</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_partners"></a>
<div class="item_content">
<h2>Партнеры</h2>
<p>
<a href="index.php?option=com_content&view=article&id=7">Наши партнеры</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_photos"></a>
<div class="item_content">
<h2>Фото</h2>
<p>
<a href="index.php?option=com_content&view=article&id=2">Фотоальбом</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_help"></a>
<div class="item_content">
<h2>Помощь</h2>
<p>
<a href="index.php?option=com_content&view=article&id=4">Статьи</a>
<a href="index.php?option=com_content&view=article&id=1">Чаво</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_home"></a>
<div class="item_content">
<h2>Стартовая</h2>
<p>
<a href="index.php?option=com_content&view=frontpage">Главная</a>
<a href="index.php?option=com_content&view=article&id=3">Прайс</a>
</p>
</div>
</div>
</div>
<script type="text/javascript" src="<?php echo $templateUrl; ?>/js/jquery-css-transform.js"></script>
<script type="text/javascript" src="<?php echo $templateUrl; ?>/js/jquery-animate-css-rotate-scale.js"></script>
<script>
$('.item').hover(
function(){
var $this = $(this);
expand($this);
},
function(){
var $this = $(this);
collapse($this);
}
);
function expand($elem){
var angle = 0;
var t = setInterval(function () {
if(angle == 1440){
clearInterval(t);
return;
}
angle += 40;
$('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
},10);
$elem.stop().animate({width:'220px'}, 1000)
.find('.item_content').fadeIn(400,function(){
$(this).find('p').stop(true,true).fadeIn(600);
});
}
function collapse($elem){
var angle = 1440;
var t = setInterval(function () {
if(angle == 0){
clearInterval(t);
return;
}
angle -= 40;
$('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
},10);
$elem.stop().animate({width:'52px'}, 1000)
.find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut();
}
</script>
</div>
Как видно из кода, сначала идет код меню, потом подключаются два файла скрипта, далее идет еще один скрипт в самом теле html документа. Также для этого меню существует свой файл стилей.
Кстати, когда наводишь мышью на пункт меню, то при открытии круглые иконки должны вращаться. В простом html они вращаются, а вот в joomla они не вращаются а просто открываются.
За вращение как я понимаю отвечает код, который идет последним в самом теле документа.
Но сейчас это не так важно. Хочу узнать почему не видно пункты меню в Опере и Хроме. |
