http://trifler.ru/blog/ Lasto Blogging Engine ru gordi serg_gordi@mail.ru serg_gordi@mail.ru http://trifler.ru/blog/i/lastoblog.png http://trifler.ru/blog/ http://trifler.ru/blog/post_1276087135.html <p>Какой должна быть ссылка в меню? Максимально короткой, но в тоже время смысл ее и суть должны быть понятны с первого взгляда.</p> <p>Но что происходит на самом деле?</p> <p>Говорим о вертикальном меню, но все справедливо и для горизонтальной навигации.</p> <p>Вертикальное меню, помимо собственной ширины включая поля и отступы, ограничено шириной колонки, в которой находится.</p> <p>В общем случае ширина колонки вариабельна, и колеблется в пределах 180px-200px.</p> <p>Это связано еще и с тем, что в колонках практически всегда имеются рекламные блоки типа небоскреб со стандартными размерами 160*600 и если колонка будет довольно широкой, а реклама в них будет расположена по центру, то смотреться все будет не самым лучшим образом.</p> <p>Понятно, что это не единственное ограничение, если к ссылкам меню пристегнута графика, текст самой ссылки, вернее суть оной не так просто выразить в двух-трех словах без переноса на вторую, а то и третью строку.</p> <p>Решение проблемы с запретом переноса и обрезанием текста ссылки при помощи:</p> <pre class="pre"> white-space:nowrap;overflow:hidden;</pre> <p>прост, но не всегда обрезанное слово или слова могут прояснить, что же там дальше, а меню это не тест на угадайку.</p> <p>Скриншоты.</p> <p>Для имитации возможной графики у ссылок меню пристроим квадратики из модернизированной версии меню с <a href="http://trifler.ru/blog/post_1206043138.html">треугольниками</a>.</p> <img src="i/menus/menu_01.png" style="display:block;margin:10px auto;width:;height:;"> <p>Как видно перенос не украшает и вызывает смешанные чувства.</p> <img src=" i/menus/menu_02.png " style="display:block;margin:10px auto;width:;height:;"> <p>А вот так на много лучше.</p> <p>Тема не новая, соответствующие публикации найти не составит большого труда.</p> <p>Но не без ложки дегтя.</p> <p>Браузер FireFox всех версий напрочь отказывается понимать, что к обрезанной ссылке надо добавить многоточие, а рисовать графику с многоточием под разный фон, на котором может находиться меню с учетом цвета самой ссылки - полное извращение.</p> <p>Для OPERA также необходимо указать нужное правило.</p> <p>Дополнительным минусом является то, что если у колонки, в которой расположено меню будет указан:</p> <pre class="pre"> overflow:hidden;</pre> <p>Текст появляющийся при наведении курсора мыши на ссылку за пределы колонки не выйдет.</p> <p>Тест <a href="i/menus/menus.htm">страница</a>, там есть все :)</p><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1276087135.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1276087135.html">All Comments</a></div> <!-- RSS_link_to_post end --><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1276087135.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1276087135.html">All Comments</a></div> <!-- RSS_link_to_post end --> Wed, 09 Jun 2010 19:38:55 GMT