Question

我打算在打开栏时尝试制作侧边栏，它会淡出页面的其余部分。

<!DOCTYPE html>
<html>
    <head>
        <title>Westfield Technical Academy</title>
            <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <script src="Script.js"></script>
        </head>
     <div id="f8">


        <!-- Sidenavigation bar START -->
        <div id="UI" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
         <a href="#">Home</a>
            <a href=#>Why Choose WTA?</a>
                <a href="#">Curriculum</a>
                    <a href="#">Calendar</a>
                        <a href="https://www.google.com/maps/place/Westfield+Technical+Academy/@42.1248287,-72.7612531,18.5z/data=!4m5!3m4!1s0x89e71ef99f3dc06f:0x24f5c6d465aec0ea!8m2!3d42.1249721!4d-72.7613427">Location (Works)</a>
        </div>

        <!-- Pushes site to the right -->
        <div id="main">
         <span style="font-size:20px;cursor:pointer" onclick="openNav()">&#9776; More Info</span>
        </div>
        <body id="bg">
        <div class="pootis"></div>
        <p class="maintext">We are Committed to Excellence, and we work hard to make the site a primary source for timely information for all users, and a main gateway for improved communication between parents, teachers, students and other members of our community. Westfield Technical Academy provides a quality education through shared responsibility in a safe supportive environment for all students to meet the challenges of a global society.</p>
        </body>
        <!-- Sidenavigation bar END -->


           </div>
    </html>


    CSS:



/* Purple Background */
#bg {background-color:#c58414;
    background-image:url(wta.jpg);
    background-repeat:no-repeat;
    background-size: cover;
    background-attachment: fixed;


}

/* Sidenav Menu (ClassIs: UI) */
.sidenav {
    height: 100%;
        width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left; 0;
    background-color: #111;
    overflow-x: hidden;
    padding: 0px;
    transition: 0.5s;
}

/* Sidenav Nav UI Links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
        font-size: 25px;
    color: #313131;
        display: block;
    transition: 0.4s;
}

/* When u mouse over link, change color */
.sidenav a:hover, offcanvas a:focus{
    color: #f1f1f1
}

/* Position and Style the close button (TRC) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size; 36px;
    margin-left: 50px;
}

/* Style page content - use this if u want to push content to right when u open sidenav */
#main {
    transition: margin-left .5s;
    padding: 20px;
}

/* Smaller Screens */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidemav a {font-size 18px;}
}

.moar {
    padding-right: 65em
}

.pootis {
    background-image: url(z2.png);
    height: 425px;
    background-repeat: no-repeat;
    position: relative;
    width: 590px;
    margin: auto;
}
.maintext {
    background-color:white;
    font-size: 19px;
    width: 700px;
    text-align: center;
    position: relative;
    margin-left: 550px;
}

.f8 {
    height: 100%;
    background-size: cover;
}

.text1 {
    background-color: whitesmoke;
}



JS:



/* Set the width of the side nav to 250px */
function openNav() {
    document.getElementById("UI").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
    document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
    document.getElementsByTagName("body")[0];
}

/* Set the width of Sidenav to 0 and left Margin of PC to 0 and bgc 2 fffff */
function closeNav() {
    document.getElementById("UI").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
    document.body.style.backgroundColor = "fffff";
}

非常感谢帮助，因为这是一个学校项目，我们重新创建学校登陆页面。当然，我想尝试做一些高级的东西：p，并尝试做一个漂亮的侧边栏，只是它没有用。帮助

编辑：我先搞砸了粘贴，所以我编辑的帖子更具可读性。

Answer 1

在这里，我删除了脚本标签，只需将脚本保存在您的html文件中。

HTML：

<!DOCTYPE html>
<html>
<head>
<title>Westfield Technical Academy</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body id="bg">

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">Home</a>
  <a href=#>Why Choose WTA?</a>
  <a href="#">Curriculum</a>
  <a href="#">Calendar</a>
  <a href="https://www.google.com/maps/place/Westfield+Technical+Academy/@42.1248287,-72.7612531,18.5z/data=!4m5!3m4!1s0x89e71ef99f3dc06f:0x24f5c6d465aec0ea!8m2!3d42.1249721!4d-72.7613427">Location (Works)</a>
</div>

<div id="main">
 <span style="font-size:20px;cursor:pointer" onclick="openNav()">&#9776; More Info</span>
</div>
<div class="pootis">
        <p class="maintext">We are Committed to Excellence, and we work hard to make the site a primary source for timely information for all users, and a main gateway for improved communication between parents, teachers, students and other members of our community. Westfield Technical Academy provides a quality education through shared responsibility in a safe supportive environment for all students to meet the challenges of a global society.</p>
</div>


<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
    document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
    document.body.style.backgroundColor = "white";
}
</script>

</body>
</html>

你提供了css：

body {
    font-family: "Lato", sans-serif;
    transition: background-color .5s;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/* Purple Background */
#bg {background-color:#c58414;
    background-image:url(wta.jpg);
    background-repeat:no-repeat;
    background-size: cover;
    background-attachment: fixed;


}

/* Sidenav Menu (ClassIs: UI) */
.sidenav {
    height: 100%;
        width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left; 0;
    background-color: #111;
    overflow-x: hidden;
    padding: 0px;
    transition: 0.5s;
}

/* Sidenav Nav UI Links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
        font-size: 25px;
    color: #313131;
        display: block;
    transition: 0.4s;
}

/* When u mouse over link, change color */
.sidenav a:hover, offcanvas a:focus{
    color: #f1f1f1
}

/* Position and Style the close button (TRC) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size; 36px;
    margin-left: 50px;
}

/* Style page content - use this if u want to push content to right when u open sidenav */
#main {
    transition: margin-left .5s;
    padding: 20px;
}

/* Smaller Screens */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidemav a {font-size 18px;}
}

.moar {
    padding-right: 65em
}

.pootis {
    background-image: url(z2.png);
    height: 425px;
    background-repeat: no-repeat;
    position: relative;
    width: 590px;
    margin: auto;
}
.maintext {
    background-color:white;
    font-size: 19px;
    width: 700px;
    text-align: center;
    position: relative;
    margin-left: 550px;
}

.f8 {
    height: 100%;
    background-size: cover;
}

.text1 {
    background-color: whitesmoke;
}

heres a jsfiddle of it working

Answer 2

将您的整个侧面导航放入具有不透明度的div部分。

SideNavigation Bar Opacity不起作用

2 个答案: