Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Left side navigation using pure css

    • 0
    • 1
    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 678
    Comment on it

    Hi all,

    Below is an example to make left side navigation using pure css.

    css:

    .fa {
        position: relative;
        display: table-cell;
        width: 60px;
        height: 36px;
        text-align: center;
        vertical-align: middle;
        font-size: 18px;
        color: #1299c9;
        z-index: 1;
    }
    .main-menu:hover{
        width: 250px;
        overflow: visible;
    }
    .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;
        overflow: hidden;}
    .main-menu li a {
     border-collapse: collapse;
        border-spacing: 0;
        color: #999;
        display: block;
        font-family: arial;
        font-size: 14px;
        padding: 10px 10px 10px 60px;
        position: absolute;
        text-decoration: none;
        top: 0;
        transition: all 0.1s linear 0s;
        width: 100%;
    }
    .main-menu li a:hover{background: #1299c9;color: #fff;}
    .main-menu li:hover .fa{color: #fff;}
    
    
    .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 ul, nav li {
        outline: 0;
        margin: 0;
        padding: 0;
    }
    .area {
        float: left;
        background: #e2e2e2;
        width: 100%;
        height: 100%;
    }
    

    HTML:

    <nav class="main-menu">
      <ul>
            <li> <i class="fa fa-dashboard"></i> <a href="#">Dashboard</a></li>
            <li> <i class="fa fa-truck"></i> <a href="#">Truck</a></li>
            <li> <i class="fa fa-automobile"></i> <a href="#">Automobile</a></li>
            <li> <i class="fa fa-ambulance "></i> <a href="#">Ambulance </a></li>
            <li> <i class="fa fa-cab"></i> <a href="#">Cab </a></li>
            <li> <i class="fa fa-plane"></i> <a href="#">Plane </a></li>
            <li> <i class="fa  fa-fighter-jet"></i> <a href="#"> Fighter jet</a></li>
            <li> <i class="fa fa-space-shuttle"></i> <a href="#">Space Shuttle</a></li>
            <li> <i class="fa fa-motorcycle"></i> <a href="#">Motorcycle</a></li>
            <li> <i class="fa fa-bicycle "></i> <a href="#">Bicycle </a></li>
      </ul>
      <ul class="logout">
        <li> <i class="fa fa-sign-out"></i><a href="#">Logout</a></li>
      </ul>
    </nav>
    

    Output : Below is and output generated after using above CSS and HTML code

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: