Блог

Главная - Вопросы по программированию - абсолютная оболочка второй позиции ведет себя не так, как первая

абсолютная оболочка второй позиции ведет себя не так, как первая

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

Я подготовил css, где те же стили в одном случае работают как ожидалось, в то время как дальнейшая вложенная навигация больше не используется.

Моя цель — показать навигацию прямо под выпадающим списком.

Приложение используется для начальной загрузки 4, но, тем не менее, навигация очень настраиваемая

.nav-center-nested используется с first nested nav и с second nested nav — но со второй та же style (с тем же html ) работа отличается

 $(document).ready(function () {
    const toggleSpeed = 50, toggleFade = "slow";

    $('div[data-v]').on('click', function (event) {
        if ($(event.target).prop('tagName') !== 'A') {
            var that = this,
                nav = $('#main-nav'),
                absoluteWrapper = nav.find('div[data-w="'   $(that).data('v')   '"]'),
                allAbsoluteWrappers = nav.find('div[data-w]'),
                list = {};

            if (!$(that).attr('was')) {
                if ($(that).attr('name') == 'main-nav') {
                    nav.find('div[data-p]').each(function () { var that = this; $(that).hide(); });
                    nav.find('div[name="main-nav"]').each(function () { var that = this; $(that).removeAttr('was'); });
                    $(that).attr('was', 'here');

                    if (absoluteWrapper.length != 0) {
                        allAbsoluteWrappers.removeClass('py-3');
                        absoluteWrapper.addClass('py-3');
                    } else {
                        allAbsoluteWrappers.removeClass('py-3');
                    }
                }
            } else {
                $(that).removeAttr('was');
                allAbsoluteWrappers.removeClass('py-3');
            }

            if ($(that).children('[id="nav-btn-childrens-'   $(that).data('v')   '"]').length != 0) {
                list = nav.find('div[id="nav-nested-childrens-'   $(that).data('v')   '"]').children();
            } else {
                list = nav.find('div[data-p='   $(that).data('v')   ']');
            }

            if (list != 'undefined' || list != null || list.length != 0) {
                list.each(function () {
                    var that = this;
                    if ($(that).css('display') == "none") { // || $(that).attr('name', 'nav-dropdown')
                        $(that).show(toggleSpeed, function () { $(that).fadeIn(toggleFade); });
                        //if ($(that).attr('name', 'nav-dropdown')) {
                        //    $(that).css('display', 'inline')
                        //}
                    } else {
                        $(that).hide(toggleSpeed, function () { $(that).fadeOut(toggleFade); });
                        nav.find('div[id="nav-nested-childrens-'   $(that).data('v')   '"]').children().each(function () {
                            var that = this;
                            $(that).hide(toggleSpeed, function () { $(that).fadeOut(toggleFade); });
                        });
                    }
                });
            }
        }
    });
});  
 #main-nav a {
    z-index: 1000;
}

.logo-nav {
    position: absolute;
    top: 0;
    right: 95%;
    width: 75px;
    z-index: 999;
}
.nav-center {
    display: flex;
    justify-content: center;
}

.nav-center-nested {
    position: absolute !important;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: 998;
    width: 100%;
}

.nav-btn-clear {
    border-width: 0;
    border-style: none;
    border-color: transparent;
    border-image: none;
    background-color: transparent;
    outline: none !important;
    box-shadow: none !important;
}

.nav-margin {
    margin-left: 25%;
    margin-right: 25%;
}

.nav-padding {
    padding-left: 25%;
    padding-right: 25%;
}

.nav-btn:hover {
    background-color: rgba(255, 255, 255, 0.4); 
}
.nav-btn-margin {
    margin-top: -1rem;
    margin-bottom: -1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.nav-btn-center {
    text-align: center;
}

.nav-btn-right {
    text-align: right;
}

.nav-btn-left {
    text-align: left;
    max-width: 50px;
}

.kuguar-sport-color {
    background-color: rgba(227, 30, 36, 1);
}  
 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="categories" class="col kuguar-sport-color no-padding no-margin">
<nav id="main-nav">
    <div class="row nav-margin p-3 text-center"><div name="main-nav" class="col nav-btn nav-btn-margin" data-v="138"><button class="nav-btn-clear text-light"> Aktualności</button></div><div name="main-nav" class="col nav-btn nav-btn-margin" data-v="139"><button class="nav-btn-clear text-light"> O nas</button></div><div name="main-nav" class="col nav-btn nav-btn-margin" data-v="140"><button class="nav-btn-clear text-light"> Rowery</button></div></div><div class="position-relative"><div data-w="139" name="nav-first" class="nav-center-nested row no-margin nav-padding text-center kuguar-sport-color"><div style="display: none;" class="nav-btn nav-btn-margin col" data-p="139" data-v="376"><a class="text-light" href="#"> o nas1</a><button id="nav-btn-childrens-376" class="nav-btn-clear text-light"><i style="color: white;" class="fa fa-chevron-circle-down" aria-hidden="true"></i></button></div><div class="position-relative"><div id="nav-nested-childrens-376" class="nav-center-nested row text-center"><div style="display: none;" class="col nav-btn nav-btn nav-btn-margin" data-p="376" data-v="379"><a class="text-light" href="#"> o nas11</a></div><div style="display: none;" class="col nav-btn nav-btn nav-btn-margin" data-p="376" data-v="380"><a class="text-light" href="#"> o nas12</a></div></div></div><div style="display: none;" class="nav-btn nav-btn-margin col" data-p="139" data-v="377"><a class="text-light" href="#"> o nas2</a></div><div style="display: none;" class="nav-btn nav-btn-margin col" data-p="139" data-v="378"><a class="text-light" href="#"> o nas3</a></div></div></div><div class="position-relative"><div data-w="140" name="nav-first" class="nav-center-nested row no-margin nav-padding text-center kuguar-sport-color"><div style="display: none;" class="nav-btn nav-btn-margin col" data-p="140" data-v="368"><a class="text-light" href="#"> Górskie</a><button id="nav-btn-childrens-368" class="nav-btn-clear text-light"><i style="color: white;" class="fa fa-chevron-circle-down" aria-hidden="true"></i></button></div><div class="position-relative"><div id="nav-nested-childrens-368" class="nav-center-nested row text-center"><div style="display: none;" class="col nav-btn nav-btn nav-btn-margin" data-p="368" data-v="371"><a class="text-light" href="#"> testgorskie</a></div><div style="display: none;" class="col nav-btn nav-btn nav-btn-margin" data-p="371" data-v="372"><a class="text-light" href="#"> testgorskie2</a></div><div style="display: none;" class="col nav-btn nav-btn nav-btn-margin" data-p="372" data-v="373"><a class="text-light" href="#"> testgorskie3</a></div><div style="display: none;" class="col nav-btn nav-btn nav-btn-margin" data-p="368" data-v="374"><a class="text-light" href="#"> testgorskie1-1</a></div><div style="display: none;" class="col nav-btn nav-btn nav-btn-margin" data-p="368" data-v="375"><a class="text-light" href="#"> testgorskie1-2</a></div></div></div><div style="display: none;" class="nav-btn nav-btn-margin col" data-p="140" data-v="369"><a class="text-light" href="#"> Miejskie</a></div><div style="display: none;" class="nav-btn nav-btn-margin col" data-p="140" data-v="370"><a class="text-light" href="#"> Dziecięce</a><button id="nav-btn-childrens-370" class="nav-btn-clear text-light"><i style="color: white;" class="fa fa-chevron-circle-down" aria-hidden="true"></i></button></div><div class="position-relative"><div id="nav-nested-childrens-370" class="nav-center-nested row text-center"><div style="display: none;" class="col nav-btn nav-btn nav-btn-margin" data-p="370" data-v="381"><a class="text-light" href="#"> Dziecięce1</a></div><div style="display: none;" class="col nav-btn nav-btn nav-btn-margin" data-p="370" data-v="382"><a class="text-light" href="#"> Dziecięce2</a></div><div style="display: none;" class="col nav-btn nav-btn nav-btn-margin" data-p="382" data-v="383"><a class="text-light" href="#"> Dziecięce21</a></div></div></div></div></div>
</nav>


</div>

Вопрос, как переместить вложенную навигацию справа на дно выпадающего списка когда я добавляю kuguar-sport-color во вложенную навигацию — работает дозатор цвета

Спасибо!

Редактировать
ЦЕЛЬ

Комментарии:

1. можете ли вы поделиться одним скриншотом с ожидаемым результатом?

2. конечно, пожалуйста

3. цвет фона kuguar-sport-color для вложенной навигации?

4. ДА — kuguar-sport-color

Ответ №1:

Я переместил вложенное подменю внутри nav-btn-margin в относительное положение. Также добавлен inner-dropdown класс для подменю.

Попробуйте это решение и прокомментируйте для получения дополнительной помощи.

 $(document).ready(function() {
    const toggleSpeed = 50,
        toggleFade = "slow";

    $('div[data-v]').on('click', function(event) {
        if ($(event.target).prop('tagName') !== 'A') {
            var that = this,
                nav = $('#main-nav'),
                absoluteWrapper = nav.find('div[data-w="'   $(that).data('v')   '"]'),
                allAbsoluteWrappers = nav.find('div[data-w]'),
                list = {};

            if (!$(that).attr('was')) {
                if ($(that).attr('name') == 'main-nav') {
                    nav.find('div[data-p]').each(function() {
                        var that = this;
                        $(that).hide();
                    });
                    nav.find('div[name="main-nav"]').each(function() {
                        var that = this;
                        $(that).removeAttr('was');
                    });
                    $(that).attr('was', 'here');

                    if (absoluteWrapper.length != 0) {
                        allAbsoluteWrappers.removeClass('py-3');
                        absoluteWrapper.addClass('py-3');
                    } else {
                        allAbsoluteWrappers.removeClass('py-3');
                    }
                }
            } else {
                $(that).removeAttr('was');
                allAbsoluteWrappers.removeClass('py-3');
            }

            if ($(that).children('[id="nav-btn-childrens-'   $(that).data('v')   '"]').length != 0) {
                list = nav.find('div[id="nav-nested-childrens-'   $(that).data('v')   '"]').children();
            } else {
                list = nav.find('div[data-p='   $(that).data('v')   ']');
            }

            if (list != 'undefined' || list != null || list.length != 0) {
                list.each(function() {
                    var that = this;
                    if ($(that).css('display') == "none") { // || $(that).attr('name', 'nav-dropdown')
                        $(that).show(toggleSpeed, function() {
                            $(that).fadeIn(toggleFade);
                        });
                        //if ($(that).attr('name', 'nav-dropdown')) {
                        //    $(that).css('display', 'inline')
                        //}
                    } else {
                        $(that).hide(toggleSpeed, function() {
                            $(that).fadeOut(toggleFade);
                        });
                        nav.find('div[id="nav-nested-childrens-'   $(that).data('v')   '"]').children().each(function() {
                            var that = this;
                            $(that).hide(toggleSpeed, function() {
                                $(that).fadeOut(toggleFade);
                            });
                        });
                    }
                });
            }
        }
    });
});  
 * {
    box-sizing: border-box;
}

#main-nav a {
    z-index: 1000;
}

