This is what I'm trying to accomplish:
I want to have a navigation that will be rotated 90 deegres and fixed to the upper left corner of the window.
HTML:
<div class="outer">
<div class="inner">
<ul class="list">
<li class="item">lasange</li>
<li class="item">spaghetti</li>
</ul>
</div>
</div>
CSS:
.outer {
position: fixed;
left: 20px;
top: 20px;
background: red;
}
.inner {
-webkit-transform: rotate(-90deg);
transform-origin: 0 0;
background: green;
}
I can't get it to look like in the image above. The problem is with the rotation. The inner div is positioned and then rotated, and as a result ends up outside the outer div. No matter what I put as the origin of the transformation it doesn't work the way I want it to. I've tried positioning the inner div with position: absolute
but with no luck. I don't know the height/width parameters of the menu list.
Here's a fiddle: https://jsfiddle.net/949cjcnq/7/
Any help would be greatly appreciated.
Best regards, Paul
So I manage to position it the way you want, no matter how big your content is using position: absolute;
for your .inner-div.
The only drawback is that your text is facing downwards and not upwards. Couldn't get around that issue with my CSS :S
If you -webkit-transform: rotate(180deg);
the child of .inner
you can turn the text the right way up :)
.outer {
position: fixed;
left: 20px;
top: 20px;
background: red;
}
.inner {
position: absolute;
bottom: 100%;
-webkit-transform: rotateZ(90deg);
transform-origin: 0 100%;
background: #AACAD7;
white-space: nowrap;;
}
.rotate {
-webkit-transform: rotate(180deg);
}
ul { list-style: none; padding: 0; margin: 0; white-space: nowrap; }
ul li { padding: 5px 10px; }
<div class="outer">
<div class="inner">
<ul class="list rotate">
<li class="item">lasange | spaghetti</li>
</ul>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With