Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.50/12: Рейтинг темы: голосов - 12, средняя оценка - 4.50
Peace 2 all shining faces
 Аватар для Vorona
674 / 535 / 85
Регистрация: 05.03.2010
Сообщений: 1,282

Динамический сдвиг блока с условием

25.10.2011, 19:47. Показов 2373. Ответов 3
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Добрый вечер, ребята!
Появилась проблема при создании выплыващего меню.
есть меню в правой части экрана и есть несколько пунктов меню, при наведении курсора мыши на которые, выплывает список подменю в виде inline-block (список списков), соответственно он тянется вправо

но, когда список по своей длине достигает правой границы экрана, он ломается и получается не очень красивое меню

подскаэите пожалуйста, какие функции использовать либо методы решения для того, чтобы выплывающее меню выплывало не в правую, а наборот в левую строну или просто смещалось в лево на нужное количество пикселей, чтобы "неломаясь" поместиться до границы экрана?
Миниатюры
Динамический сдвиг блока с условием   Динамический сдвиг блока с условием  
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
25.10.2011, 19:47
Ответы с готовыми решениями:

Неверное срабатывание блока с условием
private static void setupHttpsUrlConnection() { HostnameVerifier customVerifier = new HostnameVerifier() { ...

Сдвиг вложеного блока
это все должно быть в одну строчку <header> <div class="top_menu"> <a href="index.html">Главная</a> <a...

Сдвиг блока меню
Суть в том, что, если разрешение экрана меньше 1400px, панель меню сдвигается вниз и продолжает увеличиваться до тех пор, пока не...

3
weboman
 Аватар для Schtrich
210 / 195 / 63
Регистрация: 13.08.2010
Сообщений: 1,531
Записей в блоге: 6
26.10.2011, 07:00
наверно вам все-таки в раздел css, сначала там разберитесь.
0
Peace 2 all shining faces
 Аватар для Vorona
674 / 535 / 85
Регистрация: 05.03.2010
Сообщений: 1,282
26.10.2011, 09:06  [ТС]
та с css вроде бы все в порядке, разве что сам пункт menu вмещает в себя выплывающее подменю, получается что-то вроде такого
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul id="menulist">
   /*menu1*/
   <li class="menu">
      <ul class="hovermenu">
         <ul><li>Bla...</li><li>Bla...</li><li>Bla...</li></ul>
         <ul><li>Bla...</li><li>Bla...</li><li>Bla...</li></ul>
      </ul>
   </li>
   /*menu2*/
   <li class="menu">
      <ul class="hovermenu">
         <ul><li>Bla...</li><li>Bla...</li><li>Bla...</li></ul>
         <ul><li>Bla...</li><li>Bla...</li><li>Bla...</li></ul>
      </ul>
   </li>
   ...
</ul>
и может быть стоит списки класса "hovermenu" не вкладывать в "menu", а определить вообще отдельным блоком и перемещать как угодно?
возможно у кого-то случалась подобная проблема, да и задача у меня выполнить это используя jquery, а я только второй день с ним знаком..
есть у кого-то мысли?
0
Peace 2 all shining faces
 Аватар для Vorona
674 / 535 / 85
Регистрация: 05.03.2010
Сообщений: 1,282
27.10.2011, 00:59  [ТС]
вобщем решил я эту проблему таким методом:
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
$(document).ready(function(){
    var block_width = 0;
    var move = 0;
    var block_right = 0;
    var block_pos = 0;
        /*поскольку выпадающее меню "hovermenu" состоит из*/ 
    $('.hovermenu').each(
        function(){
                        /*нескольких списков "hoverlist", ширина которых определяется содержимым автоматически*/
            $(this).children('.hoverlist').each(
                function(){   
                                        /*я нашел сумму ширины всех списков (плюс небольшой компромисс для адекватного отображения во всех браузерах)*/
                    block_width += $(this).width()+10;
            });
                        /* и присвоил блоку эту ширину, теперь он отображается нормально но вылазит за экран*/
            $(this).width(block_width);
                        /*узнал координату правой границы блока чтобы сравнить не вылазит ли она за пределы контейнера*/
            block_pos = $(this).position();
            block_right = block_pos.left + $(this).width();
                        /*и если все-таки блок за пределами контейнера*/
            if(block_right > $('#container').width()){
                                /*уточняем шаг с которым необходимо отступить влево чтобы блок отображался правильно в пределах контейнера*/
                move = $('#container').width() - block_width;
                $(this).animate({left: move}, 0);
            }   
            block_width = move = block_pos = block_right = 0;
        }
    );
});
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
27.10.2011, 00:59
Помогаю со студенческими работами здесь

Динамический отчет, столбец с условием - возможно?
Всем доброго времени суток! Есть уже готовая база - столбцы типа &quot;план&quot;, &quot;факт1&quot;, &quot;менеджер1&quot;, ... , &quot;факт9&quot;,...

Необоснованный сдвиг блока влево
Здравствуйте. Помогите пожалуйста, промучился уже 2 часа. Никак не пойму, почему блок сдвигается влево при наведении. Вроде позиция стоит...

Сдвиг списков элементов при раскрытии блока!
Здравствуйте! Не могу ни как понять в чем проблема! При нажатии на &quot;меню&quot; блок div сдвигает списки вправо! И как сделать так чтобы при...

RubyMine. Сдвиг блока текста влево/вправо
Решил попробовать RubyMine в разработке. Стыдно признаться, но не нашел клавиатурной комбинации на сдвиг текста влево/вправо. Не ткнете...

Два div блока: динамический и до конца страницы
Извините за глупый вопрос, но не получается найти ответ. Есть базовый контейнер у него height = 100%, мне нужно в нем разместить два блока....


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
Оптимизация кода на разграничение прав доступа к элементам формы
Maks 13.04.2026
Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений
Maks 12.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .
Архитектура слоя интернета для сервера-слоя.
Hrethgir 11.04.2026
В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа
Maks 10.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .
Очистка реквизитов документа при копировании
Maks 09.04.2026
Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий
anaschu 08.04.2026
https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI
Блокировка документа от изменений, если он открыт у другого пользователя
Maks 08.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .
Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка.
Hrethgir 08.04.2026
Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru