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_1334838492.html <p>Оформление заголовков web-меню в частности древо меню, не самый простой вопрос, как это может показаться на первый взгляд. Многие верстальщики не уделяют этому моменту должного внимания, в полной мере это относится к многочисленным и разнообразным меню с вложениями.</p> <p>В старые добрые времена, простое линейное web-меню по html-коду могло выглядеть приблизительно так:</p> <pre class="pre"> &lt;ul> &lt;li>Раздел 1&lt;/li> &lt;li>&lt;a href="#">Ссылка 1&lt;/a>&lt;/li> ... &lt;li>&lt;a href="#">Ссылка N&lt;/a>&lt;/li> &lt;li>Раздел 2&lt;/li> &lt;li>&lt;a href="#">Ссылка 1&lt;/a>&lt;/li> ... &lt;li>&lt;a href="#">Ссылка N&lt;/a>&lt;/li> &lt;/ul> </pre> <p>Стилями выделяем заголовки и ссылки:</p> <pre class="pre"> li {font:bold XXpx Arial;} a {font:XXpx Verdana;} </pre> <p>Ничем не сложнее все и для древо-меню:</p> <pre class="pre"> &lt;ul> &lt;li>Раздел 1&lt;/li> &lt;li>&lt;a href="#">Ссылка 1&lt;/a> &lt;ul> &lt;li>Раздел 1.1&lt;/li> &lt;li>&lt;a href="#">Ссылка 1&lt;/a>&lt;/li> ... &lt;li>&lt;a href="#">Ссылка N&lt;/a>&lt;/li> &lt;/ul> &lt;/li> &lt;li>&lt;a href="#">Ссылка N&lt;/a>&lt;/li> &lt;li>Раздел 2&lt;/li> &lt;li>&lt;a href="#">Ссылка 1&lt;/a>&lt;/li> ... &lt;li>&lt;a href="#">Ссылка N&lt;/a>&lt;/li> &lt;/ul> </pre> <p>При помощи наследования можно задать разный стиль для раздела и подраздела:</p> <pre class="pre"> a {font:XXpx Verdana;} li {color:#XXX;font:bold XXpx Arial;} li li {color:#YYY;font:bold XXpx Arial;} </pre> <p>В более сложном случае:</p> <img src="../blog/i/menus/menudrevo01.png" style="display:block;margin:5px auto;width:494px;height:272px;" alt="drevo menu"> <p>отказ от графики, требует введения дополнительного html-кода.</p> <p>С другой стороны в меню представленном на скриншоте четко прослеживается иерархия заголовков разделов и подразделов, а перевод простого древо меню в меню с вложениями на JavaScript, избавляет от необходимости использовать для этих целей классы, которым надо выдумывать имена.</p> <h3 class="panel">Ограничения</h3> <p>Так, как структура меню круто замешана на относительном позиционировании, то это накладывает несколько ограничений:</p> <ul> <li>В любом разделе или подразделе последней должна стоять простая ссылка</li> <li>Не допустим перенос на вторую строку</li></ul> <p>Скриншот демострирует к чему может привести невыполнение этих условий:</p> <img src="../blog/i/menus/menudrevo02.png" style="display:block;margin:5px auto;width:493px;height:282px;" alt="drevo_menu"> <p>Выделение цветом уровней вложений меню и соответствующих линий в реальном проекте, может оказаться излишним, сделано с целью показать, что это возможно и помогает на стадии тестирования.</p> <p><a href="../blog/i/menus/menu_drevo.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_1334838492.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1334838492.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_1334838492.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1334838492.html">All Comments</a></div> <!-- RSS_link_to_post end --> Thu, 19 Apr 2012 19:28:12 GMT http://trifler.ru/blog/post_1333728595.html <p>В современном web-дизайне без графики обойтись практически невозможно, можно спорить лишь о том, в каких количествах и насколько оправданно ее наличие или отсутствие в пределах того или иного ресурса.</p> <p>Многие web-мастера загоняют мелкие графические элементы в один графический файл - так называемый спрайт и далее позиционируют его в нужное место, тем самым, уменьшая количество запросов к серверу, что положительно сказывается на скорости загрузки web-страницы.</p> <p>Рассмотрим частный случай на конкретном примере.</p> <img src="../blog/i/image/sl.png" style="display:block;margin:5px auto;width:507px;height:38px;" alt="спрайт"> <p>Имеем 14 картинок каждая, из которых в реальном проекте является кликабельной и ведет по прописанному ей линку в соответствующее место.</p> <p>Если пойти стандартным путем, то html-код и стили могут выглядеть примерно так:</p> <pre class="pre"> &lt;div class="zzz"&gt; &lt;a href="#" class="x"&gt;&lt;/a&gt; ... &lt;a href="#" class="xn"&gt;&lt;/a&gt; &lt;/div&gt; .x {background:url(...) no-repeat YYpx XXpx;} ... .xn {background:url(...) no-repeat YYpx XXpx;} </pre> <p>Как мы видим, чтобы отпозиционировать часть спрайта в нужное место необходимо указать не только класс ссылке, но и в стилях прописывать этому классу, помимо всего прочего, позицию нужной картинке, к тому же подбор сдвига по горизонтали, дело весьма утомительное.</p> <p>Но можно обойтись более простым способом.</p> <p>html-код практически остается без изменений, следует только удалить из тегов «a» ставшие абсолютно не нужными классы.</p> <p>Стили тогда приобретут следующий вид:</p> <pre class="pre"> .zzz { background:url(...) no-repeat YYpx XXpx; margin:5px auto;width:XXpx;height:XXpx; } .zzz a { <span>margin-left:XXpx</span>;position:relative; <span>top:XXpx</span>;width:XXpx;height:XXpx; } </pre> <p>Для смещения ссылки по горизонтали и вертикали достаточно использовать margin-left и отностильное позиционирование, нужные параметры выделены цветом.</p> <p>Чтобы добиться максимальной точности совпадения кликабельной области ссылки и индивидуальной картинки, временно добавляем в стили для ссылки верхний и нижий border.</p> <p>При сравнении двух вариантов, второй выглядит более предпочтительным, что и было использовано в очередном апгрейде Lasto Blog для переводчика Google и «Хомячкового рая».</p><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1333728595.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1333728595.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_1333728595.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1333728595.html">All Comments</a></div> <!-- RSS_link_to_post end --> Fri, 06 Apr 2012 23:09:55 GMT