костыль для IE...

@Hellrider · Регистрация: 14.02.2010

Студворк — интернет-сервис помощи студентам

Делаю на сайте менюшку с выезжающей панелью. Сбоку видна вкладка, при наведении на которую появляется само меню. Уже сейчас заметил, во всех браузерах работает нормально, кроме всеми нами любимого IE. Там панель не выезжает плавно, а просто выскакивает. Подскажите пожалуйста, какой костыль можно воткнуть в код чтобы в нем все работало корректно? Код прилагается ниже:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
#slideout {
            position: fixed;
            top: 300px;
            left: 0;
            width: 35px;
            padding: 12px 0;
            text-align: center;
            background: #000;
            -webkit-transition-duration: 0.3s;
            -moz-transition-duration: 0.3s;
            -o-transition-duration: 0.3s;
            transition-duration: 0.3s;
            -webkit-border-radius: 0 5px 5px 0;
            -moz-border-radius: 0 5px 5px 0;
            border-radius: 0 5px 5px 0;
        }
        #slideout_inner {
            position: fixed;
            top: 300px;
            left: -250px;
            background: #000;
            width: 200px;
            padding: 25px;
            height: 200px;
            -webkit-transition-duration: 0.3s;
            -moz-transition-duration: 0.3s;
            -o-transition-duration: 0.3s;
            transition-duration: 0.3s;
            text-align: left;
            -webkit-border-radius: 0 0 5px 0;
            -moz-border-radius: 0 0 5px 0;
            border-radius: 0 0 5px 0;
        }
        #slideout_inner textarea {
            width: 190px;
            height: 100px;
            margin-bottom: 6px;
        }
        #slideout:hover {
            left: 250px;
        }
        #slideout:hover #slideout_inner {
            left: 0;
        }

@djdish · 04.10.2011, 12:36

Юзай JQUERY

JavaScript
1
$("#slideout").slideToggle("slow")

@Hellrider · 04.10.2011, 12:50 **[ТС]**

Строка это пример или ее куда-то вставить нужно?

@djdish · 04.10.2011, 12:54

в тегах <head></head> качаешь jquery с сайта и вставляешь

HTML5
1
<script src='script/js/jquery.js'></script>

и в коде в теге где у тебя див или что там пишешь

JavaScript
1
OnMouseOver=\"$(this).slideToggle("slow");\" onMouseOut=\"$(this).slideToggle("slow");\"

@Hellrider · 05.10.2011, 02:01 **[ТС]**

спасибо, завтра попробую.

Добавлено через 48 минут
Что-то не то видимо делаю. Не работает... Вот так у меня в оригинале в html стоит (это мой первоначальный вариант):

HTML5
1
2
3
4
5
6
7
<div id="slideout">
  <img src="../images/navigation.png" alt="Главное меню" />
        <div class="navigation" id="slideout_inner">
        <p><a href="#">Ссылка</a></p>
        <p><a href="#">Ссылка</a></p>
        <p><a href="#">Ссылка</a></p>
        </div>

@djdish · 05.10.2011, 09:53

Сообщение от Hellrider

HTML5
1
<div id="slideout">

попробуй

HTML5
1
<div id="slideout" OnMouseOver='$(this).slideToggle("slow");' onMouseOut='$(this).slideToggle("slow");'>

и подключи в head <script src='путь к jquery.js'></script>
надеюсь ты скачал jquery

@Hellrider · 06.10.2011, 22:11 **[ТС]**

Не знаю, видимо что-то не то косячу, вот кусок кода:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src='jquery.js'></script>
<title>Untitled Document</title>
</head>
<link rel="stylesheet" href="ghosts.css" type="text/css" />
<body class="breadcrumb">
<div id="logo">
  <div id="apDiv2"></div>
</div>
<div class="story" id="apDiv3">
  <h1><a href="#">Ссылка</a> / <a href="#">Ссылка</a> / Ссылка</h1>
</head>
<body>
<div id="slideout" OnMouseOver='$(this).slideToggle("slow");' onMouseOut='$(this).slideToggle("slow");'>
  <img src="../images/navigation.png" alt="Главное меню" />
        <div class="navigation" id="slideout_inner">
        <p><a href="#">Ссылка</a></p>
        <p><a href="#">Ссылка</a></p>
        <p><a href="#">Ссылка</a></p>
        <p><a href="#">Ссылка</a></p>
        <p><a href="#">Ссылка</a></p>
        <p><a href="#">Ссылка</a></p>
        </div>
  </div>

К jquery путь верный, так и должен быть. В остальном не знаю, попытался переместить див со скриптом за боди, все равно не работает. Начинает выезжать снизу основной текст, а само меню просто центрируется и не работает.

@djdish · 06.10.2011, 23:01

распакуй в любую папку и запусти в лисе работает
а в остальных брайзерах косяк, так как у тя косяковые стили

@Hellrider · 06.10.2011, 23:35 **[ТС]**

Ну так оно тем более бесполезно, ибо в моем случае с css работает везде кроме IE... А что именно в стилях косяк?

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! в-строка - входное арифметическое выражение в инфиксной(обычной). . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@Hellrider 0 / 0 / 0 Регистрация: 14.02.2010 Сообщений: 30
	04.10.2011, 12:50 [ТС]
	Строка это пример или ее куда-то вставить нужно? 0

@Hellrider 0 / 0 / 0 Регистрация: 14.02.2010 Сообщений: 30
	06.10.2011, 23:35 [ТС]
	Ну так оно тем более бесполезно, ибо в моем случае с css работает везде кроме IE... А что именно в стилях косяк? 0