0
私は最初にメニューの左端にプラスの位置にあるスライドアウトメニューを作成しようとしています。それは私がすることができた左から右にスライドします。しかし、私のスライドメニューでは、ホームページのdivをスライドさせて右に押すようにしたい。 slide-menuはdivを左に押し出しますが、これはホームページのdivに絶対位置を与えることでできました。しかし、問題は、メニューをクリックしてスライドメニューを右に閉じると、ホームページのdivが最初にポップアップしてから、スライドメニューをたどってスムーズにスライドメニュー。スムーズにスライドするのではなく、左にスライドすると右側のdivがポップアップする
また、メニューが左から右にスライドすると、縦横のスクロールバーが表示されますが、これは望ましくありません。親要素に "overflow x"を適用して修正しようとしましたが、解決しませんでした。誰でも助けてくれますか？
私はここで同様の質問を探してみましたが、問題を解決するのに役立つものは見つかりませんでした。ここで
は、私が現在持っているものです。
document.getElementById('toggler').onclick = function(){
document.getElementById('side-bar').classList.toggle('active');
document.getElementById('Right-Page').classList.toggle('active');
}* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 100%;
font-family: 'Lora', serif;
}
#side-bar{
width: 60%;
height: 100vh;
background-color: black;
display: inline-block;
margin-left: -60.5%;
transition: all 0.6s ease;
vertical-align: top;
}
#side-bar.active {
margin-left: 0%;
}
#side-bar ul {
list-style: none;
}
#side-bar ul li {
margin-top: 15px;
margin-left: 20px;
float: left;
}
#side-bar ul a {
text-decoration: none;
color: white;
}
#side-bar ul li:hover {
border-bottom: solid 1px #ffffff;
}
#Right-Page {
display: inline-block;
vertical-align: top;
width: 100%;
height: 100vh;
background-color: red;
}
#Right-Page.active{
position: absolute;
}
#toggler{
margin-top: 8px;
}
#toggler span{
background-color: #000000;
width: 35px;
height: 4px;
display: block;
margin-bottom: 5px;
margin-left: 10px;
}<!Doctype html>
<html lang="en">
<head>
<title>Side Bar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Lora"
rel="stylesheet">
</head>
<body>
<div id="main-container">
<div id="side-bar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
<div id="Right-Page">
<div id="toggler">
<span></span>
<span></span>
<span></span>
</div>
<div id="main-text">
</div>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
ありがとう、それは働いた。ちなみに、 "overflow-x：hidden"を本体に適用することで、水平スクロールバーと垂直スクロールバーに関するもう1つの問題を解決できました。再度、あなたの助けをありがとう！ – einacio
@einacioこの回答があなたのために働いた場合は、それを受け入れてください（緑色のダニ） –
なぜ私にタグを付けますか？タグ@einacio。そして、あなたは正しいです。彼は、回答ポイントをどれくらい多く持っているかにかかわらず、答えを受け入れることができます。 –