将移动菜单拉伸到全屏高度

Question

currently I have this mobile menu

 $(document).ready(() => { $("#btnMenu").click(() => { toggleMenu(); }); $(".navbarLink").click(() => { if ($("#navbarItems").hasClass("activeNavbar")) { toggleMenu(); } }); }); function toggleMenu() { $("#navbarItems").toggleClass("activeNavbar"); toggleMenuBtn(); } function toggleMenuBtn() { $("#btnMenu").toggleClass("activeMenuBtn"); } 

 .link { text-decoration: none; } body { margin: 0; } #navbar { height: 60px; top: 0; padding-left: 200px; padding-right: 200px; position: sticky; background: #1e222a; } #navbarItems { height: 100%; display: flex; align-items: center; } #logoLink { display: flex; align-items: center; } #navbarItems .navbarItemContainer:not(:first-child) { margin-left: 30px; } .navbarItemContainer { background: #1e222a; } .navbarLink { font-weight: bold; color: #ffffff; } .navbarLink:hover { color: #3abcf3; } #btnMenuContainer { height: 100%; display: none; } #btnMenu { cursor: pointer; } .menuBtnBar { width: 35px; height: 5px; margin: 6px 0; background-color: #ffffff; transition: 0.4s; } .activeMenuBtn #barTop { transform: rotate(-45deg) translate(-9px, 6px); } .activeMenuBtn #barCenter { opacity: 0; } .activeMenuBtn #barBottom { transform: rotate(45deg) translate(-8px, -8px); } @media(max-width: 1200px) { #navbar { padding-left: 150px; padding-right: 150px; } } @media(max-width: 1100px) { #navbar { padding-left: 0; padding-right: 0; } #navbarItems .navbarItemContainer:not(:first-child) { margin-left: 0; } #navbarItems .navbarItemContainer:not(:last-child) { border-bottom: 1px solid #676767; } #btnMenuContainer { display: flex; align-items: center; } #btnMenu { margin-left: 20px; } #navbarItems { margin-left: 0; display: none; } #logoLink { display: inline-block; } .navbarItem { width: 100%; text-align: center; } #navbarItems.activeNavbar { display: block; } .navbarLink { width: 100%; height: 100%; display: inline-block; padding: 30px 0; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="navbar"> <div id="btnMenuContainer"> <div id="btnMenu"> <div id="barTop" class="menuBtnBar"></div> <div id="barCenter" class="menuBtnBar"></div> <div id="barBottom" class="menuBtnBar"></div> </div> </div> <div id="navbarItems"> <div class="navbarItemContainer"> <div class="navbarItem"> <a id="logoLink" class="link navbarLink" href="#"> <img class="img" src="http://icons.iconarchive.com/icons/ph03nyx/super-mario/128/Hat-Mario-icon.png"> </a> </div> </div> <div class="navbarItemContainer"> <div class="navbarItem"> <a class="link navbarLink" href="#sectionTwo"> Link 2 </a> </div> </div> <div class="navbarItemContainer"> <div class="navbarItem"> <a class="link navbarLink" href="#sectionThree"> Link 3 </a> </div> </div> </div> </div> 

and I want to stretch the mobile menu to full width. So I would have to calculate the height for each link based on the amount of links.

Given a screen height of 100% and the amount of n links I think the height per link would be

100% / n - (menubarHeight / n)

how can I setup my CSS that each link takes this height? I just want to divide the pages height by the amount of links.

You can see a desired mobile menu example on this page

https://www.thenativeweb.io/#

Within my @media(max-width: 1100px) the the bottom I think I have to change the padding here

  .navbarLink {
    width: 100%;
    height: 100%;
    display: inline-block;
    padding: 30px 0;
  }

How do I setup a full height menu?

Answer 1

The menu in your example is using flexbox:

.menu-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* This will make the container as high as the viewport
       Use calc(100vh - menubarHeight) if you need to make some room for it,
       or create another flex container which contains the menubar and this
       container. */
    height: 100vh; 
}

.menu-item {
    flex: 1 1 100%;
    align-items: center;
    justify-content: center;
}

Menu container is a flex container, which tells all children to stretch to fill the remaining space. Children are flex items which can shrink or grow automatically and they are center aligned both horizontally and vertically.

Also the parent of the menu container is a flex container, meaning that you don't have to calculate and subtract the height of the menubar, as flexbox will take care of it for you.

I recommend you to study https://css-tricks.com/snippets/css/a-guide-to-flexbox/ to understand how it works.

Answer 2

Try the following jQuery script it will fix you navigation and allow you to have multiple navigation link with different height. I tried to make the code self explanatory. Let me know if you can't understand it

function fixTheMobileNavigation() {
    var $links = $('.navbarItemContainer'),
        linksContainerFixedHeight = $(window).height() - $('#btnMenuContainer').height(),
        linksLength = $links.length,
        linkNecesseryHeight = (linksContainerFixedHeight / linksLength) - (linksLength - 1);

    $('.link.navbarLink').css('padding', 0)

    $links.each(function(i, item) {
        var paddingTobBottom = ((linkNecesseryHeight - $(item).find(':last').height()) / 2) + "px 0px"
        $(item).css('padding', paddingTobBottom)
    })
}

if($(window).width() < 500) fixTheMobileNavigation()