Блог

Главная - Вопросы по программированию - как предотвратить вытеснение div всплывающего меню другими разделами содержимого?

как предотвратить вытеснение div всплывающего меню другими разделами содержимого?

#javascript #html #css

Вопрос:

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

HTML:

 <!------- Pop out menu for Side Navigation Bar ------->
<div class = "popout_navbar_align_center">
    <div class = "menu_nav_inner align-center pad-2">
        <ul>
            <li><button class="static_nav_btn"><a href="#">THE MISSION</a></button></li>
            <li><button class="static_nav_btn"><a href="#">OUR WORK</a></button></li>
            <li><button class="static_nav_btn"><a href="#">WHO WE ARE</a></button></li>
            <li><button class="static_nav_btn"><a href="#">MISS ROSIE</a></button></li>
            <li><button class="static_nav_btn"><a href="#">SCHOLARSHIP</a></button></li>
            <li><button class="static_nav_btn"><a href="#">CONTACT</a></button></li>
        </ul>
        
        <div class="box">
          <a href="#" class="btn btn-white btn-animation-1">DONATE</a>
        </div>
    </div>
    
</div>


<!------- Hamburger Top Navigation Bar for 768px and smaller screens ------->
<div class = "navBar_top">
    <div class = "hamburger-bar-center" id ="topNavId" onclick="myFunction(this)">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
    </div>
</div>


<!------- Main body ------->
<main id="content" class="flex-grow">
    <div id="homepage-banner">
        <div class="page-banner">
            <h2 class="small-hidden">
                FOUNDATION
            </h2>
        </div>
    </div>
</main>

CSS:
(Всплывающее меню)

 .popout_navbar_align_center {
    background-image: url("Assets/Textures/sandpaper.png");
    background-color:;
    width: 240px;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    overflow-x: hidden;
}

.popout_navbar_align_center .menu_nav_inner {
    padding-top: 60px;
}

**JAVASCRIPT: **

 $("#sideNavId").on("click", function() {

         
         
         if($(".popout_navbar_align_center").is(":visible"))
         {
             $(".popout_navbar_align_center").hide("slow");
         }
         else {
             $(".popout_navbar_align_center").show("slow");
         }
         
     });

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

Ответ №1:

Вы можете попробовать использовать значения top и left css вместе с position: absolute тем, чтобы ваше всплывающее окно не перемещало остальную часть содержимого, а вместо этого плавало перед ним

Метки: