Вертикальное меню с вертикальным текстом - PullRequest
Новая
       34

Вертикальное меню с вертикальным текстом

1 голос
/ 23 декабря 2010

Мне нужно вертикальное меню с вертикальным текстом в нем.

Вот ссылка на рабочий пример:

http://jsfiddle.net/cyxuD/4/embedded/result/

Вы можете редактировать его на сайте jsfiddle.

Как заставить его работать в Firefox и IE?

HTML: 

<ul>
    <li><a href="#TabStrip-1">Text 1</a></li>
    <li><a href="#TabStrip-2">Text 2</a></li>
    <li><a href="#TabStrip-3">Very long text...</a></li>
</ul>

Ответы [ 2 ]

0 голосов
/ 23 декабря 2010

Интересный трюк css.Я проверил в своем Firefox, меню вертикальное и текст, но, похоже, положение перепутано.

после моего опроса я обнаружил, что когда элемент "li" вращается, ось находится в его середине, ни слева, ни справа.Так что это причина, почему положение портится, потому что перед вращением элементы "li" выравниваются по левому краю, но их ширина отличается.

Я переписываю некоторые из ваших CSS, и теперь позиция выглядит лучше, но я думаю,не лучшая практика. 

ul
{
  float: left;         
  list-style: none;   
  padding: 0;
  margin-left: 40px;     
}

li
{
  display: inline-block;
  margin-left: -85px;
  margin-top: 45px;
  width: 120px;
  border: 1px solid #A7BAC5;
  -webkit-transform: rotate(-90deg); 
  -moz-transform: rotate(-90deg);     
  -o-transform:rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);                 
}
0 голосов
/ 23 декабря 2010

Вертикальный текст? Как это:

V
E
r
т
я
c

l

Я недавно изменил замену шрифта sIFR, чтобы сделать это для меня, и это работало довольно хорошо - если Flash и Javascript приемлемы в вашем случае?

...