Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Помогите в JS определить высоту блока и присвоить отступ.

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки

Открыть новую тему     Написать ответ в эту тему

erroraccount

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Имеется меню, в котором при наведении на корневой пункт выдвигается всплывающий блок с подпунктами на всю ширину горизонтального меню.
 
Хочу сделать, чтобы когда появлялось это подменю, то увеличивался отступ от основного контента. Чтобы всплывающий блок подменю как бы отталкивал от себя блок с контентом если это подменю появляется.
 
Для этого, как я понимаю, в js надо основному блоку меню присвоить margin-bottom равный высоте всплывающего подменю, если это всплывающее меню появляется.
 
Помогите пожалуйста написать такой кусок кода. Я честно признаюсь, что пока больше html + css  ничего не знаю. js только настраивал когда для анимации на css надо было классы присваивать. Но этого тут мало. Надеюсь на помощь знающих и добрых людей )))
 
Вот js с меню

Код:
$(document).ready(function() {
 
    megamenu_adapMenu();
 
    if($("#megamenu-menu").width() >= 938){
        var current_url = "http://" + window.location.hostname + window.location.pathname + window.location.search,
            href = '';
 
        $("#megamenu-menu .nav a").each(function(e){
            href = $(this).attr("href");
 
            if(current_url == href){
                $(this).parents(".dropdown-menu").css({"top" : 49, "opacity" : 1});
                return false;
            }
        });
    }
 
 
    $( window ).resize(function() {
        megamenu_adapMenu();
    });
$( "#megamenu-menu a.dropdown-toggle" ).bind( "click", function() {
    if(($(this).attr('href')!="javascript:void(0);")&&($( document ).width()>1024))
    {
    window.document.location=$(this).attr('href');
    }
});
/*
$('ul.nav li.dropdown').hover(function() {
    $(this).find('.dropdown-menu').hide();
  $(this).find('.dropdown-menu').stop(true, true).delay(500).fadeIn(100);
}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(10).fadeOut(10);
});
*/
});
function megamenu_adapMenu(){
    $(".megamenu-bigblock").css('width',$("#megamenu-menu").outerWidth()-10);
    $('#megamenu-menu .dropdown-menu').each(function() {
        var menu = $('#megamenu-menu').offset();
        var dropdown = $(this).parent().offset();
 
 
        var i = (dropdown.left + $(this).outerWidth()) - (menu.left + $('#megamenu-menu').outerWidth());
 
 
 
        /*
        if (i > 0) {
            $(this).css('margin-left', '-' + (i + 5) + 'px');
        }
        var l=$(this).outerWidth()-2;
        $(this).find(".megamenu-ischild-simple").css('left',l);
        */
 
    });
 
}


Всего записей: 66 | Зарегистр. 01-02-2016 | Отправлено: 20:36 22-06-2016 | Исправлено: erroraccount, 20:37 22-06-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
erroraccount
не стоит по одному и тому же вопросу создавать кучу тем - Как сделать чтобы меню не сворачивалось когда открыт корень?
 
если уж объясняете что то особенное, то показывайте на картинках.

Всего записей: 15024 | Зарегистр. 20-09-2014 | Отправлено: 20:48 22-06-2016
erroraccount

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
если уж объясняете что то особенное, то показывайте на картинках.  

Да, конечно покажу.  
 
Рис. 1: Так меню выглядит без выпадающего блока с подпунктами. Под меню, через 15px идет блок с контентом.

 
Рис. 2: Так в итоге должно получиться. Подменю выползло и отодвинуло контент так, что до него по прежнему 15px только уже не от основного меню, а от вспомогательного.

 
Рис. 3: То что пока происходит у меня, когда выползает вспомогательное меню. Ему задано 100% ширины, но оно выходит вправо + оно наползает на контент.

Всего записей: 66 | Зарегистр. 01-02-2016 | Отправлено: 22:15 22-06-2016 | Исправлено: erroraccount, 22:16 22-06-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
erroraccount
самый простой способ, обернуть меню в div и менять его высоту в соответствии с выпавшим меню. это отодвинет все, что идет ниже. для реализации желательно видеть еще и html код меню вместе с css

Всего записей: 15024 | Зарегистр. 20-09-2014 | Отправлено: 23:38 22-06-2016
erroraccount

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Меню бутстропавское.
Вот хтмл:  
Подробнее...

Всего записей: 66 | Зарегистр. 01-02-2016 | Отправлено: 03:11 23-06-2016 | Исправлено: erroraccount, 03:11 23-06-2016
erroraccount

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
самый простой способ, обернуть меню в div и менять его высоту в соответствии с выпавшим меню. это отодвинет все, что идет ниже. для реализации желательно видеть еще и html код меню вместе с css

А можете показать простой способ?

Всего записей: 66 | Зарегистр. 01-02-2016 | Отправлено: 09:36 23-06-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
erroraccount

Цитата:
А можете показать простой способ?

если бы ваше меню изначально работало - показал бы на нем,  а так взял первое попавшееся меню - https://jsfiddle.net/uw9nb9qL/
 
так как набросал по быстрому, то для подразделов меню не работает, но можно доработать.
и без анимации все еще проще - не нужно тогда step функции реализовывать.
 
ну я обошелся без обертки в что то - просто меняю margin-bottom у меню.

Всего записей: 15024 | Зарегистр. 20-09-2014 | Отправлено: 20:09 23-06-2016
Neonoraliss

BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
.




Спам

Всего записей: 3 | Зарегистр. 25-05-2016 | Отправлено: 16:02 30-06-2016
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » Web-программирование » Помогите в JS определить высоту блока и присвоить отступ.


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru