Javascript 如何将此菜单按钮从侧边栏移到右侧?
你能帮帮我吗 目前我正在创建这个AngularSidenav组件,没有jquery或Angular材质,只有Angular工具、css和html 我正在使用一个ng If来在单击红色按钮时销毁组件,我在按钮中使用ng类来更改图标,我也在使用ng类来尝试使用按钮移动包装器Div,但它不起作用。div和按钮不动 HTMLJavascript 如何将此菜单按钮从侧边栏移到右侧?,javascript,html,css,angular,sidenav,Javascript,Html,Css,Angular,Sidenav,你能帮帮我吗 目前我正在创建这个AngularSidenav组件,没有jquery或Angular材质,只有Angular工具、css和html 我正在使用一个ng If来在单击红色按钮时销毁组件,我在按钮中使用ng类来更改图标,我也在使用ng类来尝试使用按钮移动包装器Div,但它不起作用。div和按钮不动 HTML <div class="sidebar" *ngIf="!open"> <header>My App</header> <ul>
<div class="sidebar" *ngIf="!open">
<header>My App</header>
<ul>
<li><a href="#"><i class="fa fa-tachometer"></i>Dashboard</a></li>
<li><a href="#"><i class="fa fa-external-link" aria-hidden="true"></i>Shortcuts</a></li>
<li><a href="#"><i class="fa fa-eye" aria-hidden="true"></i>Overview</a></li>
<li><a href="#"><i class="fa fa-calendar" aria-hidden="true"></i>Events</a></li>
<li><a href="#"><i class="fa fa-building-o" aria-hidden="true"></i>About</a></li>
<li><a href="#"><i class="fa fa-paper-plane" aria-hidden="true"></i>Contact</a></li>
</ul>
</div>
<!-- SideNav -->
<!-- close / open button -->
<div id="menu" (click)="prueba()" [ngClass]="{'closed': !open}">
<a id="open-close">
<i class="fa" [ngClass]="{'fa-bars': !open, 'fa-times': open}" ></i>
</a>
</div>
<!-- close / open button -->
Css
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500');
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
.sidebar {
position: fixed;
width: 20%;
height: 100%;
background: white;
box-shadow: 2px 2px 5px #999;
}
.sidebar header {
font-size: 22px;
color: white;
line-height: 70px;
text-align: center;
background: #063146;
user-select: none;
}
.sidebar ul a{
display: block;
height: 100%;
width: 100%;
line-height: 65px;
font-size: 20px;
color:#063146;
padding-left: 40px;
box-sizing: border-box;
transition: .4s;
}
ul li:hover a{
padding-left: 50px;
}
.sidebar ul a i{
margin-right: 16px;
}
/* boton de cierre */
#menu {
position: fixed;
background-color: tomato;
width: 40px;
height:40px;
margin-left: 21%;
border-radius: 200px 200px 200px 200px;
-moz-border-radius: 200px 200px 200px 200px;
-webkit-border-radius: 200px 200px 200px 200px;
border: 0px solid #000000;
}
#open-close{
margin-top: 12%;
width: 35px;
height:35px;
margin-left: 21%;
}
.closed{
margin-left: 1px;
}
我想你想要这样的东西: 闪电战:
在我看来,似乎只有一个css用于关闭,而不是打开。也许这就是问题所在。因为你的id“开-关”似乎把按钮放在离左边21%和离上面12%的位置。因此,尝试将id设置为一个类,并在html上使用[ngClass]=“{open:this.open}”格式并不是很好,我现在看到您有一个ngIf。也许可以创建一个plunkr(或任何它被称为的东西),这样就可以玩。
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500');
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
.sidebar {
position: fixed;
width: 20%;
height: 100%;
background: white;
box-shadow: 2px 2px 5px #999;
}
.sidebar header {
font-size: 22px;
color: white;
line-height: 70px;
text-align: center;
background: #063146;
user-select: none;
}
.sidebar ul a{
display: block;
height: 100%;
width: 100%;
line-height: 65px;
font-size: 20px;
color:#063146;
padding-left: 40px;
box-sizing: border-box;
transition: .4s;
}
ul li:hover a{
padding-left: 50px;
}
.sidebar ul a i{
margin-right: 16px;
}
/* boton de cierre */
#menu {
position: fixed;
background-color: tomato;
width: 40px;
height:40px;
margin-left: 21%;
border-radius: 200px 200px 200px 200px;
-moz-border-radius: 200px 200px 200px 200px;
-webkit-border-radius: 200px 200px 200px 200px;
border: 0px solid #000000;
}
#open-close{
margin-top: 12%;
width: 35px;
height:35px;
margin-left: 21%;
}
.closed{
margin-left: 1px;
}