All, Thank you for a awesome community. I’ve learned a lot from you all from lurking.

I have a project that I have a draft example of a vertical menu but it is turned on it side.

r/web_design - HTML/CSS Help. Sideways Vertical Menu

The concept of this menu is that it would work like a book and that you would “turn the pages” to load a different page by click on it. I have ambitions to add an animation but need to figure out how to get the code to set the element as fixed, to the left and fill the height of the page minus the header.

The issue I run into is that when the element is turned 90 degs, it still keep the width of the page and then moves to the center. I’m guessing that is due to Transform rotating it by the center of the element.

Below is my code exmaples.

HTML Code:

<div class="menu">
<ul>
    <li class="menuButton1">
        <a href="#">Home</a>
    </li>
    <li class="menuButton2">
        <a href="#">Contact</a>
    </li>
    <li class="menuButton3">
        <a href="#">Shop</a>
    </li>
    <li class="menuButton4">
        <a href="#">About</a>
    </li>
 </ul>
</div>    

CSS Code:

nav { 
  padding-top: 36px; 
  } 
nav .menu { 
  position: fixed; 
  transform: rotate(90deg); 
  top: 0; left:0; width: 100%; 
  } 

nav .menuButton1 {
  background-color: #ff2929; 
  }
nav .menuButton1 a {
  color: white; 
  }

nav .menuButton2 { 
  background-color: #ffd429; 
  }
nav .menuButton2 a {
  color: white; 
  }

nav .menuButton3 {
  background-color: #00abd4;
  } 
nav .menuButton3 a {
  color: white;
  }

My thoughts while writing this:

Do I need to make two different elements? One that is the actual block and background color and then have the text rotate 90 Degs?
Should I use something to figure out the height of the screen and write it as the width and move it somehow to the left?

Please let me know how you would do this or if there is something I’m missing.

Thanks!



Source link

Write A Comment