Css de çözümleyemediğim sorun

Merhaba mobilde gözükecek tam ekran bir menü kodlamaya çalıştım fakat menüyü açtığımda scroll bar menü altındaki sayfadaki içeriğe göre ayarlıyor. ve alt kısıma ulaşamıyorum.
Scroll barı nasıl mobil menüye uyarlarım?
Menü açılısına animasyon nasıl animasyon eklerim ?

.menu{
width:100%
}
.mobile-hLogo{
display: block;
padding: 1.5rem 5rem;
margin: 0 auto;
text-align:center;
}
.mobile-menu{
display:block;
text-decoration:none;
padding-left:1.2rem
}
nav.ustmenu{
margin: 0;
background: white 100%;
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: 100vh;
display: none;
z-index: 10;
max-height: 100vh;
height: 100vh;

}
.head-close{
display: block;
font-size:1rem;
cursor:pointer;
color:#5a5a5a;
padding: 0.3rem;
}
.head-close i{
font-size: 2rem;
}
.menu li{
display:block;
margin:0
}
.menu li a{
font:13px/30px Tahoma;
background:#fff;
color:#797979;
border-top:1px solid #e0e0e0;
border-left:3px solid #fff
}
.menu li a:hover,.menu li:hover>a{
background:#f0f0f0;
color:#797979;
border-left:3px solid #00868b
}
.menu ul{
display:block;
position:relative;
top:0;
left:0;
width:100%
}
.menu ul li{
padding-left:5px
}
.menu ul ul{
left:0
}

<nav class="ustmenu" style="display: block;">
<span class="head-close"><i class="fas fa-times-circle fa-rotate-180"></i></span>
<div class="mobile-hLogo"><img class="head-logo" src="http://davulgablog/yuklenenler/logo/Davulga-koyu-logo-08_09_21-861398.png" alt="logo"></div>
<ul class="menu"><li><a href="http://davulgablog"><i class="fas fa-home"></i> Anasayfa</a></li>
<li><a href="http://davulgablog/haberler"><i class="fas fa-newspaper"></i> Haberler</a></li>
<li><a href="http://davulgakoyu.com"><i class="fas fa-pencil-alt"></i> Davulga Blog</a></li>
<li><a href="http://davulgablog/galeriler"><i class="fas fa-image"></i> Resim Galerisi</a></li>
<li><a href="#"><i class="fas fa-globe"></i> Diğer Sitelerimiz</a><ul><li><a href="#"><i class="fas fa-dot-circle"></i> Köy sitelerimiz</a><ul><li><a href="#"><i class="fas fa-bullseye"></i> Davulga Blog</a></li>
<li><a href="#"><i class="fas fa-dot-circle"></i> Davulga Org</a></li>
</ul></li>
<li><a href="#"><i class="fas fa-heartbeat"></i> Sağlık Sitelerimiz</a><ul><li><a href="http://acilsaglik.net"><i class="fas fa-heart"></i> Acilsağlık</a></li>
<li><a href="http://saglikmeslek.com"><i class="fas fa-heart"></i> Sağlık Meslek</a></li>
<li><a href="http://hemsireden.com"><i class="fas fa-heartbeat"></i> Hemşireden</a></li>
</ul></li>
</ul></li>
<li><a href="http://davulgakoyu.com/hakkimizda"><i class="fas fa-building"></i> Kurumsal</a></li>
<li><a href="http://localhost/muzik/"><i class="fas fa-music"></i> Davulga Müzik</a></li>
<li><a href="http://davulgablog/bize-ulasin"><i class="fas fa-envelope"></i> İletişim</a></li>
<li><a href="http://davulgakoyu.com/d-rss"><i class="fas fa-rss"></i> Davulga Rss</a></li>
<li><a href="#"><i class="fas fa-sitemap"></i> Sitelerimiz</a><ul><li><a href="#"><i class="fas fa-angle-right"></i> Sitelerimiz2</a></li>
</ul></li>
</ul><div style="color:grey">slplepfelpflewp<br><p></p><br>flewpflepfelwp<p></p>flewfpewlfpelfepflepflefp<br><br>elfpeflepflep</div></nav>

$(document).ready(function(){
var touch  = $('#touch-menu');
var menu   = $('.ustmenu');
var close   = $('.head-close');
$(touch).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
var alt= $(".altmenu");
$(touch).on("click",function(e){
alt.slideToggle();
});
});
$(close).on('click', function(e) {
e.preventDefault();
menu.css("display","none");
});
$(window).resize(function(){
var w = $(window).width();
if(w > 767 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});

});

Merhaba
Yolda olduğum için mobilden bakıyorum.

Sanırım media stiller eksik.

Bakın şu harika bir örnek :

https://codepen.io/tiffachoo/pen/yzZRXK

Selam,
Scroll bar sorununu, nav.ustmenu öğesine overflow-y: auto ekleyerek ve menü içeriğinin ekran yüksekliğini aşmamasını sağlayarak çözebilirsiniz:

nav.ustmenu {
    margin: 0;
    background: white 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 100vh;
    height: 100vh;
    overflow-y: auto; /* Menü içinde kaydırma yapılmasına izin verir */
    display: none;
    z-index: 10;
}

.menu {
    padding-bottom: 2rem; /* Daha iyi kaydırma için alt tarafa biraz boşluk ekleyin */
}

Animasyon için:

nav.ustmenu {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transform: translateX(-100%); /* Başlangıçta ekran dışında */
    opacity: 0;
}

nav.ustmenu.open {
    transform: translateX(0); /* Görünür hale gelir */
    opacity: 1;
}

Animasyonu tetiklemek için open sınıfını ekleyecek ve kaldıracak şekilde değiştirebilirsiniz:

$(document).ready(function(){
    var touch  = $('#touch-menu');
    var menu   = $('.ustmenu');
    var close   = $('.head-close');
    
    $(touch).on('click', function(e) {
        e.preventDefault();
        menu.addClass('open'); // Menüyü göstermek için sınıf ekleyin
    });
    
    $(close).on('click', function(e) {
        e.preventDefault();
        menu.removeClass('open'); // Menüyü gizlemek için sınıfı kaldırın
    });
    
    $(window).resize(function(){
        var w = $(window).width();
        if(w > 767 && menu.hasClass('open')) {
            menu.removeClass('open');
        }
    });
});

Teşekkür ederim sorunum çözüldü.

Rica ederim.