Иерархия заголовков web-меню
Оформление заголовков web-меню в частности древо меню, не самый простой вопрос, как это может показаться на первый взгляд. Многие верстальщики не уделяют этому моменту должного внимания, в полной мере это относится к многочисленным и разнообразным меню с вложениями.
В старые добрые времена, простое линейное web-меню по html-коду могло выглядеть приблизительно так:
<ul> <li>Раздел 1</li> <li><a href="#">Ссылка 1</a></li> ... <li><a href="#">Ссылка N</a></li> <li>Раздел 2</li> <li><a href="#">Ссылка 1</a></li> ... <li><a href="#">Ссылка N</a></li> </ul>
Стилями выделяем заголовки и ссылки:
li {font:bold XXpx Arial;}
a {font:XXpx Verdana;}
Ничем не сложнее все и для древо-меню:
<ul>
<li>Раздел 1</li>
<li><a href="#">Ссылка 1</a>
<ul>
<li>Раздел 1.1</li>
<li><a href="#">Ссылка 1</a></li>
...
<li><a href="#">Ссылка N</a></li>
</ul>
</li>
<li><a href="#">Ссылка N</a></li>
<li>Раздел 2</li>
<li><a href="#">Ссылка 1</a></li>
...
<li><a href="#">Ссылка N</a></li>
</ul>
При помощи наследования можно задать разный стиль для раздела и подраздела:
a {font:XXpx Verdana;}
li {color:#XXX;font:bold XXpx Arial;}
li li {color:#YYY;font:bold XXpx Arial;}
В более сложном случае:
отказ от графики, требует введения дополнительного html-кода.
С другой стороны в меню представленном на скриншоте четко прослеживается иерархия заголовков разделов и подразделов, а перевод простого древо меню в меню с вложениями на JavaScript, избавляет от необходимости использовать для этих целей классы, которым надо выдумывать имена.
Ограничения
Так, как структура меню круто замешана на относительном позиционировании, то это накладывает несколько ограничений:
- В любом разделе или подразделе последней должна стоять простая ссылка
- Не допустим перенос на вторую строку
Скриншот демострирует к чему может привести невыполнение этих условий:
Выделение цветом уровней вложений меню и соответствующих линий в реальном проекте, может оказаться излишним, сделано с целью показать, что это возможно и помогает на стадии тестирования.
Древо меню без графики
Присутствие графики на сайте, на взгляд автора, должно быть минимальным. Вне всякого сомнения, графическое оформление ресурса несет в себе определенную задачу, но оно не должно преобладать и становиться главным, где контенту невольно отводится второстепенная роль.
Не являются исключением и элементы навигации по сайту.
Для многостраничных ресурсов необходима тщательно проработанная и структурированная система навигации, часто для этих целей используется так называемое древо меню.
- ScreenShot
- HTML
- CSS
- CSS IE6(7)
-
-
<ul class="menu"> <li><em>+</em>... <ul> <li><a href="#"><em>+</em>... </a></li> <li class="top"><span><span><em>+</em>...</span></span> <ul> <li><a href="#"><em>+</em>... </a></li> <li class="top"><span><span><em>+</em>...</span></span> <ul> <li><a href="#"><em>+</em>... </a></li> <li><a href="#"><em>+</em>... </a></li> <li><a href="#"><em>+</em>... </a></li> </ul> </li> <li><a href="#"><em>+</em>... </a></li> </ul> </li> <li><a href="#"><em>+</em>... </a></li> <li><a href="#"><em>+</em>... </a></li> </ul> </li> <li><a href="#"><em>+</em>... </a></li> <li><a href="#"><em>+</em>... </a></li> </ul> -
.menu { border:#000 1px solid;margin:5px auto; padding:5px;overflow:hidden;width:200px; } .menu a { background:#fff;color:#000;display:block; font:11px Verdana;text-decoration:none; } .menu li { color:#905;cursor:pointer;font:11px Verdana; margin:1px 0 0;padding:1px 0 0;list-style:none; } .menu li a {position:relative;top:0;left:0;} .menu li ul { border-left:#000 1px solid;margin:0 0 4px;padding:0; position:relative;top:-3px;left:6px; } .menu ul li {border-bottom:#000 1px solid;} .menu ul li span { border-bottom:#000 1px solid; display:block;position:relative;left:-5px; } .menu ul li span span { background:#fff;border:none;color:#559; display:block;position:relative;top:6px;left:5px; } .menu ul ul li span span {color:#0aa;} .menu .top {border:none;position:relative;left:5px;} .menu li ul ul {margin:0 0 4px;position:relative;top:2px;left:6px;} .menu ul a {background:#fff;position:relative;top:6px;left:5px;} .menu a:hover {color:#00f;} .menu em { background:#fff;border:#000 1px solid;color:#000; font:normal 9px Verdana;margin-right:3px; padding:0 2px;position:relative;z-index:10; } .menu ul a em {border:#000 1px solid;} .menu ul a:hover em {border:#00f 1px solid;color:#00f;} -
*html .menu a {zoom:1;} *html .menu li {margin:-3px 0 0;padding:0;} *html .menu li ul {margin-bottom:4px;width:180px;} *html .menu li ul ul {margin-bottom:10px;top:5px;width:160px;} *html .menu ul a {margin:3px 0 0;} *html .menu ul li span {margin:2px 0 0;} *html .menu ul li span span {top:7px;} *html .menu ul em,*html .menu ul ul em {zoom:1;} *+html .menu a {zoom:1;} *+html .menu li {margin:-3px 0 0;padding:0;} *+html .menu li ul {margin-bottom:4px;width:180px;} *+html .menu li ul ul {margin-bottom:10px;top:5px;width:160px;} *+html .menu ul a {margin:3px 0 0;} *+html .menu ul li span {margin:2px 0 0;} *+html .menu ul li span span {top:7px;} *+html .menu ul em,*+html .menu ul ul em {zoom:1;}
Подобного рода меню с элементами графики имеют два бросающихся в глаза недостатка:
- Для разных ресурсов требуется полная переработка графики или хотя бы изменение цвета в соответствующем редакторе, на что уходит дополнительное время, а иной размер оной приводит к редактированию стилей
- При отключенной графике, что бывает довольно часто, вся красота, заложенная в меню, исчезает безвозвратно
Меню на чистом html и css в этом смысле более лояльно - минимальная правка стилей связанная с заменой одного цвета на другой не должна вызывать не преодолимых проблем.
Естественно, для реализации поставленных задач требуется введение дополнительного html-кода.
Смена плюса на минус при наведении курсора мыши на заголовок раздела или текст ссылки и другие прибамбасы, как это сделано, к примеру, в вертикальном меню блога, не представляет никаких трудностей, в продолжении, которое надеюсь, не заставит себя долго ждать, этому будет уделено соответствующее внимание.
Перевод древо меню в меню с вложениями на JavaScript, в рамках данного поста, не рассматривается, эта тема достойна отдельной публикации.
Не без ложки дегтя :(
Текст заголовков разделов и ссылок не должен иметь переноса, другими словами, все только в одну строку.
Стили для IE6(7) дублируют друг друга, возможно, в этом случае где-то, что-то можно подсократить и вынести их в условные комментарии для пущей важности, а можно оставить, так как есть :)
Графика во всплывающем слое
Многие публикации содержат помимо текста - картинки, графики всевозможные, выполненные виде превьюшек. Для более детального ознакомления с графикой придумано много способов и основном для этих целей юзается JavaScript, зачастую не мерянных оъемов.
Автор сего блога ни разу не программист и ему проще сваять нечто подобное на чистом html и css.
Рассматриваем частную задачу, а именно - есть картинка, клик по ней не отправляет посетителя на новую страницу, он открывает туже картинку (может быть иной) в этом же окне без перезагрузки браузера, клик по любой точке открывшегося слоя все возвращает в исходное состояние.
html
<div class="clicimg">
<img tabindex="1" src="XXX.xxx">
<dl>
<dt></dt>
<dd><img src="XXX.xxx"></dd>
</dl>
</div>
css
.clicimg {margin:10px 25px 0 20px;}
.clicimg img {
border:none;cursor:pointer;
display:block;outline:0;width:200px;height:auto;
}
.clicimg dl {display:none;}
.clicimg dl dd {
background:#ccc;cursor:pointer;position:fixed;
top:5%;bottom:5%;left:20%;right:20%;z-index:100;
vertical-align:middle;width:600px;text-align:center;
}
.clicimg dl img {
border:#ccc 1px solid;margin:4px auto;width:470px;height:auto;
}
.clicimg dt {
background:#000;opacity:0.4;filter:alpha(opacity=40);
position:fixed;top:0;left:0;z-index:1;width:100%;height:100%;
}
.clicimg :focus + dl,
.clicimg :active + dl {display:block;}
.clicimg dl:hover {display:block\0/;}
Какой-то текст
Много текста...
Пояснений ни к html-коду, ни к стилям не предусмотрено, все достаточно очевидно и прозрачно. Настройки параметров, как в исходном состоянии, так и во всплывающем слое достаточно просты и обладают соответствующей гибкостью для любой разметки web-страницы.
Есть проблема центрирования картинки по вертикали во всплывающем слое, но предложенное решение лишь только демонстрация возможностей "Каскадных таблиц стилей", позволяющих не использовать JavaScript без необходимости и может пригодиться всем тем, кто далек от программирования или владеет им на уровне метода "научного тыка" :)
Все работоспособно в современных браузерах.
В IE8 после клика на любую точку всплывающего слоя, необходимо вынести курсор мыши за пределы рабочей области окна браузера.
IE6(7) отдыхают :)
К плюсам можно отнести отвязку от движка CMS.
Может быть актуальным для Gold Shop Lasto при оформлении лотов магазина насыщенных графикой. Простое копирование html-конструкции в тело лота и размещение стилей в оснофном файле стилей во многом упростит работу web-мастера по предоставлению более детальной информации о товаре.