Довільне розташування меню WebsiteX5
Частина1 [Частина2]
У програмі Websitex5 у налаштуваннях шаблону є лише дві конфігурації горизонтального меню: над шапкою (хедером) та під шапкою. Насправді за допомогою декількох рядків css коду можна розмістити блок горизонтального меню в абсолютно довільному місці: на тлі хедера, в області контенту, навіть перетворити горизонтальне меню на вертикальне і взагалі розташувати кнопки меню довільно. Про це я хочу розповісти в цій статті.
Я взяв, наприклад, простий безкоштовний шаблон, знайдений в інтернеті. Кнопки у моєму прикладі будуть прості без 3d ефектів. Я налаштував лише зміну кольору шрифту при наведенні миші та іконки для пункту меню (усі однакові, що імітують ручки-регулятори аудіоцентру). У налаштуваннях шаблону треба встановити меню над шапкою і виставити висоту горизонтального меню в 0 px. що вийшло, показано на малюнку 1. Меню поки виглядає як завжди, розташоване у верхній частині сторінки на тлі хедера. Тепер додамо такий код у загальних налаштуваннях на вкладці 'експерт'.
#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]
Є в css така властивість margin - задає відступи навколо елемента (блоку, тексту, картинки, кнопки і т.д.). За допомогою налаштування цієї властивості ми і далі змінюватимемо вигляд нашого меню, яке було раніше горизонтальним. Відступи можна встановити різні з усіх чотирьох сторін елемента. Ми зараз не будемо цього робити, а змінимо відступ лише ліворуч від кожної кнопки. При цьому зробимо ці відступи різними. Код на вкладці 'експерт' в основних налаштуваннях потрібно буде доповнити. Цього разу код буде складнішим.