Рада 1: Як зробити спливаюче меню
Рада 1: Як зробити спливаюче меню
За допомогою грамотного коду HTML і нескладних правил CSS можна створити непогане спливаюче меню, Яке можна буде легко змінювати і доповнювати. При використанні засобів мови розмітки і каскадних таблиць стилів можна забезпечити коректну роботу меню у всіх браузерах.
Інструкція
1
Для початку побудуйте базову структуру вашого меню. Відкрийте текстовий редактор і створіть нумерований список з підменю, Яке виступає як елемент батьківського списку. наприклад:
перший елемент випадає елемент випадає елемент2
2
Збережіть створений список в окремому html-файлі. Далі створіть файл з розширенням .css і введіть всі параметри таблиці стилів.
3
Видаліть всі відступи і маркери, які застосовуються в ненумерований списку, і задайте ширину меню за допомогою засобів CSS: ul {list-style: none; width: 200px; }
4
Задайте відносне положення всіх елементів списку за допомогою атрибута position: ul li {position: relative; }
5
Далі необхідно оформити підменю, Кожен з елементів якого буде з'являтися праворуч від батьківського меню в той момент, коли на пункті буде знаходитися курсор миші: li ul {position: absolute; left: 199px; top: 0; display: none; } Атрибут left має значення на один піксель менше, ніж ширина самого меню. Це дозволяє грамотно розташувати спливаючі пункти без створення подвійних кордонів. Атрибут display використовується для того, щоб приховати підменю при відкритті сторінки.
6
Задайте потрібні стилі для посилань за допомогою відповідних параметрів css. Увімкніть параметр display: block для того, щоб кожна посилання займала весь відведений для неї місце.
7
щоб меню з'являлося в той момент, коли курсор виявиться над ним (hover), потрібно ввести код: li: hover ul {display: block; }
8
Задайте за бажанням додаткові параметри відображення посилань і елементів списку.
9
спливаюче меню готово. Тепер залишилося включити в файл .html атрибут: Спливне меню
Рада 2: Як зробити спливаючу сторінку
При створенні сайтів дуже часто використовуютьсяспливаючі вікна в якості меню, рекламних текстів і т.п. До того ж компактний вид дозволяє економити місце на сторінці. Все, що потрібно - це написати правильний код.
Інструкція
1
Створення спливаючих сторінок може проводитисяна основі javascript. Проте, є більш простий варіант - використання мови розмітки гіпертексту HTML і мови таблиць CSS. Зручність полягає в тому, що створені таким чином вікна будуть підтримуватися більшістю браузерів незалежно від того, чи підтримують вони javascript.
2
Подібний код розміщується в два терміни, в першійрядку міститься посилання, яка відповідає за відкриття віконця, другий рядок - по суті, і є спливаючих вікном, атрибут onmouseover говорить про те, що буде відображатися стандартний при наведенні на рядок посилання тип курсора, onclick вказує на те, що після клацання приховане вікно стане видимим: <a onmouseover = "this.style.cursor =" pointer "" onfocus = "this.blur ();" onclick = "document.getElementById (" PopUp "). style.display =" block ""> <span style = "text-decoration: underline;"> Натиснути тут! </ span> </a>
3
Вам буде потрібно вказати розміри вікна, колір ірозмір тексту, фон і рамки. Всі ці параметри ви можете вказати в атрибуті style. Цветa вказується по кодової табліцe rgb. У стандартному інструменті Paint в вікні «Зміна кольорів», в можете знайти код потрібного відтінку, де R - червоний, G - зелений, В - синій (блакитний). Так чорний колір має код rgb (0,0,0), білий rgb (255,255,255), сірий rgb (126,126,126). <Div id = "PopUp" style = "display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb (255,255,225); text-align: justify; font-size: 12px; width: 135px; "> Повідомлення або текст у спливаючому вікні </ div> Селектор display з вказаним значенням none робить ваше вікно невидимим.
4
Тепер вам потрібно розмістити дві ці рядки між тегами вашої сторінки <body> і </ body>. Після цього спливаюче вікно готове до роботи.
5
Однак при цьому наборі ви отримаєте постійновідкрите вікно. Так що, якщо вам потрібно, щоб спливаюче вікно можна було закрити, додайте посилання, яка буде відповідати за цю дію, перед тегом </ div>: <br /> <div style = "text-align: right;"> <a onmouseover = "this.style.cursor =" pointer "" style = "font-size: 12px;" onfocus = "this.blur ();" onclick = "document.getElementById (" PopUp "). style.display =" none ""> <span style = "text-decoration: underline;"> закрити </ span> </a> </ div>
6
Ймовірно, ви захочете зробити вікно, спливаючене по клацанню, як описано вище, а при наведенні курсору. Тоді перший рядок повинна бути записана так: <a onmouseover = "document.getElementById (" PopUp "). Style.display =" block "" onmouseout = "document.getElementById (" PopUp "). Style.display =" none "" onfocus = "this.blur ();"> <span style = "text-decoration: underline;"> наведіть мишку сюди! </ span> </a>
7
Таким чином, HTML-код спливаючого вікна виотримали, і знайомі зі структурою його складання. Все що залишилося - оформити зовнішній вигляд і вміст, що, природно, буде залежати від ваших умінь, цілі і фантазії. Але треба пам'ятати, що це найпростіший варіант створення спливаючого вікна. Якщо ви володієте достатнім досвідом програмування в javascript (MooTools, jQuery, Prototype та ін.), Ви можете створити більш красиву і цікаву сторінку.
