Всім привіт! Ласкаво просимо в новий короткий навчальний курс! У цьому уроці я покажу, як за допомогою JQuery можна створити кнопку, з якої буде розкриватися список меню. Побачити цей ефект в дії можна на сайті psd.tutsplus.com в правому верхньому куті.
При натисканні на кнопку, розкривається блок зі списком посилань, а при повторному натисканні блок згортається. Цього можна досягти за допомогою JQuery, і в цьому уроці я покажу, як саме. Що ж, давайте почнемо. По-перше, давайте створимо нашу кнопку, щоб потім повністю сконцентруватися на коді. Відкрийте Photoshop і створіть новий документ з розмірами майбутньої кнопки. Ви можете створити кнопку абсолютно будь-якого розміру. Розміри моєї кнопки - 182 х 32 пікселя. Клацніть двічі по шару "Background" і додайте простий стиль "Gradient Overlay".
З правого боку кнопки додайте маленьку білу стрілку і вертикальний роздільник з двох кольорів: # 302f2f і # 252525.
Зліва вставте маленьке зображення і якийсь текст. Я не буду описувати всі деталі створення кнопки, так як ви створите свою власну, яка підходить для вашого сайту. Ось як виглядає моя кнопка. (Збережіть картинку з кнопкою в папці з зображеннями.)
Тепер відкрийте блокнот і збережіть порожній документ як styles.css в папці "sliding menu" на вашому робочому столі. Закрийте блокнот, відкрийте папку "sliding menu" і створіть в ній дві нові папки: "js" і "images". Зайдіть на головну сторінку сайту jquery.com і завантажте бібліотеку "jquery-1.4.4.min.js", перейменуйте цей файл в просто "jquery" і збережіть його в папці "js". Відкрийте Dreamweaver і створіть новий файл HTML. Збережіть його прямо на робочому столі, ні в якій папці. (Назва цього файлу не грає великої ролі, тому назвіть його, як хочете, наприклад, "sliding_menu.html".) У Dreamweaver перейдіть в режим Code.
Напевно, ви помітили, що ми прописали три файли: styles.css, jquery.js і, третій, slider.js ( "але у нас же його ще немає", - скажете ви). Зараз нам треба створити файл slider.js. Відкрийте блокнот і збережіть порожній документ slider.js в папці js. Тепер відкрийте цей файл в Dreamweaver і введіть наступний код.
Давайте я поясню вищенаведений фрагмент коду. Перший рядок означає, що коли завантажується документ, викликається функція, в нашому випадку, це функція розкривається меню. Наступний рядок означає, що як тільки виробляється клік по картинці класу menu_class, меню розгорнеться. Потім слід третій рядок. Меню буде розгортатися вниз на середній швидкості. Ви можете встановити швидкість в slow (повільно) або fast (швидко). Друга і третя рядки дуже важливі, тому що в них містяться елементи, що відносяться до CSS-файлу, а саме, img.menu_class і ul.the_menu. Ми поки не описали ці стилі, але зробимо це, як тільки почнемо створювати наше меню. Перейдіть в документ HTML в режимі коду, щоб ми могли почати створювати наше меню.
Відкрийте CSS файл в Dreamweaver. Давайте встановимо деякі стилі для основної частини нашого документа.
Необхідний простий шрифт і стиль фону. Встановіть шрифт і бажаний розмір. Я також змінив колір фону з білого на темно-сірий. Додамо стиль для нумерованих і ненумерованих списків. Додамо кордон зображенню кнопки. Ви можете намалювати кордон в Photoshop-е на самому малюнку, але мені здається, що легше добваіть її через CSS, так як легше змінити шматок коду, ніж кожен раз відкривати Photoshop і перемальовувати картинку.
Наступні стилі відносяться до меню, яке буде розгортатися після натискання кнопки.
У цьому фрагменті коду ви можете змінити ширину блоку меню, що розкривається. У мого меню ширина 300 пікселів, але ви можете задати будь-яку ширину. Ще я задав товщину кордону цього блоку в 1 піксель, що відповідає товщині кордону кнопки. Наступна частина коду відноситься до кольору фону блоку меню, що розкривається, а також задає колір тексту, його розміри і поведінку посилань при наведенні на них курсору.
І пару слів про позиціонування. Для того щоб вирівняти розташування кнопки, не використовуйте вирівнювання блоку (div) по центру або по правому краю, так як блок з меню не вирівняна як слід. Щоб вирівняти розташування кнопки правильно, укладіть блок з меню в ще один тег div і позиціонують його, як вважаєте за потрібне.
Ви так само можете додати щось на свій розсуд, наприклад, зображення для кожного елемента списку посилань меню.
5 останніх уроків рубрики "jQuery"
Сьогодні ми б хотіли вам розповісти про бібліотеку TypeIt - безкоштовному jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна домогтися дуже реалістичного ефекту.
jQuery плагін для створення тимчасової шкали.
jQuery плагін для створення діаграми Ганта.
Приклад того як здійснити завантаження файлу через PHP і jQuery ajax.
SerginhoLD
ха-ха)) ще у цього є джерело уроку))) самим чтоль таку фігню написати складно?)
Руслан Димитриев +1
Так, раніше було цікавіше. (
profesor08
ефект закриття меню повинен спрацьовувати при втрати елементом фокусу: onBlur
profesor08
Та й взагалі все це можна організувати тільки на CSS.
Руслан Димитриев
aleksandr kolesnik
Дякуємо! Саме те, для любителів, типу мене. А ті, хто вважає це занадто простим - напевно, помилилися сайтом.
У мене питання, ось я зробив таких чотири меню один за одним. Все працює нормально. Але хочу ще дещо додати. Що при відкривання одного з меню щоб інші закривалися автоматично, тобто щоб завжди було одне відкрите меню яке я відкрию. Як таке реалізувати? Заздалегідь вдячний за відповідь.
Блін як так то. ВСЕ роблю як у вас, але ось який глюк вийшов. Меню при натисканні відкривається, але якщо на сторінці є картинка нижче меню, то вона закриває це меню і ні че не можу з цим вдіяти :-(
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!