Здравейте на всички! Добре дошли в новия кратък курс! В този урок ще ви покажа как да използвате JQuery, можете да създадете бутон, от която ще бъде оповестена в списъка с менюто. За да видите този ефект в действие, моля посетете psd.tutsplus.com в горния десен ъгъл.

Когато натиснете бутона, устройството се отваря списък с препратки, както и когато се натисне отново, уредът е изключен. Това може да се постигне чрез използване на JQuery, и в този урок ще ви покажа как. Е, нека да започнем. Първо, нека да създадем нашия бутон, а след това да се концентрира напълно върху кода. Open Photoshop и създайте нов документ с размерите на бъдещето на един бутон. Можете да създадете бутон абсолютно всякакъв размер. Размерите на бутоните ми - 182 х 32 пиксела. Кликнете два пъти върху слоя "Background" и да добавите прост стил "Gradient Overlay".

От дясната страна на бутона, добавете малко бяла стрелка и вертикален разделител на два цвята: # 302f2f и # 252525.

От ляво на вмъкнете малък образ и някакъв текст. Няма да описвам всички подробности за създаването на един бутон, така че създателите собствената си подходящ за вашия сайт. Ето бутон ми. (Запазете снимката бутон в папката със снимките.)

Сега отворете бележник и запазване на празен документ като styles.css в папката "меню плъзгащи" на вашия работен плот. Затворете бележника, отворете папката "плъзгащи меню" и да се създаде в него две нови папки: "JS" и "образи". Отидете на главната страница на сайта и изтеглите jquery.com библиотека "JQuery-1.4.4.min.js", преименувате файла просто "JQuery" и го запишете в "JS" папка. Отворете Dreamweaver и създаване на нова HTML файл. Запазете го на вашия работен плот, в някоя папка. (Името на този файл не играе голяма роля, затова го наричат ​​това, което искате, например, "sliding_menu.html".) В Dreamweaver, преминете в режим кодекс.

Може би сте забелязали, че са регистрирани три файлове: styles.css, jquery.js и трето, slider.js ( "но ние също не вече имаме" - може да се каже). Сега ние трябва да се създаде slider.js файл. Отвори Notepad и запишете празен документ в папка slider.js JS. Сега отворете файла в Dreamweaver и въведете следния код.

Нека обясня по-горе код фрагмент. Първият ред означава, че когато има зареден документ, функцията се нарича, в този случай, е функция от падащото меню. Следващият ред означава, че след направено, кликнете върху снимката на класа menu_class, разгънете менюто. Това е последвано от третия ред. Менюто ще се разгърне върху средна скорост. Можете да настроите скоростта да се забави (бавно) или бързо (бързо). По втория и третия ред са много важни, тъй като те съдържат елементи, свързани с CSS-файл, а именно, img.menu_class и ul.the_menu. Ние не се опише тези стилове, но го направи веднага след като започне да се създаде нашето меню. Отиди на документа за HTML с оглед кодекс, така че да можем да започнем създаването на нашето меню.

Отваряне на CSS файла в Dreamweaver. Нека да зададете някои стилове за основната част от нашия документ.

Тя се нуждае от прост фона и шрифта стил. Задайте шрифт и размер по желание. Аз също се променя цвета на фона от бяло до тъмно сиво. Добавете стил към номера или водачи списъци. Добави граници бутон на изображението. Можете да прокара граница в Photoshop-е на фигурата, но ми се струва, че е по-лесно да го dobvait чрез CSS, така че е по-лесно да се промени част от код, отколкото всеки път да отворите Photoshop и преначертаване на снимката.

Следните стилове се прилагат към менюто, което ще се извършва след натискане.

В този код, можете да промените ширината на кутията меню падащото. Моят ширина меню на 300 пиксела, но можете да настроите всяка ширина. И все пак аз попитах дебелината на границата на блок в един пиксел, което съответства на дебелината на границата на бутона. Следващата част от кода се отнася до цвета на контекстното меню фон блок, както и определя цвета на текста, размера и поведението на връзки, когато мишката върху тях.

И няколко думи за позициониране. С цел да се приведе в съответствие местоположението на бутона, не използвайте подравняването на единица (DIV) в центъра, или надясно, като блок с менюто не е подравнен правилно. За подравняване на мястото на бутоните правилно, приложете уреда с менюто в друг DIV тагове и го позиционирате както намерите за добре.

Можете също да добавите нещо по ваш вкус, например, изображения за всеки елемент от менюто, списък с връзки.

5 урока последната колона "JQuery"

Днес бихме искали да ви разкажа за TypeIt библиотека - безплатно JQuery плъгин. Можете да го използвате, за да се симулира пишете. Ако всичко е настроен правилно, то е много реалистичен ефект може да се постигне.

По дяволите, колко добре нещо. Всичко е направено както трябва, но това е как бъг оказа. Меню, когато отворите, но ако има снимка на страницата, под менюто, а след това се затваря в менюто и не Че не може да помогне :-(

До получаване на информация от два канала (зрение и слух) на ефективността на обучението далеч по-добър живот от книги. А домашните задачи и онлайн тестове ще ви позволи да мисля постоянно в целевия език и веднага провери знанията си!

Ако искате по-дълго време, за да проучи как да се HTML, че ме има, за което трябва добра новина!

Ако вече сте се научили HTML и искат да се движи напред, следващата стъпка ще бъде да се проучи CSS технологията.

Ако искате да се разбере концепцията на домейн и хостинг, да научат как да се създаде база данни, да качвате файлове към уеб сайт чрез FTP сървър, създаване на поддомейни, да конфигурирате пощенските кутии за сайта и мониторинг на посещаемостта, този курс е разработен специално за вас!

Свързани статии

• Меню на корпоративния празник

• Меню на юридическата форма, която сервира храната, за да изберете

• Решено бе да се направи основната тема меню не може да падне надолу, Drupal