侧导航内侧右对齐图标按钮

Question

这应该很简单，但我遇到问题请帮我解决这个问题，因为我对CSS及其属性完全不熟悉。

基本上，我希望在侧面导航中有一个按钮，宽度等于侧面导航，当我点击它时，它应该在它下面显示一个列表。

但现在我得到如下，

这是html，

<div class="page">
  <div>
    <mat-toolbar color="primary" class="toolbar">
      <div>
        <button class="menuButton" mat-icon-button (click)="sidenav.toggle()"><mat-icon>menu</mat-icon></button>
        <span class="companyName">Hello</span>
      </div>
    </mat-toolbar>
  </div>

  <mat-sidenav-container class="sideContainer" fullscreen  autosize style="top: 80px !important;">
    <mat-sidenav #sidenav mode="push" opened="false" class="sideNav">
      <nav class="sidenavbutton">
        <button cls="btn">Dashboard <i id="icon" class="fa fa-angle-down"></i></button>
      </nav>
    </mat-sidenav>
  </mat-sidenav-container>
</div>

和相应的css是，

.example-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.toolbar{
  background-color: transparent;
}
.menuButton {
    color: black;
}
.companyName {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: orangered;
}

.yaanapage{
  background-color: orange;
}

.sideNav {
  height: 100%; /* 100% Full-height */
  width: 30%; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  top: 0; /* Stay at the top */
  left: 0;
  background-color:orangered; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
.menuItems {
  cursor: pointer;
  position: relative;
  background-color:orangered;
  margin: .5em;
  padding: .3em 0;
  height: 1.6em;
  color: whitesmoke;
  padding: 2%;
  font-size: 100%;
}

.btn {
  margin: 0;
  padding: 3px 6px;
  vertical-align: middle;
  border: none;
  background-color: #535B99;
  color: white;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  text-transform: uppercase;
  width: 100%;
}
#icon {
  float:right;
  display: block;
  margin-left: 10px;
}

Answer 1

首先，您的按钮需要名称Function CreateTempTable() Dim db As Database Set db = CurrentDb() db.Execute "Select [Concept Name],[Store Number ID] into" & TempTable & _ "from TblLodgingReport" MsgBox "table is created" End Function 而不是class至少在jsfiddle中不起作用。

这是working example

其次，我使用JS / jQuery中的click函数来显示cls。

ul

这是与香草JS

$(".btn").click(function(){
    $(".sidebar-list").addClass("visible");
});

------切换菜单------

您可以使用jQuery将document.getElementById('btn').onclick = function() { document.getElementById('sidebar').classList.add('visible'); } 与ul切换。

这是working jsfiddle

代码：

.toggle()

Answer 2

如果你将cls改为class，它就像你描述的那样工作。我也可以在.btn类中添加display:block;。