javascript - 如何在html中调整窗口大小时隐藏文本调整
问题描述
我这里有一个网站代码
document.getElementById("main").style.marginRight = "165px";
var mini = true;
function toggleSidebar() {
if (mini) {
console.log("opening sidebar");
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginRight = "0px";
document.getElementById("main").style.marginLeft = "250px";
document.getElementById("mySidebar2").style.width = "0px";
this.mini = false;
} else {
console.log("closing sidebar");
document.getElementById("mySidebar").style.width = "85px";
document.getElementById("main").style.marginRight = "165px";
document.getElementById("main").style.marginLeft = "85px";
document.getElementById("mySidebar2").style.width = "165px";
this.mini = true;
}
}@media only screen and (min-width: 600px) {
body {
font-family: "Lato", sans-serif;
}
#mySidebar{
display:block;
}
#circularMenu1{
display:none;
}
.sidebar {
height: 100%;
width: 85px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
transition: 0.5s;
overflow-x: hidden;
padding-top: 60px;
white-space: nowrap;
}
.sidebar2 {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidebar a:hover {
color: #f1f1f1;
}
main .sidebar {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.material-icons,
.icon-text {
vertical-align: middle;
}
.material-icons {
padding-bottom: 3px;
margin-right: 30px;
}
#main {
padding: 16px;
margin-left: 85px;
transition: margin-left 0.5s;
}
@media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}
}
@media only screen and (max-width: 599px){
body {
background-color:#26394E ;
}
.circular-menu {
position: fixed;
top: 1em;
right: 1em;
}
#mySidebar{
display:none;
}
#circularMenu1{
display:block;
}
.circular-menu .floating-btn {
display: block;
width: 3.5em;
height: 3.5em;
border-radius: 50%;
background-color: #FED057;hsl(4, 98%, 60%);
box-shadow: 0 2px 5px 0 hsla(0, 0%, 0%, .26);
color: hsl(0, 0%, 100%);
text-align: center;
line-height: 3.9;
cursor: pointer;
outline: 0;
}
.circular-menu.active .floating-btn {
box-shadow: inset 0 0 3px hsla(0, 0%, 0%, .3);
}
.circular-menu .floating-btn:active {
box-shadow: 0 4px 8px 0 hsla(0, 0%, 0%, .4);
}
.circular-menu .floating-btn i {
font-size: 1.3em;
transition: transform .2s;
}
.circular-menu.active .floating-btn i {
transform: rotate(0deg);
}
.circular-menu:after {
display: block;
content: ' ';
width: 100%;
height: 100%;
border-radius: 50%;
position: absolute;
top: 0;
right: 0;
z-index: -2;
/*background-color: hsl(4, 98%, 60%);*/
transition: all .5s ease;
}
.circular-menu .items-wrapper {
padding: 0;
margin: 0;
}
.rotate-30{ transform: rotate(30deg); }
.rotate-60{ transform: rotate(60deg);}
.rotate-90{ transform: rotate(90deg);}
.circular-menu .menu-item {
position: absolute;
bottom: 0;
right: 0;
z-index: -1;
display: block;
text-decoration: none;
color: hsl(0, 0%, 100%);
font-size: 1em;
width: 3.5em;
height: 3.5em;
border-radius: 50%;
text-align: center;
line-height: 3;
background-color: hsla(0,0%,0%,.1);
transition: transform 1s ease;/*, background .2s ease;*/
}
.circular-menu .menu-item:hover {
background-color: hsla(0,0%,0%,.3);
transform: scale(2);
}
.circular-menu.active .menu-item {
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.circular-menu.active .menu-item:nth-child(1) {
transform: rotate(360deg) translate(-210px) scale(1);
}
.circular-menu.active .menu-item:nth-child(1):hover {
transform: rotate(360deg) translate(-210px) scale(1.1);
color:red;
}
.circular-menu.active .menu-item:nth-child(2) {
transform: rotate(330deg) translateX(-210px) scale(1.1);
}
.circular-menu.active .menu-item:nth-child(2):hover {
transform: rotate(330deg) translateX(-210px) scale(1.2);
color:red;
}
.circular-menu.active .menu-item:nth-child(3) {
transform: rotate(300deg) translateX(-210px) scale(1.2);
}
.circular-menu.active .menu-item:nth-child(3):hover {
transform: rotate(300deg) translateX(-210px) scale(1.3);
color:red;
}
.circular-menu.active .menu-item:nth-child(4) {
transform: rotate(270deg) translateX(-210px) scale(1.3);
}
.circular-menu.active .menu-item:nth-child(4):hover {
transform: rotate(270deg) translateX(-210px) scale(1.4);
color:red;
}
}
/**
* The other theme for this menu
*/ <link rel="stylesheet" href="s21.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<style media="screen">
</style>
<body>
<!-- <div id="circularMenu" class="circular-menu">
<a class="floating-btn" onclick="document.getElementById('circularMenu').classList.toggle('active');">
<i class="fa fa-plus"></i>
</a>
<menu class="items-wrapper">
<a href="#" class="menu-item fa fa-facebook"></a>
<a href="#" class="menu-item fa fa-twitter"></a>
<a href="#" class="menu-item fa fa-google-plus"></a>
<a href="#" class="menu-item fa fa-linkedin"></a>
</menu>
</div>-->
<div id="circularMenu1" class="circular-menu circular-menu-left">
<a class="floating-btn" onclick="myFunction();">
<i id="yup" class="fa fa-bars"></i>
</a>
<menu class="items-wrapper">
<a href="#" class="menu-item "><i class="fa fa-home"></i></a>
<a href="#" class="menu-item "><i style="margin-left:7px;" class="fa fa-user rotate-30"></i></a>
<a href="#" class="menu-item "><i style="margin-left:20px;margin-top:20px;" class="fa fa-info rotate-60"></i></a>
<a href="#" class="menu-item "><i style="margin-top:40px;padding-right:2px;" class="fa fa-cog rotate-90"></i></a>
</menu>
</div>
<div id="mySidebar" class="sidebar" onmouseover="toggleSidebar()" onmouseout="toggleSidebar()">
<a href="#"><span><i class="material-icons">info</i><span class="icon-text">about</span></a><br>
<a href="#"><i class="material-icons">spa</i><span class="icon-text"></span>services</a></span>
</a><br>
<a href="#"><i class="material-icons">monetization_on</i><span class="icon-text"></span>clients</span></a><br>
<a href="#"><i class="material-icons">email</i><span class="icon-text"></span>contact<span></a>
</div>
<div id="main">
<p>To close the sidebar, move your mouse out of the sidebar.The side navigation component provides an easy way to navigate through your website. Its appearance & behaviour are easily adjustable with data-mdb-attributes and methods - additional functionality such as touch events and focus trap (in an over mode) are available out of the box.
Note: Read the API tab to find all available options and advanced customization
Video tutorial
Note: This component requires MDB Pro Essential package.
Basic example
In the basic version, the side navigation will appear over your website's content after clicking on a toggler.
Note: Use show and hide methods to toggle navigation with JavaScript.
Note: Adding the show class to a sidenav collapse element will expand this category on render.
Link 1
Category 1
Link 2
Link 3
Category 2
Access restricted
To view this code you must have an MDB Pro account
Purchase MDB Pro if you are a new user or Log in if you already have it
Positioning
While using the side and push modes, you can specify the selector for your page's content - this way, the component will automatically update paddings and margins. To customize this behaviour in a non-standard way, use a combination of media queries & update.mdb.sidenav event
Select mode:
Link 1
Category 1
Category 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc magna massa, ornare quis interdum a, cursus in quam. Quisque risus libero, cursus eget eros vitae, aliquam placerat velit. Vivamus luctus eros id sagittis luctus. Pellentesque felis nulla, rhoncus viverra nunc vitae, viverra aliquam ante. Ut feugiat mattis tempor.
Access restricted
To view this code you must have an MDB Pro account
Purchase MDB Pro if you are a new user or Log in if you already have it
Colors example
Setting the color attribute will change the background and font color of active/hovered links and categories.
Note: This option works for MDB 5 main colors - primary, secondary, warning, danger, success, info, dark and light.
Select color:
Link 1
Category 1
Category 2
Access restricted
To view this code you must have an MDB Pro account
Purchase MDB Pro if you are a new user or Log in if you already have it
Dark example
When using the darker background with the side navigation, we recommend setting the color attribute to "light" for better contrast.
Link 1
Category 1
Category 2
Acce</p>
</div>
<div id="mySidebar2" class="sidebar2" style="width:165px">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<script>
function myFunction() {
document.getElementById('circularMenu1').classList.toggle('active');
document.getElementById('yup').classList.toggle("fa-times");
}
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</body>它有两个sidenav，一个在右边，一个在左边。当一个显示时，另一个崩溃。然而，中间的文本会被重新调整，但我已经设置了宽度，这样如果仍然不受 sidenav 的打开和折叠的影响。但是导航打开时的文本调整是我想要删除的。
我希望文本在左侧导航打开时平滑地向右移动，并在左侧导航关闭时平滑地返回。请指导我该怎么办？
解决方案
transition: margin-left 0.5s将您#main在 CSS 中的内容更改为transition: all 0.5s.
因此，您的 CSS 文件中有以下内容：
#main {
padding: 16px;
margin-left: 85px;
transition: all 0.5s;
}
推荐阅读
- loopbackjs - 如何为环回数据源编写单元测试
- python - 如何在 setup_class 中捕获 stdout/stderr？
- jar - Liferay dxp 7.3：如何添加第三方jars进行全局共享？
- awk - 在包含第三个字符串的两个字符串之间提取文本
- google-cloud-platform - BQ 表的模式转换 - 列数据类型的更改
- javascript - 在 setTimeout 和 setInterval 之间先执行哪个？
- vue.js - 访问与当前组件不同级别的另一个组件中的函数\$refs
- linux - Apache2 反向代理阻止对文件的访问
- javascript - 回调的优先级，如何使用 node express js 处理 xmlhttprequest 发布请求
- python - 我收到一条错误消息，提示列表索引超出范围，即使对我来说它看起来像是在列表索引中