Перші рядки CSS
Ви можете використовувати атрибут даних HTML5 (в нашому прикладі
прояв
Якщо подивитися демонстраційну сторінку в браузері сімейства WebKit, то буде видно поступове прояв верхніх і нижніх пунктів меню при прокручуванні. Ефект отриманий за допомогою псевдо-елементів: before та: after з абсолютним позиціонуванням зверху і знизу меню, для яких встановлено градієнт від білого кольору до повної прозорості.
Для прояву ефекту в інших браузерах можна встановити відповідні префікси самостійно (приклад можна подивитися тут).
швидкість прокрутки
На швидкість прокрутки меню впливає коефіцієнт speed. У вище наведеному коді даний коефіцієнт отримує значення 13.5. Дана величина була встановлена в ході практичних дослідів і спроб математично обчислити оптимальну швидкість переміщення на підставі кількості пунктів і висоти меню. Але все експерименти показали, що, ймовірно, настройка при зміні кількості пунктів не потрібно або буде дуже незначна, а використання різних формул приводить до огидно виглядають результатами.
Навігація за допомогою клавіш
Дане меню з поточними установками швидкості прокрутки досить складно позиціонувати точно за допомогою миші. Для вирішення даної проблеми ми можемо використовувати навігацію за допомогою клавіш. Завдання вирішується обработчиками події keydown для об'єкта document. який запускає відповідну функцію. Спочатку для поточного обраного пункту викликається подія mouseleave. Залежно від натиснутоюклавіші збільшується або зменшується індекс позиції поточного обраного пункту cur. І на завершення для поточного обраного пункту генерується подія mouseenter. А для подій mouseenter і mouseleave у нас вже є готовий функціонал (вони призводять до генерації події hover. Яке вже має обробник).
У тексті уроку не відображено робота зі змінною cur. але в початкових кодах демонстраційна сторінка можна все розглянути уважно.
висновок
Ідея істотно прискорити прокручування меню може привести до зниження зручності використання. Деяким альтернативним способом точно вказати потрібний пункт в даному випадку є використання навігації за допомогою клавіатури.
Запропоноване меню, звичайно ж, не може служити універсальним рішенням на всі випадки використання довгих-довгих списків. Однак, наявність в інструментальному ящику веб майстра кількох різних варіантів для вирішення типових завдань допоможе істотно спростити процес пошуку оптимального і оригінального дизайну для проекту.
5 останніх уроків рубрики "jQuery"
Сьогодні ми б хотіли вам розповісти про бібліотеку TypeIt - безкоштовному jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна домогтися дуже реалістичного ефекту.
jQuery плагін для створення тимчасової шкали.
jQuery плагін для створення діаграми Ганта.
Приклад того як здійснити завантаження файлу через PHP і jQuery ajax.
p0staltomsk
Добре, але вилазять проблеми якщо міняти розмір шрифту в css
Микола Піневича
Як на мене так не дуже.
Так цілком не погана, можна знайти пріміненія! Спс
Для мене вибір самого елемента складний, діжі більш неможливий
Спасибі, може стати в нагоді :)
disslike
Так з вибором елемента трабл) хвилини 2 намагався потрапити в те що мені потрібно було
OdinecDenis
швидкість переміщення курсору просто зменшіть.
profesor08
Ха. Проблемму знайшли, якщо руки звідти звідки треба ростуть, то труднощів не повинно виникнути з редагування скрипта.
OdinecDenis
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!