0

I'm creating an animated sidebar, and I'm trying to rotate an element (span, the red arrow) in place, however not succeeding. Besides moving to the left for certain amount, the element moves up, too.

How can I rotate the arrow in place, so it stays in the same position and doesn't go left and up?

    @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600);
    @font-face { font-family: "ionicons"; src: url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1"); src: url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1#iefix") format("embedded-opentype"), url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.ttf?v=2.0.1") format("truetype"), url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.woff?v=2.0.1") format("woff"), url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.svg?v=2.0.1#Ionicons") format("svg"); font-weight: normal; font-style: normal; }
    
    .sidebar {
      width: 230px;
      height: 100%;
      position: fixed;
      padding: 1rem 1.5rem;
      background-color: #F9FAFC;
      font-family: 'Source Sans Pro';
      font-size: 14px;
      box-sizing: border-box;
    }
    
    ul {
      list-style: none;
    }
    
    ul, li {
      padding: 0;
      margin: 0;
    }
    
    li {
      padding: 0.5rem 0;
    }
    
    .submenu {
      max-height: 0;
      overflow-y: hidden;
      margin: 0 -1.5rem;
      background-color: #F4F4F5;
    }
    
    .submenu li:first-child {
      padding: 0.1rem 0 0 1.5rem;
    }
    
    .submenu li:last-child {
      padding: 0 0 0.1rem 1.5rem;
    }
    
    .submenu li {
      padding: 0.5rem 1.5rem;
    }
    
    .menu li:hover > .submenu {
      max-height: 200px;
      padding: 0.5rem 0;
      transition: max-height 0.7s linear;
    }
    
    .menu > li:hover {
      background-color: #F4F4F5;
      margin: 0 -1.5rem;
      padding: 0.5rem 1.5rem;
    }
    
    .menu > li {
      position: relative;
      color: #444444;
      font-weight: bold;
    }
    
    .menu > li > a {
      display: block;
      color: #444444;
      text-decoration: none;
      font-weight: bold;
    }
    
    .menu > li > a:hover {
      color: black;
    }
    
    .submenu > li > a {
      display: block;
      color: #626262;
      text-decoration: none;
    }
    
    .submenu > li > a:hover {
      color: black;
    }
    
    .submenu > li {
      font-weight: normal !important;
    }
    
    .arrow { 
      display: inline-block;
      width: 10px;
      transition: all 0.5s ease-in-out;
      transform-origin: center center;
    }
    
    .arrow:after {
      content: '\f125';
      font-family: 'ionicons';
      color: red;
      right: 0.75em;
      position: absolute;
      width: 10px;
      font-size: 0.5em;
      top: 45%;
    }
    
    .menu > li:hover .arrow {
      transform: rotate(90deg);
    }
<div class="sidebar">
      <nav>
        <ul class="menu">
          <li>
            <a href="/dashboard/">Dashboard</a>
          </li>
          <li>
            Transactions<span class="arrow"></span>
            <ul class="submenu">
              <li><a href="/transactions/create/">New Transaction</a></li>
              <li>View Transactions</li>
              <li>Dummy Transactions</li>
            </ul>
          </li>
          <li>
            Budgets
          </li>
        </ul>
      </nav>
    </div>

Demo

Arthur
  • 4,870
  • 3
  • 32
  • 57
adder
  • 3,512
  • 1
  • 16
  • 28
  • position:relative to `.arrow` or remove absolute from the pseudo element – Temani Afif Nov 08 '19 at 19:23
  • if you want to adjust the position, adjust the one of `arrow ` and not the pseudo element – Temani Afif Nov 08 '19 at 19:25
  • If you keep the `position`, then you can change the [`transform-origin`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin) value of the element you're rotating. – TylerH Nov 08 '19 at 19:27
  • @TylerH this won't realy fix the issue as in his case the rotation is playing the role of position:relative making the pseudo element positioned relatively to its parent on hover whereas initially it was relative to `li` (the first positioned ancestor). This is causing the jump. – Temani Afif Nov 08 '19 at 19:38
  • @TemaniAfif Yes, I hopped into the fiddle and applied `position: relative` to the parent with some 5 or 10px offsets to fix that but even still the rotation axis was a bit janky – TylerH Nov 08 '19 at 20:05

0 Answers0