sidebar slide to left problem

sidebar slide to left problem

i have a sort of side bar that acts as a navigaton menu but i want it to be hidden to the left of the screen with only the little rectangle at the end sticking out so when the user hovers their mouse over it the whole thing slides out i have tried for ages but just cant get it to work.. i just ended up creating a mess.


HTML 

  1. <div class="navshell">
  2.  <img src="Images/Untitled-1.jpg" class="menuhover">
  3.  <div class="navmenu">
  4.   <nav id="primary_nav_wrap">
  5.      
  6.      <ul>
  7.    <li class="current">Home</li>
  8.    <a href="#"><li class="link">Services
  9.     <ul>
  10.    <li><a href="#">Devices
  11.      <ul>
  12.        <li><a href="#">Laptops</a></li>
  13.        <li><a href="#">2-in-1s</a></li>
  14.        <li><a href="#">Tablets</a></li>
  15.      </ul>
  16.    </a></li>
  17.    <li><a href="#">Accessories
  18.    <ul>
  19.      <li><a href="#">Mice</a></li>
  20.      <li><a href="#">Keyboards</a></li>
  21.      <li><a href="#">Bags</a></li>
  22.      <li><a href="#">Storage</a></li>
  23.     </ul>  
  24.    </a></li>
  25.    <li><a href="#">Repair</a></li>
  26.     </ul>
  27.     </li></a>
  28.    <li><a href="#">About us</a></li>
  29.    <li><a href="#">Contact</a></li>
  30.    <li><a href="#">EN</a></li>
  31.    </ul>
  32.    <div class="navextend">
  33.    <ul>
  34. <li><img src="Images/_Gmail.svg.png"></li>
  35. <li><img src="Images/fb-art.png"></li>
  36. <li><img src="Images/twitterlogo_1x.png"></li>
  37. </ul>
  38.    </div>
  39.   </nav>
  40.  </div>
  41. </div>


CSS


  • .navshell{
  • left: -0px;
  • position: fixed;
  • }

  • .navmenu{
  • height: 100%;
  • width: 150px;
  • background-color: rgba(51,51,51,0.80);
  • position: fixed;
  • border-top: 5px solid black;
  •     border-bottom: 5px solid black;
  • transition: 0.5s ease;
  • }

  • .navextend{
  •  border-left: 90px solid rgba(51,51,51,0.80);
  • border-top: 50px solid transparent;
  • border-bottom: 50px solid transparent;
  • height: 82%;
  • left: 150px;
  • position: fixed;
  • transition: 0.5s ease;
  • }

  • #primary_nav_wrap{
  • z-index: 100;
  • }


  • #primary_nav_wrap ul {
  • list-style: none;
  •     position: absolute;
  • text-align: left;
  • margin-top: 70px;
  • }

  • .current {
  • color: crimson;
  • font-size: 120%;

  • }

  • #primary_nav_wrap ul li{
  • padding: 30px 30px;
  • display:block;

  • }

  • #primary_nav_wrap ul a{
  • color: rgba(255,255,255,0.80);
  • }

  • #primary_nav_wrap ul li:hover > a {
  • opacity: 0.5;
  • }

  • #primary_nav_wrap ul ul li
  • {

  • width:100px;
  • text-align: center;
  • padding: 20px 10px
  • }


  • #primary_nav_wrap ul li:hover > ul
  • {
  • display:block;
  • }




  • #primary_nav_wrap ul ul
  • {
  • display:none;
  • position:absolute;
  • top: 15%;
  • left:80px;
  • background:rgba(0,0,0,0.80);
  • border: 1px white solid
  • }

  • #primary_nav_wrap ul ul ul{
  • left:115px;
  • position: absolute;
  • top:-40px;
  • }

  • .navextend ul{
  • left: -110px;
  • }

  • .navextend li{
  • text-align: center;
  • }

  • .navextend img{
  • height: 40px
  • }

  • .navextend img:hover{
  • opacity: 0.5;
  • }

  • .menuhover{
  • position: absolute;
  • padding: 240px 0px;
  • left: 240px
  • }