html - 使用媒体查询切换 sideBar(iFrame)

Question

如果屏幕分辨率小于 768 像素，我会在我的代码中放置一些媒体查询； .sideBar 就这样消失了，留下了 .main 部分。

@media (max-width: 768px) {
    .sideBar {
        display: none !important;
    }
}

我想要实现的是当屏幕分辨率是这样时，我希望出现一个汉堡包图标，允许我切换打开/关闭 .sideBar。

我将如何在代码方面解决这个问题？

如果以前有类似的教程，请附上。

附上原始代码:

/* Copyright (c) myEd (made by students, for students.) 2018. */

body { /* General Body Properties */
    font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
    margin: 0;
    overflow: hidden;
}

* { /* Key element to aligning <divs> (DO NOT REMOVE) */
    box-sizing: border-box;
}

#wrapper {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0
}

.header { /* Header properties featuring myEd and school emblems */
    padding: 30px;
    text-align: center; /* Aligns links in the navBar */
    background-image: url(/Default/Img/backgroundHeader-4K.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.myEd-reverse {
    width: 240px;
    height: 70px;
    float: left;
    margin-left: -60px;
    margin-top: -40px;
}

.navBar { /* Sticky navBar, either relative or fixed, depending on the scroll position of the site */
    overflow: hidden;
    background-color: #333;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 100000;
}

.navBar a { /* Style the navBar links */
    float: left;
    display: block;
    color: #fff;
    text-align: center;
    padding: 6px 12px;
    text-decoration: none;
}

.navBar a.right { /* Float Quick Links, Help and Log-out navBar directory items to the right of the navBar */
    float: right;
}

.navBar a:hover { /* Change color on hover */
    background-color: #ddd;
    color: #000;
}

.navBar a.active { /* Active Link */
    background-color: #666;
    color: #fff;
}

.modalDialog { /* Modal Properties for all modals in myEd */
	position: fixed;
	font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}

.modalDialog:target { /* Modal Properties for all modals in myEd */
	opacity:1;
	pointer-events: auto;
}

.modalDialog > div { /* Modal Properties for all modals in myEd */
	width: 400px;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #d7d7d7;
	background: -moz-linear-gradient(#ddd, #666);
	background: -webkit-linear-gradient(#ddd, #666);
	background: -o-linear-gradient(#ddd, #666);
}

.close { /* Modal Properties for all modals in myEd */
	background: #606061;
	color: #FFFFFF;
	line-height: 10px;
	position: absolute;
	right: -5px;
	text-align: center;
	top: -10px;
	width: -5px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; } /* Modal Properties for all modals in myEd */

.textModalh2 { /* Text preferences of the modal box directed from the navBar */
    margin-top: 18px;
    margin-bottom: -15px;
}

.textModalh5 { /* Text preferences of the modal box directed from the navBar */
    margin-bottom: -15px;
}

.CARTHmodal { /* Image preferences of CARTH in the modal box directed from the navBar */
    border-radius: 50%; 
    height: 130px; 
    width: 120px;
    float: left;
    margin-right: 40px;
    margin-top: 15px
}

.row { /* Alignment between sideBar and main */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.sideBar { /* sideBar alignment properties */
    -ms-flex: 20%;
    flex: 20%;
    background-color: #a7a7a7;
    padding: 0px;
    height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */
    overflow-y: scroll; /* Allows myEd news to scroll */
    overflow: hidden;
    position: relative;
}

#newsmyEd {
    position: absolute;
    width: 100%;
    height: calc(100vh - 120px);
    top: 0;
    right: 0;
}

.main { /* Main Column */
    -ms-flex: 80%;
    flex: 80%;
    background-color: #a7a7a7;
    padding: 0px;
    height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */
    overflow-y: scroll; /* Allows embedded iFrame to scroll */
    position: relative;
    overflow: hidden;
}

.frameMain { /* Frame Properties */
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    height: calc(100vh - 120px);
}

.footer { /* Footer properties */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #333;
}

.footer a { /* Footer navBar properties */
    float: right;
    display: block;
    color: #fff;
    text-align: center;
    padding: 6px 12px;
    text-decoration: none;
}

.footer a:hover { /* Change color on hover */
    background-color: #ddd;
    color: #000;
}

.footer a.active { /* Active Link */
    background-color: #666;
    color: #fff;
} 

@media (max-width: 768px) {
    .sideBar {
        display: none !important;
    }
}

<!DOCTYPE HTML>
<!-- Copyright (c) myEd (made by students, for students.) 2018. -->
<html lang="en">
<head>
<title>Welcome | myEd</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/Home/Welcome/Style/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<link rel="shortcut icon" href="/Default/Img/faviconmyEd-16x16.png">
</head>

<body>
<script> // Required scripts for certain activities on myEd, each entry will be noted for understanding
</script>
<div id="wrapper"> <!-- Wrapper fitting website to all screen resolutions -->
<div class="header"> <!-- Header featuring 4K Background, myEd and school emblems -->
<img src="/Default/Img/myEd-reverse.png" class="myEd-reverse" alt="myEd" title="myEd Software"> <!-- myEd Software -->
</div> 
<div class="navBar"> <!-- Main sticky navBar with categories listed -->
<a href="#" class="active" title="Home Workspace"><i class="fa fa-home"></i></a> <!-- Home -->
<a href="#" title="Learning Workspace"><i class="fa fa-book"></i></a> <!-- Learning -->
<a href="#" title="Student Management Workspace"><i class="fa fa-user"></i></a> <!-- Student Management -->
<a href="#" title="Portal Workspace"><i class="fa fa-globe"></i></a> <!-- Portals -->
<a href="#" class="right" title="Log-out"><i class="fas fa-sign-out-alt"></i></a> <!-- Log-out (right to left) -->
<a href="#" class="right" title="Help"><i class="fa fa-question-circle"></i></a> <!-- Help (right to left) -->
<a href="#modalQL" class="right" title="Quick Links"><i class="fa fa-bookmark"></i></a> <!-- Quick Links (right to left) -->

<div id="modalQL" class="modalDialog">
<div>
<a href="#close" title="Close Quick Links" class="close">X</a>
<h3>Quick Links</h3>
<h6><a href="https://kempsey.cs.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Learn">SEQTA Learn</a></h6>
<h6><a href="https://kempsey.cp.adventist.edu.au/" target="_blank" rel="noopener" title="Click Here to be redirected to SEQTA Engage">SEQTA Engage</a></h6>
<h6><a href="https://www.adventist.edu.au" target="_blank" rel="noopener" title="Click Here to be redirected to ASA">Adventist Schools Australia</a></h6>
<br>
<h6><em>The links above are not available via the Portal Pages of myEd as they are unable to be embedded into the software.</em></h6>
</div>
</div>

<a href="#modalPO" class="right" title="Profile Overview"><i class="fas fa-caret-down"></i></a> <!-- Profile dropDown (right to left) -->
<div id="modalPO" class="modalDialog">
<div>
<a href="#close" title="Close Profile Overview" class="close">X</a>
<img class="CARTHmodal" src="/Default/Img/CARTH.jpg" title="Carpenter, Tom" alt="CARTH">
<h2 class="textModalh2">Tom Carpenter</h2>
<h5 class="textModalh5" title="tom.carpenter@kas.nsw.edu.au">tom.carpenter@kas.nsw.edu.au</h5>
<h5 class="textModalh5" title="Student ID: #714020 (CARTH)">#714020 (CARTH)</h5>
<h5 class="textModalh5" title="Year Group: Year 11 (11B)">Year 11 (11B)</h5>
<h5>Kempsey Adventist School</h5>
</div>
</div>
</div>

<div class="row"> <!-- Format for alignment of the sideBar and main panels -->
<div class="main"> <!-- Main learning or collaborative workspace -->
<iframe class="frameMain" width="100%" src="/Home/Welcome/iFrame/index.html"></iframe> <!-- Embedded frame -->
</div>
<div class="sideBar"> <!-- sideBar featuring Profile, myEd News and directory -->
<iframe id="newsmyEd" frameborder="0" src="/Default/News/index.html"></iframe> <!-- myEd News -->
</div>
</div>
<div class="footer"> <!-- Featuring Site Navigation and myEd News navBar links -->
<a href="#" class="active" title="myEd News"><i class="far fa-newspaper"></i></a> <!-- myEd News -->
<a href="/Home/Welcome/siteNavigation/index.html" title="Site Navigation"><i class="fa fa-location-arrow"></i></a> <!-- Site Navigation -->
</div>
</div>
</body>
</html>

谢谢，汤姆

Answer 1

我想这就是您要找的东西，为了清楚地查看，我使用了谷歌地图 iframe 并用 div 对其进行了包装。然后我为图标点击切换 wrapper。

这是 codepen

$(document).ready(function() {
  $('.mobile-menu-icon i.open').click(function() {
    $('.sidebar-wrapper').fadeIn();
    $(this).hide();
    $('.mobile-menu-icon i.close').fadeIn();
  });

  $('.mobile-menu-icon i.close').click(function() {
    $('.sidebar-wrapper').fadeOut();
    $(this).hide();
    $('.mobile-menu-icon i.open').fadeIn();
  });
});

.mobile-menu-icon i.close {
  display: none;
}

@media (min-width:768px) {
  .mobile-menu-icon {
    display: none;
  }
}

@media (max-width:767px) {
  .mobile-menu-icon {
    display: block;
  }
  .sidebar-wrapper {
    display: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="sideBar">
  <!-- sideBar featuring Profile, myEd News and directory -->
  <div class="mobile-menu-icon">
    <i class="fa fa-bars open" aria-hidden="true"></i>
    <i class="fa fa-times close" aria-hidden="true"></i>
  </div>
  <div class="sidebar-wrapper">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15775.879464660959!2d81.17930883590694!3d8.694411361230227!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3afbbfb5c9304551%3A0xc6d99d1084095189!2sNilaveli!5e0!3m2!1sen!2slk!4v1542627461123"
      width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
    <!-- myEd News -->
  </div>
</div>