更改打开和关闭导航菜单的方向

由 发布于 cssjavascripthtml
 收藏

我有一个表格。在此表单中，当屏幕在移动大小时，必须使用导航菜单来显示表单的详细信息。

my site is multi language . when the language is the en it must be ltr and open the navigation from left page and when the language is fa it must be rtl open the navigation from right .

我写的代码，但我不知道如何更改导航的打开方向。我把我的代码放在这里，请帮助解决这个问题。

Demo 

<button mat-raised-button onclick="openNav()" id="showInfos" color="primary">

点击打开

 <div id="activity-info" class="activity-info">
    <div class="activity-container">
      <div class="activity-header">
        <span id="closeActivityInfo" (click)="closeActivityInfo()">
          <mat-icon>clear</mat-icon>
        </span>
        <div class="activity-info-title">
          <span>
            {{ "GENERAL.ACTIVITY_INFO" | translate }}
          </span>
        </div>
      </div>
      <div class="activity-content">
        <div>
          <div class="item">
            <div class="item-label">{{ "GENERAL.CREATOR" | translate }} :</div>
            <div class="item-value">
              <pfa-user-field
                [displayName]="oldEditModel.creator"
                [row]="false"
              ></pfa-user-field>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

CSS代码：

    #showInfos {
    display: block;
    width: 100% !important;
    margin-bottom: 7px !important;
  }
  #closeActivityInfo {
    display: block;
  }
  .activity-info-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .activity-info {
    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;
  }
  .activity-container {
    width: 100%;
  }
  .edit-form {
    width: 100%;
  }
  .form-content {
    height: 100%;
  }
  .showInfos {
    width: 60px;
    height: 40px;
    background-color: #e52727;
    color: white;
    position: absolute;
    right: 40px;
    bottom: 20px;
  }
}

这是js代码：

    function openNav(){
   document.getElementById("activity-info").style.width = "80%";
}
评论
  • babay
    babay 回复

    您可以通过在动画开始之前更改div的初始位置来实现。

    function openNav(){
   document.getElementById("activity-info").style.width = "80%";
   if(language === 'fa') { // Assumed variable name language
      document.getElementById("activity-info").style.right = 0;
      document.getElementById("activity-info").style.left = 'auto';
   } else {
      document.getElementById("activity-info").style.left = 0;
  }
}
  • miste
    miste 回复

    all you have to do to make it open from the right is to remove the left property and add right property with the same value as in left property in .activity-info in css, so to open it from the left use the following:

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

    并从右侧打开它，请使用以下命令：

      .activity-info {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0; // here is the trick
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }

    那么不一次又一次地重复代码的解决方案是什么？ 非常简单，您将有1个班级（主班）和2个其他班级（根据语言从右或左打开）

    所以这是主要的类：

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

    左课：

      .activity-info-left {
    left: 0;
  }

    正确的班级：

      .activity-info-right {
    right: 0;
  }

    并在html中：

    <div id="activity-info" class="activity-info activity-info-right">

    you have add the appropriate class to div based on the language. here you can find how to add class to the element.