-2

I would like to make this menu, with vertical and 90 degree rotated text in each one of the fields. How can I do this?

http://s6.picofile.com/file/8241625534/Untitled_5.jpg

Please help me.

Tom11
  • 2,419
  • 8
  • 30
  • 56
Sadaf
  • 1
  • 1
  • 2
    Hi Sadaf! Welcome to StackOverflow. Have you tried searching for this on the site? Have you attempted any code? Do include any code you have tried so we can help you diagnose your issue. Do note that SO is not a place for those who are here merely for answers without showing effort of having attempted resolving the issue themselves. – shrmn Mar 03 '16 at 10:11

2 Answers2

3

you can take a look at writing-mode

codepen to play with 

nav {
  float:left;
  writing-mode:tb-rl;/*IE*/
  writing-mode:vertical-lr;/* OPera/webkit*/
  writing-mode:sideways-lr;/* should be the one */      
}
li {
  display:inline-block;
}
<nav>
 <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Clients</a></li>
  <li><a href="#">Contact Us</a></li>
 </ul>
</nav>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
1

On your CSS file, create a class like this:

.rotate {
  /* Safari */
  -webkit-transform: rotate(-90deg);
  /* Firefox */
  -moz-transform: rotate(-90deg);
  /* IE */
  -ms-transform: rotate(-90deg);
  /* Opera */
  -o-transform: rotate(-90deg);
  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Then apply this property to every element you want to rotate by difining that class in each of them.

goncalopinto
  • 433
  • 2
  • 8