.logo-nav {
    position: absolute;
    top: 0;
    right: 95%;
    width: 75px;
    z-index: 999;
}

.nav-center {
    display: flex;
    justify-content: center;
}

.nav-center-nested {
    position: absolute !important;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: 998;
    width: 100%;
}

.nav-btn-clear {
    border-width: 0;
    border-style: none;
    border-color: transparent;
    border-image: none;
    background-color: transparent;
    outline: none !important;
    box-shadow: none !important;
}

.nav-margin {
    margin-left: 25%;
    margin-right: 25%;
}

.nav-padding {
    padding-left: 25%;
    padding-right: 25%;
}

.nav-btn:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

.nav-btn-margin {
    margin-top: -1rem;
    margin-bottom: -1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.nav-btn-center {
    text-align: center;
}

.nav-btn-right {
    text-align: right;
}

.nav-btn-left {
    text-align: left;
    max-width: 50px;
}

.kuguar-sport-color {
    background-color: rgba(227, 30, 36, 1);
}

.inner-dropdown {
    position: absolute;
    top: 100%;
    z-index: 1000;
    left: 0;
    background: #e31e24;
    width: 100%;
    max-width: 180px;
    margin: 0 auto;
    right: 0;
}

.inner-dropdown a {
    display: block;
    padding: 4px 10px 5px;
}  
 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="categories" class="col kuguar-sport-color no-padding no-margin">
    <nav id="main-nav">
        <div class="row nav-margin p-3 text-center">
            <div name="main-nav" class="col nav-btn nav-btn-margin" data-v="138">
                <button class="nav-btn-clear text-light"> Aktualności</button>
            </div>
            <div name="main-nav" class="col nav-btn nav-btn-margin" data-v="139">
                <button class="nav-btn-clear text-light"> O nas</button>
            </div>
            <div name="main-nav" class="col nav-btn nav-btn-margin" data-v="140">
                <button class="nav-btn-clear text-light"> Rowery</button>
            </div>
        </div>
        <div class="position-relative">
            <div data-w="139" name="nav-first" class="nav-center-nested row no-margin nav-padding text-center kuguar-sport-color">
                <div style="display: none;" class="nav-btn nav-btn-margin col position-relative" data-p="139" data-v="376"><a class="text-light" href="#"> o nas1</a>
                    <button id="nav-btn-childrens-376" class="nav-btn-clear text-light"><i style="color: white;" class="fa fa-chevron-circle-down" aria-hidden="true"></i></button>
                    <div id="nav-nested-childrens-376" class="text-left inner-dropdown">
                        <div style="display: none;" class="" data-p="376" data-v="379"><a class="text-light" href="#"> o nas11</a></div>
                        <div style="display: none;" class="" data-p="376" data-v="380"><a class="text-light" href="#"> o nas12</a></div>
                    </div>
                </div>
                <div style="display: none;" class="nav-btn nav-btn-margin col position-relative" data-p="139" data-v="377"><a class="text-light" href="#"> Górskie</a>
                    <button id="nav-btn-childrens-377" class="nav-btn-clear text-light"><i style="color: white;" class="fa fa-chevron-circle-down" aria-hidden="true"></i></button>
                    <div id="nav-nested-childrens-377" class="inner-dropdown text-left">
                        <div style="display: none;" class="" data-p="377" data-v="371"><a class="text-light" href="#"> testgorskie</a></div>
                        <div style="display: none;" class="" data-p="377" data-v="372"><a class="text-light" href="#"> testgorskie2</a></div>
                        <div style="display: none;" class="" data-p="377" data-v="373"><a class="text-light" href="#"> testgorskie3</a></div>
                        <div style="display: none;" class="" data-p="377" data-v="374"><a class="text-light" href="#"> testgorskie1-1</a></div>
                        <div style="display: none;" class="" data-p="377" data-v="375"><a class="text-light" href="#"> testgorskie1-2</a></div>
                    </div>
                </div>
                <div style="display: none;" class="nav-btn nav-btn-margin col position-relative" data-p="139" data-v="378"><a class="text-light" href="#"> Dziecięce</a>
                    <button id="nav-btn-childrens-378" class="nav-btn-clear text-light"><i style="color: white;" class="fa fa-chevron-circle-down" aria-hidden="true"></i></button>
                    <div id="nav-nested-childrens-378" class="inner-dropdown text-left">
                        <div style="display: none;" class="" data-p="378" data-v="381"><a class="text-light" href="#"> Dziecięce1</a></div>
                        <div style="display: none;" class="" data-p="378" data-v="382"><a class="text-light" href="#"> Dziecięce2</a></div>
                        <div style="display: none;" class="" data-p="378" data-v="383"><a class="text-light" href="#"> Dziecięce21</a></div>
                    </div>
                </div>
            </div>
        </div>
    </nav>
</div>

Комментарии:

1. Спасибо — я пытаюсь это реализовать, но я не могу изменить html, который генерируется динамически. Добавленная вами формула имеет другую иерархию html. В конце концов, этот пример показывает мне способ приближения.

2. Без изменения html немного сложно выровнять подменю. Даже класс также динамический?

3. к сожалению, да, я не интерфейсный разработчик, и мне было поручено создать навигацию и добавить стили. Я воспринял это плохо, потому что сначала я сгенерировал код для bootstrap (я не очень хорошо знаю этот фреймворк) и подумал, что позже будет легко добавить немного css. Теперь я знаю, что это была плохая идея — в будущем мне придется сначала создать шаблон, а затем создавать для него код. в любом случае ваш ответ помог мне — действительно. Я не использовал ее в соотношении 1: 1, но это было полезно.