Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.01.2011, 15:45
Аспирант
Отправить личное сообщение для Galyanov Посмотреть профиль Найти все сообщения от Galyanov
 
Регистрация: 23.01.2011
Сообщений: 47

Неккоректное отображение jquery меню в Google Chrome и Opera
У меня сайт на joomla 1.5
Вставил выезжающее меню jquery. В браузерах IE, Mozilla Firefox все отображается как надо, а в Opera и Google Chrome не видно пункты меню. Прилагаю скриншоты правильного отображения и неправильного. Прошу помощи у тех, кто знает как это исправить. Уже намучался с всякими хаками, они только косячат и не исправляют проблему.

Правильное отображение:


Неправильное отображение:
Ответить с цитированием
  #2 (permalink)  
Старый 24.01.2011, 17:09
Аватар для Skipp
.
Отправить личное сообщение для Skipp Посмотреть профиль Найти все сообщения от Skipp
 
Регистрация: 30.03.2010
Сообщений: 1,813

приведите код этого пункта меню, а то догадываться как-то сложно...
__________________
.
Ответить с цитированием
  #3 (permalink)  
Старый 24.01.2011, 17:31
Аспирант
Отправить личное сообщение для Galyanov Посмотреть профиль Найти все сообщения от Galyanov
 
Регистрация: 23.01.2011
Сообщений: 47

Вот код меню:
<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 они не вращаются а просто открываются.

За вращение как я понимаю отвечает код, который идет последним в самом теле документа.

Но сейчас это не так важно. Хочу узнать почему не видно пункты меню в Опере и Хроме.
Ответить с цитированием
  #4 (permalink)  
Старый 24.01.2011, 17:37
Аватар для Skipp
.
Отправить личное сообщение для Skipp Посмотреть профиль Найти все сообщения от Skipp
 
Регистрация: 30.03.2010
Сообщений: 1,813

попробуйте поменять значение z-index
проверить position top и left
и т.п.
__________________
.
Ответить с цитированием
  #5 (permalink)  
Старый 24.01.2011, 17:43
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Galyanov, причем тут jQuery если поправляется это исключительно CSS?
Ответить с цитированием
  #6 (permalink)  
Старый 24.01.2011, 17:45
Аспирант
Отправить личное сообщение для Galyanov Посмотреть профиль Найти все сообщения от Galyanov
 
Регистрация: 23.01.2011
Сообщений: 47

Здесь z-index не используется нигде...
Ответить с цитированием
  #7 (permalink)  
Старый 25.01.2011, 00:26
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

Сообщение от Galyanov
Здесь z-index не используется нигде...
ну дак добавь-именно он отвечает за порядок наложения контейнеров друг на друга. не код свой смотри а стили
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ищу jQuery плагин для создания меню Zeboton jQuery 9 15.09.2014 15:31
JQuery, keypress в браузере google chrome Flake jQuery 1 09.03.2012 16:06
Не работает jQuery меню с AJAX eugene1986 jQuery 0 08.07.2010 18:49
jQuery + Google Chrome ( утечка памяти ??? ) idler jQuery 4 24.04.2010 14:09
jQuery jTreeMenu plugin Seafnox jQuery 9 12.01.2010 21:55