2. Мелочи дизайна - меню

Меню не важно какое. Простое меню, или выпадающее меню Spry. Над любым меню, так, или иначе можно поиздеваться :) Например закруглить пункты меню. Точнее закруглить углы пунктов меню, или любые другие углы.

style="border-radius:10px 10px 10px 10px;"

Можно просто вставить в таблицу:

 

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="50" class="a1" style="border-radius:10px 10px 10px 10px;">&nbsp;</td>
</tr>
</table>

Как видите я сперва задал свой стиль - class="a1". В стиле задал фон и т.д. А в самой таблице закруглил углы. Можно было закруглить и сразу в стиле. Тогда код имел бы такой вид:

style="border-radius:10px 10px 10px 10px;"

Вот сам стиль, где .a1 - мой стиль:

.a1 {
background-image: url(images/ваш фон.png); /* фон (полупрозрачная картинка) */
background-repeat: repeat-x; /* повторение фона слева направо */
border-radius:10px 10px 10px 10px; /* закруглили углы */
}

Почему всё так подробно с таблицей, а не с меню? А потому что в меню всё тоже самое. Просто на таблице показывать всё проще и главное - понятнее.


Теперь обратите внимание на моё меню, которое слева. Наверное не все заметили, но там закруглён правый верхний уголок:

<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="http://seozar.ru/sozdanie/osnovnoe/osnovnoe.php" class="MenuBarItemSubmenu" style="border-radius:0px 5px 0px 0px;">Создание, основное</a>
<ul>
<li><a href="#">Создание, основное</a></li>
<li><a href="http://seozar.ru/sozdanie/osnovnoe/tema/tema.php">Тема</a></li>
<li><a href="http://seozar.ru/sozdanie/osnovnoe/kontent/kontent.php">Контент</a></li>
</ul>
</li>
</ul>

Как вы правильно поняли это только часть кода меню, но главное, что видно что и куда надо прилепить :) Первое значение - левый верхний угол. Второе - правый верхний. Третье - правый нижний. Четвёртое - левый нижний. Ну а сама цифра, это радиус по которому отрежет изображение.

Небольшая мелочь. Когда закругляете углы, старайтесь не использовать цвет фона вместе с фоновым изображением. И толщина границ должна быть равна нулю. Не бойтесь, если про это забудете, работать будет, но будет не очень красиво :)


Просто пара советов.

Меню можно сделать полупрозрачными, но сильно этим не увлекайтесь. Особенно со вторым, третьим уровнем. Когда получите матов от посетителей, поймёте почему :) Просто плохо видно, вот и всё. Особенно, когда меню открывается, а под ним что то выделено жирным, или вообще другим цветом. Так что прозрачность на 80% вполне подойдёт. Народ увидит и оценит, что вы знаете, как это делать. И в тоже время это не помешает людям, приходящим на ваш сайт.

Меню можно выделить рамкой, можно цветом, можно фоном. А можно выделить пункты меню просто покрасив у фонового изображения один пиксель в другой цвет. Вверху, или внизу, слева, или справа не важно, кому как нравится.

Можно также сделать фоновое изображение чуть меньше, чем размер пунктов меню. Оно начнёт повторяться и получится рамка. И не надо красить ни какие пиксели :)

Это касается меню Spry. Когда хотите использовать фоновое изображение. Делайте его точно по размеру пункта меню. И не забывайте рисовать на них стрелки, не на всех конечно (это мы потом чуть позже разберём, там разговаривать надо много) :) Можно сделать и больше, но тогда придётся применить выравнивание по правому краю. Что бы стрелки не исчезли. И ещё, если захотите замостить пункты меню маленьким изображением. То учтите, что стрелки (указывающие на меню второго, третьего уровня) показываться не будут. Не переживайте работать меню не перестанет. Просто ваше изображение перекроет все остальные. Можно конечно наложить стрелки и поверх фона. Можно сделать стрелки на фоне, можно вместо них использовать любые другие символы (» › —› и т.д.). Тут, кому как нравится. Способов море... Чуть позже напишу пару мануалов по этой теме :)

 

Немного рекламы :)

Copyright, design, ideas © Mihail. При копировании материалов, ссылка на сайт "Seozar.ru" обязательна. Контакты - admin@halych.ru
Тариф «Первый»: 2 сайта, 1 Гб, 2 MySQL, 2 FTP