![](/img/trans.png)
[英]How to create a fixed sidebar using ReactJS? The sidebar should collapse in smaller screens
[英]How to collapse a sidebar on small screens?
我正在制作一個固定的側邊欄,但它不會崩潰..我真的不知道該怎么做。
我在互聯網上搜索過..仍然找不到任何結果。
這是我的 sidebar.html
<div class="container-fluid" style="background-color:#19334d">
<div class="sidebar" id="sidebar">
<div class="pt-5 text-center pb-2 ">
<a href="../index.php" class="logo-normal pr-3">
<img src='../assets/img/favicon.ico' width="50px">
</a>
<a href="../index.php" class="logo-normal">
Fitness Addict
</a>
</div>
<hr style="border-color:white; width:90%" align=center>
<ul class="nav pl-4">
<li >
<a href="../home/myhome.php">
<i class="fa fa-home icon pr-4"></i>
My Home
</a>
</li>
.
.
.
</ul>
</div>
css:
.sidebar{
height: calc(100vh - 90px);
width: 230px;
position: fixed;
top: 0;
left: 0;
z-index: 1;
background-size: cover;
background-position: center center;
display: block;
background: #408000;
box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.6);
margin-top: 80px;
margin-left: 20px;
border-radius: 5px;
}
.sidebar .nav {
margin-top: 20px;
display: block;
}
您的 JavaScript 可能如下所示:
/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */
function openNav()
{
document.getElementById("sidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav()
{
document.getElementById("sidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
然后您需要使用相關代碼將此 JS 添加為 HTML 上的源代碼。 通過W3Schools創建可折疊側邊欄的教程。
您可能還想在這里查看 W3Schools 上很棒的響應式側邊欄教程。
折疊:
max-width: 0;
沒有倒塌:
max-width: auto;
您可以將屬性添加到側邊欄
tranform:translateX(-100%);
當側邊欄處於活動狀態時,使用 js 添加活動類並添加 css
sidebar.active{
tranform:translateX(0%);
}
到側欄的父級添加屬性
.parent{
overflow-x:hidden;
}
沒有倒塌:
.sidebar {
transition: left 0.3s ease-out;
}
通過添加類“隱藏”折疊:
.sidebar.hide {
left: -295px;
}
-295px 因為寬度是 230px,margin-left 是 20px 並且 box-shadow 有模糊 45px
您可以使用 css 和transition
屬性。
在 .css 中:
.sidebar {
// your current code
left: -210px; // example
transition: left 2s ease;
}
.sidebar:hover{
left: 0px;
}
這將使您的 div 在 2 秒內滑動,並在不再停留時消失。
請參閱此處的示例。
試試 Bootstrap,它可以輕松地為所有設備創建響應式網站,您還可以找到許多其他很酷的選項! 查看他們的文檔
您可以使用媒體查詢來檢測屏幕尺寸,然后隱藏較小尺寸的側邊欄:
.sidebar{ height: calc(100vh - 90px); width: 230px; position: fixed; top: 0; left: 0; z-index: 1; background-size: cover; background-position: center center; display: block; background: #408000; box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.6); margin-top: 80px; margin-left: 20px; border-radius: 5px; } .sidebar .nav { margin-top: 20px; display: block; } @media (max-width: 400px) { .sidebar { display: none; } }
<div class="container-fluid" style="background-color:#19334d"> <div class="sidebar" id="sidebar"> <div class="pt-5 text-center pb-2 "> <a href="../index.php" class="logo-normal pr-3"> <img src='../assets/img/favicon.ico' width="50px"> </a> <a href="../index.php" class="logo-normal"> Fitness Addict </a> </div> <hr style="border-color:white; width:90%" align=center> <ul class="nav pl-4"> <li > <a href="../home/myhome.php"> <i class="fa fa-home icon pr-4"></i> My Home </a> </li> </ul> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.