Произвольное расположение меню WebsiteX5

 Часть1  [Часть2]

В программе Websitex5 в настройках шаблона есть только две конфигурации горизонтального меню : над шапкой(хедером) и под шапкой. На самом деле с помощью нескольких строчек css кода можно разместить блок горизонтального  меню в совершенно произвольном месте: на фоне хедера,  в области контента, даже превратить горизонтальное меню в вертикальное и вообще расположить кнопки меню произвольно. Об этом я и хочу рассказать в данной статье. 

Я взял для примера простой бесплатный шаблон, найденный в интернете. Кнопки в моем примере  будут простые без 3d эффектов. Я настроил только изменение цвета шрифта при наведении мыши и иконки для пункта меню (все одинаковые, имитирующие ручки-регуляторы аудиоцентра). В настройках шаблона надо установить меню над 'шапкой' и выставить высоту горизонтального меню в 0 px. что получилось, показано на рисунке 1. Меню пока выглядит как обычно, расположено в верхней части странички на фоне хедера. Теперь добавим такой код в общих настройках на вкладке 'эксперт'.

<style>

#imMnMn {
left:100px;
top:100px;
width:800px;}
</style>

Видим, что меню сместилось: рисунок_2. Стилевое свойство left:100px задает расстояние от левого края странички, стилевое свойство top:100px задает расстояние сверху до нашего меню (рисунок_3). Передвинем меню еще правее и ниже, написав например left:393px; top:149px  (рисунок_4).

В нашем коде есть еще один параметр width. Он отвечает за ширину блока меню. Зададим его, например, 100px. Кнопки нашего меню не смогут поместиться в одну строчку в таком узком блоке, им придется выстроиться в столбик. Получится так как изображено на рисунке_5. 

Таким образом мы не только переместили наше горизонтальное меню в произвольное место странички, но и превратили его в вертикальное. 

В том шаблоне, который я взял в качестве примера, меню выглядит так, как показано на рисунке_6. кнопки меню расположены не одна под другой, а по криволинейной направляющей. Можно ли сделать так в программе, без вставки кода стороннего меню и без ручной правки кода страниц  после экспорта проекта на диск или в интернет? Об этом читаем во второй части статьи. 

Часть2  [Часть1]

А зачем мы всем этим занимаемся?- спросите вы. Ведь можно сделать менюшку с каким угодно дизайном в сторонней программе или просто написать код самому в дримвивере или блокноте , а затем вставить этот код в хедер в проекте Websitex5. Но в этом случае при изменении числа кнопок в меню, переименовании страниц, изменении дизайна кнопок придется редактировать код этого вставленного меню, что не очень удобно. В нашем же случае мы имеем возможность редактировать дизайн кнопок и переименовывать их стандартными средствами Websitex5, а при добавлении новой страницы к карте сайта, ссылка на нее автоматически появится в менюшке. Да, конечно, мы тоже сейчас для того , чтобы изменить вид строки навигации, пишем и вставляем сторонний код, но он небольшой и достаточно простой и понятный. Поэтому продолжим менять внешний вид.

Есть в css такое свойство margin - задает отступы(поля) вокруг элемента (блока, текста, картинки, кнопки и т.д.). С помощью настройки этого свойства мы и будем дальше менять вид нашего меню, которое было раньше горизонтальным. Отступы можно задать различные со всех четырех сторон элемента. Мы сейчас не будем этого делать, а изменим отступ только слева от каждой кнопки. При этом сделаем эти отступы разными.  Код на вкладке 'эксперт' в основных настройках надо будет дополнить. На этот раз код будет посложней. 

<style>

#imMnMn {
left:393px;
top:149px;
width:100px;}
#imMnMn > ul > li+li{margin-left:-8px;}
#imMnMn > ul > li+li+li{margin-left:-16px;}
#imMnMn > ul > li+li+li+li{margin-left:-19px;}
#imMnMn > ul > li+li+li+li+li{margin-left:-17px;}
#imMnMn > ul > li+li+li+li+li+li{margin-left:-11px;}
</style>

В строках #imMnMn  задан отступ для второй и всех последующих кнопок меню. Для первой кнопки отступ не задан, он нулевой по умолчанию. Отступы заданы отрицательные, т.к. мы хотим, чтобы вторая и последующие кнопки были левее первой. Меняя числовые значения, можно регулировать расположение по горизонтали каждой кнопки в отдельности. Что получилось, смотрим на рисунке_6.  Кнопки расположились вдоль криволинейной направляющей в соответствии с фоновым рисунком. Посмотреть и скачать можно по ссылкам ниже. 

Далее привожу скриншоты настроек проекта Websitex5.