Я делаю боковую панель, используя html и css в угловом проекте, здесь у меня есть html as,
<nav class="main-menu" *ngIf="!sideBarCollapse" id="icon_wrapper">
<ul>
<li class="has-subnav">
<a routerLink="/dashboard">
<i class="fa fa-home fa-2x"></i>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="has-subnav">
<a routerLink="/projects">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">
Projects
</span>
</a>
</li>
<li class="has-subnav">
<a routerLink="/teams">
<i class="fa fa-users" aria-hidden="true"></i>
<span class="nav-text">
Teams
</span>
</a>
</li>
<li class="profileSideBar has-subnav dropdown">
<a class="collapsy" data-toggle="collapse" data-parent="sidebar-collapse" href="#user">
<i class="fa fa-user" aria-hidden="true"></i>
<span class="nav-text dropbtn">
Profile
<b class="caret"></b>
</span>
</a>
<div class="collapse" id="user">
<ul class="nav dropdown-content">
<li>
<a>
<span class="material-icons dropdown-icon">
<i class="fa fa-user"></i>
</span>
<span class="sidebar-normal"> My Profile </span>
</a>
</li>
<li>
<a>
<span class="material-icons dropdown-icon">
<i class="fa fa-lock"></i>
</span>
<span class="sidebar-normal" data-target="#createModal" data-toggle="modal"> Change Password </span>
</a>
</li>
<li>
<a>
<span class="material-icons dropdown-icon">
<i class="fa fa-commenting"></i>
</span>
<span class="sidebar-normal"> Activities </span>
</a>
</li>
<li>
<a (click)="logout()">
<span class="material-icons dropdown-icon">
<i class="fa fa-sign-out"></i>
</span>
<span class="sidebar-normal"> Logout </span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
и css as,
.fa-2x {
font-size: 2em;
}
.has-subnav .fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size: 30px;
border-bottom: 1px solid #eeeeef;
padding: 25px 10px;
}
.fa-bars {
margin-top: -31px;
font-size: 25px;
}
.main-menu {
background:#fbfbfb;
border-right:1px solid #e5e5e5;
position:absolute;
top:0;
bottom:0;
height:100%;
left:0;
width:60px;
overflow:hidden;
-webkit-transition:width .05s linear;
transition:width .05s linear;
-webkit-transform:translateZ(0) scale(1,1);
z-index:1000;
}
.main-menu li {
position:relative;
display:block;
width:250px;
}
.main-menu li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#999;
font-family: arial;
font-size: 14px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
transition:all .1s linear;
}
.main-menu .nav-icon {
position:relative;
display:table-cell;
width:60px;
height:36px;
text-align:center;
vertical-align:middle;
font-size:18px;
}
.main-menu .nav-text {
position:relative;
display:table-cell;
vertical-align:middle;
width:190px;
font-family: 'Titillium Web', sans-serif;
}
.main-menu>ul.logout {
position:absolute;
left:0;
bottom:0;
}
.no-touch .scrollable.hover {
overflow-y:hidden;
}
.no-touch .scrollable.hover:hover {
overflow-y:auto;
overflow:visible;
}
a:hover,a:focus {
text-decoration:none;
}
nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
nav ul,nav li {
outline:0;
margin:0;
padding:0;
}
.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
color:#fff;
background-color:#5fa2db;
}
Здесь я сделал боковую панель с левой стороны со значками один за другим, и у каждого значка есть свое собственное имя класса, называемое nav-text, которое не будет отображаться при загрузке страницы, но в то время как пользователь наводит курсор на значок, текст внутри класса nav-text необходимо двигать слева направо.
Например, если пользователь наведет курсор на иконку дома <i class="fa fa-home fa-2x"></i> из кода,
<li class="has-subnav">
<a routerLink="/dashboard">
<i class="fa fa-home fa-2x"></i>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
Текст Dashboard должен скользить слева направо рядом со значком.
Точно так же четвертый <li>, который начинается как <li class="profileSideBar has-subnav dropdown">, имеет раскрывающееся меню, которое открывается в древовидной структуре, например, скольжение имен слева направо и при наведении на него подменю.
А также мне нужен вывод в чистом HTML и CSS ..
Я искал другие решения, но не смог найти их полезными и, следовательно, помогите мне достичь результата ..
Я поработал на скрипке https://jsfiddle.net/fwyo7jt4/3/