オーバーレイを上向きに拡大する

thisでは、単純なW3Schoolsの例では、オーバーレイはページの上から始まり、下に拡大されます。ページの一番下から拡大してトップに到達した結果をどうすれば達成できますか？ 'トップ：0'オーバーレイを上向きに拡大する

CSS

/* The Overlay (background) */ 
.overlay { 
    /* Height & width depends on how you want to reveal the overlay (see JS below) */  
    height: 0; 
    width: 100%; 
    position: fixed; /* Stay in place */ 
    z-index: 1; /* Sit on top */ 
    left: 0; 
    top: 0; 
    background-color: rgb(0,0,0); /* Black fallback color */ 
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */ 
    overflow-x: hidden; /* Disable horizontal scroll */ 
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */ 
}

JAVASCRIPT

/* Open */ 
function openNav() { 
    document.getElementById("myNav").style.height = "100%"; 
} 

/* Close */ 
function closeNav() { 
    document.getElementById("myNav").style.height = "0%"; 
}

HTML CSS削除で

<body> 
<!-- The overlay --> 
<div id="myNav" class="overlay"> 

    <!-- Button to close the overlay navigation --> 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 

    <!-- Overlay content --> 
    <div class="overlay-content"> 
    <a href="#">About</a> 
    <a href="#">Services</a> 
    <a href="#">Clients</a> 
    <a href="#">Contact</a> 
    </div> 

</div> 

<!-- Use any element to open/show the overlay navigation menu --> 
<span onclick="openNav()">open</span> 
</body>

出典

2016-11-20 Alexander Edwards

top:0

<html><head> 
 
    <style type="text/css"> 
 
    
 
/* The Overlay (background) */ 
 
.overlay { 
 
    /* Height & width depends on how you want to reveal the overlay (see JS below) 
 

 
*/  
 
    height: 0; 
 
    width: 100%; 
 
    position: fixed; /* Stay in place */ 
 
    z-index: 1; /* Sit on top */ 
 
    left: 0; 
 
    bottom: 0; 
 
    background-color: rgb(0,0,0); /* Black fallback color */ 
 
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */ 
 
    overflow-x: hidden; /* Disable horizontal scroll */ 
 
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down 
 

 
the overlay (height or width, depending on reveal) */ 
 
} 
 
    </style> 
 

 
    <title></title> 
 

 
    
 
    
 

 

 

 

 
<script type="text/javascript"> 
 

 
/* Open */ 
 
function openNav() { 
 
    document.getElementById("myNav").style.height = "100%"; 
 
} 
 

 
/* Close */ 
 
function closeNav() { 
 
    document.getElementById("myNav").style.height = "0%"; 
 
} 
 
</script> 
 

 
    
 
</head> 
 

 
<body> 
 
    
 
    
 

 

 

 

 
</body> 
 
<body> 
 
<!-- The overlay --> 
 
<div id="myNav" class="overlay"> 
 

 
    <!-- Button to close the overlay navigation --> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 

 
    <!-- Overlay content --> 
 
    <div class="overlay-content"> 
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
    </div> 
 

 
</div> 
 

 
<!-- Use any element to open/show the overlay navigation menu --> 
 
<span onclick="openNav()">open</span> 
 
</body> 
 
</html>

出典

2016-11-20 07:22:37 jafarbtech

でbottom:0を置き換えるには、どうもありがとうございました！これが解決策でした！ –

@AlexanderEdwardsようこそ – jafarbtech

と 'ボトム：0' を追加。お役に立てれば。

出典

2016-11-20 06:31:48 Ishara

オーバーレイを上向きに拡大する

答えて

関連する問題