Выезжающий блок справа

@monax_111 · Регистрация: 06.07.2014

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

Люди добрые подскажите пожалуйста:
я хочу сделать выезжающий блок(roof_help) справа, когда на него наводят мышкой;
блок я уже сдел и когда я его смещаю как бы "за экран" (у меня он 1920px) с помощью jqeary

JavaScript
1
2
doc_w = $(document).width();
$('.roof_help').css({'left':(doc_w*0.9)+'px'})

но не до конца, а что бы кончал кончик, в который я вставлю картинку или еще что-нить, на что пользователь будет наводить, что бы он выехал полностью!

так вот и меня сразу снизу образуется полоса прокрутки. ее конечно можно убрать насильно через overflow, но как то подругому можно сделать?
можно как то сказать браузеру, что на этот блок не надо растягивать окно?

CSS
1
2
3
body{z-index: 1;margin:0px; }
.roof{z-index: 2;text-align: center;color: DodgerBlue; font-size: 200%; height:100px}
.roof_cell{z-index: 3;opacity: 1;background-color: white;display:block;position: absolute;text-align:center;margin:10px;}

@whiteapps · 17.10.2014, 23:13

monax_111,
только overflow

@monax_111 · 17.10.2014, 23:17 **[ТС]**

но не до конца, а что бы кончал кончик, в который я вставлю картинку или еще что-нить, на что пользователь будет наводить, что бы он выехал полностью!

так вот и меня сразу снизу образуется полоса прокрутки. ее конечно можно убрать насильно через overflow, но как то подругому можно сделать?
можно как то сказать браузеру, что на этот блок не надо растягивать окно?

CSS
1
2
3
body{z-index: 1;margin:0px; }
.roof{z-index: 2;text-align: center;color: DodgerBlue; font-size: 200%; height:100px}
.roof_cell{z-index: 3;opacity: 1;background-color: white;display:block;position: absolute;text-align:center;margin:10px;}

HTML5
1
2
3
4
5
6
<body>
    <div class="roof">
        <div class="roof_cell">Название</div>       
        <div class="roof_cell roof_help">тут вы сможете найти все описание, а так же примеры использования!</div>
    </div>
</body>

Добавлено через 3 минуты
может как то подугому блок убирать направо????

@Fedor92 · 17.10.2014, 23:29

monax_111 ,

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

кончал кончик

- а Вы юморист...

Вопрос из праздного любопытства, а что Вам мешает сделать полноценное плавающее меню?

@monax_111 · 17.10.2014, 23:44 **[ТС]**

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

monax_111 ,
Сообщение от monax_111
кончал кончик
- а Вы юморист...

каюсь)))) ТОРчал!
задумка именно такая, что ТОРчит только малая часть, а когда на нее наводишь, выдвигается весь блок!
я пока что не очень умею обращаться с позиционированием и анимацией, но учусь!

@Fedor92 · 18.10.2014, 00:41

Тогда копайте в сторону фиксированного плавающего меню или как его ещё называют фиксированного плавающего блока... Например http://jsfiddle.net/Hawk_ucoz/... ed/result/ илиhttp://www.directlyrics.com/co... float.html примеры навскидку в нэте есть намного больше разнообразных реализаций подобных блоков...

@newJS · 18.10.2014, 06:13

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

а когда на нее наводишь, выдвигается весь блок!

это конечно старое и левосторонние, но может поможет
Выдвижная ссылка

@monax_111 · 18.10.2014, 18:07 **[ТС]**

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

Тогда копайте в сторону фиксированного плавающего меню или как его ещё называют фиксированного плавающего блока... Например http://jsfiddle.net/Hawk_ucoz/... ed/result/ илиhttp://www.directlyrics.com/co... float.html примеры навскидку в нэте есть намного больше разнообразных реализаций подобных блоков...

вся проблема в том, что это выезжает слева! браузер не растягивает окно на то что имеет отрицательные координаты!!! а они у меня просто больше чем размер окна! так что задача не решена!

Добавлено через 36 секунд

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

это конечно старое и левосторонние, но может поможет
Выдвижная ссылка

то же самое, все элементы просто скрыты в отрицательных координатах, а мне нужно в положительные!!!

@ludmila-sv · 18.10.2014, 18:32

Ну тогда меняйте не left, а width. И overflow задайте не всему документу, а выезжающему блоку.

@Fedor92 · 18.10.2014, 19:39

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

@monax_111 · 19.10.2014, 00:44 **[ТС]**

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

Когда можно реализовать плавающий фиксированный блок при клике на который будет выезжать его содержимое...

