Hey there, I've encountered an intriguing problem that's got me stumped.
I'm attempting to create a menu made up of vertical bars that span the full height of the window and have a fixed position. I want the text within these bars to display vertically. Take a look at the sketch I put together:
And you can also view this JSFiddle.
The HTML structure is as follows:
<header>
header
</header>
<nav>
<ul>
<li><a href="#">bar 1</a></li>
<li><a href="#">bar 2</a></li>
<li><a href="#">bar 3</a></li>
<li><a href="#">bar 4</a></li>
</ul>
</nav>
Here is the corresponding CSS:
header {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 250px;
padding: 20px;
background: rgb(42,42,42);
background: rgba(10,10,10,0.95);
}
nav {
position: fixed;
left: 300px;
width: 100%;
margin-left: -50%;
top: 50%;
height: 75px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
background: blue;
border: 2px solid red;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
}
nav ul li {
width: 100%;
}
nav ul li a {
display: block;
width: 100%;
height: 32px;
background: #f3b200;
}
nav ul li:nth-child(1) a { background: #c61c05; }
nav ul li:nth-child(2) a { background: #dc572e; }
nav ul li:nth-child(3) a { background: #d27b26; }
nav ul li:nth-child(4) a { background: #f3b200; }
The issue arises when trying to position the nav element as desired. Any measurements (width, height, top position, left position) are applied based on a 0 degree rotation, causing the height to be relative to viewport width rather than height.
I attempted different approaches like rotating the ul and li elements inside the nav, but couldn't achieve the desired positioning for the navigation bar.
If anyone has a pure CSS solution, I'd greatly appreciate the help.