WEB лаборатория DLE » Другое для WEB » Разное и другое » Простое и эффектное выпадающее меню на jQuery и CSS3
Навигация
Популярное
    Статистика

    Материалов: 1789 [+0]
    Пользователей: 685 [+0]

    Всего онлайн : 2
    Пользователей: 0
    Гостей: 2

    Google
    Последние комментарии
    ...
    HI-tech:
    0

    Простое и эффектное выпадающее меню на jQuery и CSS3

    Простое и эффектное выпадающее меню на jQuery и CSS3


    Очень часто в шаблонах можно встретить выпадающие навигационные элементы. Разработчики используют данный тип скрытых меню для вывода дополнительных скрытых ссылок, тематически связанных с основным пунктом. Можно найти примеры выскальзывающих панелей или различных меню в стиле аккордеона, которые реализуют такой принцип навигации.

    Но в данном уроке мы построим простое выпадающее меню с использованием jQuery. Оно будет работать с помощью метода анимации для генерирования задержанных эффектов. Вместе с кодом javascript также применяются эффекты переходов CSS3. В результате получается заготовка для навигации сайта.

    HTML

    Сначала построим основной шаблон HTML5. Потребуется последняя версия jQuery, которую мы получаем из API Google. Также добавляем файл стилей styles.css, который будет представлен ниже:
    <!doctype html>
    <html lang="ru-RU">
    <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
      <title>Горизонтальная навигационная панель | Материалы сайта RUSELLER.COM</title>
      <link rel="stylesheet" type="text/css" media="all" href="styles.css">
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>

    Теперь рассмотрим структуру, которая построена на основе неупорядоченного списка в верху страницы. Весь список помещается в элемент HTML5



    Скачать бесплатно

    Теги: jQuery, CSS3, выпадающее меню

    Другие новости по теме:


    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.