я это и пытаюсь сделать!
но хочу что бы браузер не растягивал окно на блок который уезжает направо, когда на него не наводят!
а он растягивает! я и спрашиваю, кроте как убать полосу прокрутки, можно как то решить сию проблему!

Dmitry · 19.10.2014, 01:38

а просто менять размер самого блока?...

@monax_111 · 19.10.2014, 03:00 **[ТС]**

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

а просто менять размер самого блока?...

а что мне это даст???? я может чего то не понимаю?

Dmitry · 19.10.2014, 10:53

а). я чисто предположил
б). делаете свой блок (скажем) размером (шириной) 30рх и размещаете с правой стороны в позиции, равной "ширина окна - 30рх". получится тот самый ваш "кончик". а когда нужно показать блок полностью, меняете его ширину до (допустим) 1000рх, и позицию на значение, равное "ширина окна - 1000рх"...

@Fedor92 · 19.10.2014, 11:54

monax_111 , тогда у Вас есть три на мой взгляд варианта: либо реализовать блок справа, но чтобы он выезжал в левую сторону поверх контента страницы(с помощью свойства z-index); перенести блок на левую сторону, чтобы он выезжал вправо(опять же с помощью z-index) ... И наконец наиболее для Вас оптимальный вариант - это разместить контент на 90% страницы и 10%(грубо говоря, пропорции могут быть и другие ) - оставить под блок меню, но это будет смотреться не очень красиво, поскольку справа останется 10% свободного места, хотя всё зависит от макета... Таким образом при открытии бокового меню ширина страницы будет равняться 100% и прокрутка не появится - всё остальное зависит от Вас и качества Вашей вёрстки(верстать придётся с учётом минимального разрешения)...

@monochromer · 19.10.2014, 12:51

Для произвольной ширины блока можно сделать так (без css-анимации)

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.side {
    position: fixed;
    top: 50%;
    left: 100%;
    right: auto;
    margin-left: -20px;
 
    height: 100px;
 
    background: #aaa;
    cursor: pointer;
    transition: right .5s;
}
 
.side:hover {
    right: 0;
    left: auto;
}

http://jsbin.com/merahe/1/edit?html,css,output

@monax_111 · 19.10.2014, 20:24 **[ТС]**

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

делаете свой блок (скажем) размером (шириной) 30рх и размещаете с правой стороны в позиции, равной "ширина окна - 30рх". получится тот самый ваш "кончик". а когда нужно показать блок полностью, меняете его ширину до (допустим) 1000рх, и позицию на значение, равное "ширина окна - 1000рх

и каждый раз добавлять и убирать контент???
там же суть то в том что видно только 10% от всей информации, а 90 только когда выдвигается!

Добавлено через 5 минут

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

Для произвольной ширины блока можно сделать так (без css-анимации)

