右侧面板 [英] Right side panel

问题描述

我在我的网页上创建了一个左侧面板，我想添加另一个从同一页面右侧出现的面板.请告诉我 html、css 和脚本.请帮忙！

解决方案

function openNav() {document.getElementById("mySidenav").style.width = "250px";document.getElementById("main").style.marginRight = "250px";document.body.style.backgroundColor = "rgba(0,0,0,0.4)";}函数 closeNav() {document.getElementById("mySidenav").style.width = "0";document.getElementById("main").style.marginRight="0";document.body.style.backgroundColor = "白色";}

body {字体系列:Lato"，无衬线；过渡:背景颜色 0.5 秒；}.sidenav {高度:100%；宽度:0；位置:固定；z-索引:1；顶部:0；右:0；背景颜色:#111；溢出-x:隐藏；过渡:0.5s；填充顶部:60px；}.sidenav a {填充:8px 8px 8px 32px；文字装饰:无；字体大小:25px；颜色:#818181；显示:块；过渡:0.3s}.sidenav a:hover, .offcanvas a:focus{颜色:#f1f1f1；}.sidenav .closebtn {位置:绝对；顶部:0；右:25px；字体大小:36px；左边距:50px；}#主要的 {过渡:margin-left .5s；填充:16px；}@media 屏幕和(最大高度:450px){.sidenav {padding-top: 15px;}.sidenav a {font-size: 18px;}}

<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a><a href="#">关于</a><a href="#">服务</a><a href="#">客户</a><a href="#">联系方式</a>
<div id="main"><h2>Sidenav推送示例</h2><p>点击下面的元素打开侧边导航菜单，把这个内容推到右边.请注意，当侧导航栏打开时，我们向正文添加了黑色透明背景色.</p><span style="font-size:30px; position:absolute; right:0px;cursor:pointer" onclick="openNav()">&#9776;打开</span>

i have created a left side panel on my webpage i want to add another panel which comes out from the right side on the same page. please tell me the html, css as well as script for that. PLEASE help!

解决方案

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

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginRight= "0";
    document.body.style.backgroundColor = "white";
}

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

.sidenav {
    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;
}

.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;}
}

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<div id="main">
  <h2>Sidenav Push Example</h2>
  <p>Click on the element below to open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the sidenav is opened.</p>
  <span style="font-size:30px; position:absolute; right:0px;cursor:pointer" onclick="openNav()">&#9776; open</span>
</div>

这篇关于右侧面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！