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

Перейти к контенту

Главное меню:

Статьи
 
Произвольное расположение меню WebsiteX5
Все статьи → Websitex5CMS    Websitex5    
Произвольное расположение меню 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.

 

 

 


<<пред.   

Просмотров 3095    Добавить комментарий  (7)

23.07.2016 11:42  Руслан
Кто может подсказать, где именно этот Эксперт в Общих настройках. У меня wex5 evo 12. В общих настройках у меня нету вкладки Эксперт, есть следующее Общие и Адаптивный дизайн. Под общими настройками разделы - выбор шаблона; стиль шаблона; настройка шаблона. В этих разделах также нету эксперта. Помогите, только без упреков и возмущений. Спасибо.

Админ:
В 12 версии это находится в Расширенных настройках-SEO, статистика, код-Эксперт


11.05.2015 23:40  Бахтияр Хасанов
Короче вроде бы как додумался как это сделать, только не так как Вы советовали через вкладку эксперт, а на странице предпросмотра через "посмотреть исходный код", на ней поковырялся, вроде все ок, а в итоге кноку сохранить так и не нашел там:((, ну и слетает обратно на исходную, обидно, походу писать нужно тоже на "карте сайта" в "свойствах страницы" в "эксперте". Ну как говориться попытка не пытка)), Еще раз спасибо за Ваше потраченное время)))
11.05.2015 22:02  Бахтияр
Спасибо большое)) Для меня как для нуба и человека делающего первые шаги в этой среде очень лаконично и доходчиво), как говориться не так страшен черт как его малюют))). Скажите пожалуйста, а если скажем к примеру главное меню "горизонтальное", а подменю вертикальное и сбоку вертикально, я его т.е. подменю могу таким же образом сместить в нужную сторону??

Админ:
Да, меню страницы (подменю) тоже можно сместить.


20.12.2014 21:44  Сергей Кондулуков
Сергею большой поклон и спасибо за проделанную работу. Эта статья расширяет стандартные возможности программы.
24.03.2014 23:01  Серый
+1
разработчику проги - камень в голову. У покупателей руки и голова на порядок лучше)
10.11.2013 12:53  Олег
Класс!
Уже года 2 пользуюсь этой программой . А оказывается вон как можно!!!
Супер!
04.11.2013 13:44  Alexander
Отлично!
 
 
Мобильная версия
Назад к содержимому | Назад к главному меню