это мне уже нравиться, но пара непоняток осталась(
я засовываю в "кончик" картинку 100Х100 и как раз под нее этот кончик и высовываю, и получается, что остальной контент стекает вниз, под картинку, когда она не активна!!! остальной контент должен быть виден, только при наведении! я имел в виду 10% ширины блока!!!( это наверно я виноват - неправильно поставил вопрос(
и второй по поводу анимации

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.side {
    position: fixed;
    top: 10%;
    left: 100%;
    right: auto;
    margin-left: -100px;
 
    height: 100px;
 
    background: #aaa;
    cursor: pointer;
    transition-property: right;transition-duration: 1s; -webkit-transform: translate3d(0,0,0)
}
 
.side:hover {
    right: 0;
    left: auto;
    
}

как то не работает(((

@monochromer · 19.10.2014, 21:09

css-анимация работает только в том случае, если значения свойств задаются численно, а не с помощью ключевых слов. То есть анимация между right: auto; и right: 0; невозможна.

@monax_111 · 19.10.2014, 22:07 **[ТС]**

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

css-анимация работает только в том случае, если значения свойств задаются численно, а не с помощью ключевых слов. То есть анимация между right: auto; и right: 0; невозможна.

как же быть? что же делать?)
я попробовал через jquery

JavaScript
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
widht_ing_info=110;
            doc_w = $(document).width();
            $('body').css({'max-width':doc_w})
            $('.roof_cell ').width(doc_w);
            $('.roof_help').css({'left':(doc_w-widht_ing_info)+'px','width':doc_w-widht_ing_info,'z-index': 4}).mouseenter(
            function(ev){
                $(this).animate({
                    left:'110px'
                });
            }
            ).mouseleave(
            function(ev){
                $(this).animate({
                    left:(doc_w-widht_ing_info)+'px'
                });
            }
            )
            
            $('.roof_info').css({'right':(doc_w-widht_ing_info)+'px','width':doc_w-widht_ing_info,'z-index': 4}).mouseenter(
            function(ev){
                $(this).animate({
                    right:'110px'
                });
            }
            ).mouseleave(
            function(ev){
                $(this).animate({
                    right:(doc_w-widht_ing_info)+'px'
                });
            }
            )

CSS
1
2
3
4
5
6
7
html{overflow:hidden}
body{z-index: 1;margin:0px; }
.roof{z-index: 2;text-align: center;color: DodgerBlue; font-size: 200%; height:100px}
.roof_help{z-index: 4;opacity: 1;background-color: white;display:block;position: absolute;text-align:center;margin:10px;}
.roof_info{z-index: 3;opacity: 1;background-color: white;display:block;position: absolute;text-align:center;margin:10px;}
.roof_info:hover{right:110px;transition-property: all;transition-duration: 2s; -webkit-transform: translate3d(0,0,0)}
.roof_help:hover{left:110px;transition-property: left;transition-duration: 2s;-webkit-transform: translate3d(0,0,0)}

Добавлено через 8 минут
но проблема в том, что если увести мышку раньше с блока, чем закончиться анимация, то блок резко перескакивает в крайнее положение и быстро выполняет анимацию уползания!!!

@monax_111 · 21.10.2014, 19:24 **[ТС]**

так же мне совсем не понятно, почему не смещается блок?

HTML5
1
2
3
<body>
<div class="roof_help">Я должен двигаться!</div>
</body>

CSS
1
2
3
4
5
.roof_help {
    width: 600px;
    background: #aaa;
    left: 100px;
    }

то есть фон закрашивается, длинна увеличивается, а свойство left не работает!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@whiteapps 414 / 379 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	17.10.2014, 23:13
	monax_111, только overflow 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	18.10.2014, 00:41
	Тогда копайте в сторону фиксированного плавающего меню или как его ещё называют фиксированного плавающего блока... Например http://jsfiddle.net/Hawk_ucoz/... ed/result/ илиhttp://www.directlyrics.com/co... float.html примеры навскидку в нэте есть намного больше разнообразных реализаций подобных блоков... 1

@ludmila-sv 279 / 279 / 62 Регистрация: 28.08.2014 Сообщений: 432
	18.10.2014, 18:32
	Ну тогда меняйте не left, а width. И overflow задайте не всему документу, а выезжающему блоку. 1

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	18.10.2014, 19:39
	monax_111, тогда я не понимаю, что Вы хотите изобразить и зачем Вам понадобились отрицательные координаты... Когда можно реализовать плавающий фиксированный блок при клике на который будет выезжать его содержимое... 0

Dmitry 13440 / 7534 / 830 Регистрация: 09.09.2009 Сообщений: 29,554
	19.10.2014, 01:38
	а просто менять размер самого блока?... 0

Dmitry 13440 / 7534 / 830 Регистрация: 09.09.2009 Сообщений: 29,554
	19.10.2014, 10:53
	а). я чисто предположил б). делаете свой блок (скажем) размером (шириной) 30рх и размещаете с правой стороны в позиции, равной "ширина окна - 30рх". получится тот самый ваш "кончик". а когда нужно показать блок полностью, меняете его ширину до (допустим) 1000рх, и позицию на значение, равное "ширина окна - 1000рх"... 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	19.10.2014, 11:54
	monax_111 , тогда у Вас есть три на мой взгляд варианта: либо реализовать блок справа, но чтобы он выезжал в левую сторону поверх контента страницы(с помощью свойства z-index); перенести блок на левую сторону, чтобы он выезжал вправо(опять же с помощью z-index) ... И наконец наиболее для Вас оптимальный вариант - это разместить контент на 90% страницы и 10%(грубо говоря, пропорции могут быть и другие ) - оставить под блок меню, но это будет смотреться не очень красиво, поскольку справа останется 10% свободного места, хотя всё зависит от макета... Таким образом при открытии бокового меню ширина страницы будет равняться 100% и прокрутка не появится - всё остальное зависит от Вас и качества Вашей вёрстки(верстать придётся с учётом минимального разрешения)... 0

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	19.10.2014, 21:09
	css-анимация работает только в том случае, если значения свойств задаются численно, а не с помощью ключевых слов. То есть анимация между right: auto; и right: 0; невозможна. 0