Display text on right on hover over an icon using html and css

Question

I am making a sidebar using html and css in angular project, here i have a 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>

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

Here i have made sidebar in left side with icons one by one and each icon have its own class name called nav-text which will not be displayed on page load but whereas user hover over the icon, the text inside the class nav-text needs to be slide from left to right side.

For example if user hover over the home icon <i class="fa fa-home fa-2x"></i> from the code,

<li class="has-subnav">
    <a routerLink="/dashboard">
        <i class="fa fa-home fa-2x"></i>
        <span class="nav-text">
            Dashboard
        </span>
    </a>
</li>

The text Dashboard should slide from left to right next to the icon.

In the same way the fourth <li> which starts like <li class="profileSideBar has-subnav dropdown"> has dropdown menu which will open in a tree structure like name slides from left to right the on hover it the submenu has to be slide after that.

And also i am in the need of output in pure html and css..

I have searched for other solutions but i couldn't find it out as useful one and hence kindly help me achieve the result..

The fiddle that i have worked out is https://jsfiddle.net/fwyo7jt4/3/

Answer 1

I changed your code to apply flex display instead of table. You can refer as below The sub-menu might need some more work.

There is one reason you cannot see your sub-menu is that you set the main menu to overflow: hidden, so the content of its child cannot be show any how below or outside of it.

.fa-2x {
  font-size: 2em;
}

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

nav li a {
  position: relative;
}

.has-subnav .fa {
  position: relative;
  display: flex;
  flex-flow: column;
  width: 60px;
  align-items: center;
  /* height: 36px; */
  justify-content: center;
  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;
  -webkit-transition: width .05s linear;
  transition: width .05s linear;
  -webkit-transform: translateZ(0) scale(1, 1);
  z-index: 1000;
}

.main-menu li {
  position: relative;
  width: 60px;
}

.main-menu li>a {
  position: relative;
  display: flex;
  color: #999;
  height: 60px;
  text-align: center;
  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: absolute;
  visibility: hidden;
  width: 0px;
  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;
}

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

li:hover span.nav-text {
  display: flex;
  justify-content: center;
  align-items: center;
  left: 60px;
  visibility: visible;
  transition: all 0.2s linear;
  width: 170px;
  height: 60px;
  background-color: #F1F1F1;
  color: #000;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="main-menu" *ngIf="!sideBarCollapse" id="icon_wrapper">
  <div class="logo">
    <a href="" class="simple-text">
        </a>
  </div>
  <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>

Answer 2

hi please go through this i think this is what you are looking for.

https://jsfiddle.net/fwyo7jt4/56/

add this css and more style according to you.

.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:100%;
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;
}
span{transition:500ms;}
li a span{transform:translatex(-400%); color:#000; position:absolute; top:0; left:0; height:100%; width:250px; padding:5px 15px;}
li a{position:relative; width:60px;}
 li a:hover span{transform:translatex(0%);}

`

Answer 3

You can do this using the transform property for moving things and transition to animate it.

.nav-link .nav-text {
  display: inline-block;
  transform: translateX(-100%);
  transition: transform .3s ease-in-out;
}

.nav-link:hover .nav-text {
  transform: translateX(0);
}

<a routerLink="/dashboard" class="nav-link">
  <i class="fa fa-home fa-2x"></i>
  <span class="nav-text">Dashboard</span>
</a>