My bro
Дата:  27.01.2014       Автор:  Сергей Тема: JS и jQuery

Ещё один вертикальный аккордеон на JavaScript.

Хочу предложить Вашему вниманию ещё одно аккордеонное вертикальное меню с использованием JavaScript. В отличие от предыдущего меню в данном аккордеоне скрипт вынесен в отдельный файл и оформлен в виде класса, что делает его более универсальным и расширяемым, а также и позволяет разделить логику работы от представления. Кроме того, для более приятного визуального восприятие введена функция раздвигающегося слайдера (эффект движения).


Читать...    Просмотров: 596 Комментариев: 0 Рейтинг: (0)
Дата:  26.01.2014       Автор:  Сергей Тема: JS и jQuery

Очень простой аккордеон на JavaScript

В сегодняшней статье , как я и обещал ранее, пойдёт речь  о самом наипростейшем вертикальном меню аккордеонного типа, выполненного средствами CSS и JavaScript. Рассматриваемый пример носит скорее учебный характер и вряд ли может найти серьёзное практическое применение. Тем не менее, в некоторых случаях, данное меню вполне может быть использовано в небольших проектах, в которых по тем или иным причинам не применяются различные плагины и фреймворки. В связи с этим код предельно упрощён, в частности, нет эффектов анимации, а вызов скрипта производится по стандартному событию с атрибутом onmouseover...


Читать...    Просмотров: 1615 Комментариев: 0 Рейтинг: (0)
Дата:  19.01.2014       Автор:  Сергей Тема: JS и jQuery

Вертикальный аккордеон на jQuery

Продолжая тему вертикальных аккордеонных меню, затронутую в предыдущих статьях, сегодня я вновь хочу поделиться таким меню, но выполненном на более популярной javascript-библиотеке – jQuery. Данное меню очень простое, без использования навороченных плагинов, и основано на использовании стандартных эффектов анимации jQuery, а именно эффектов скольжения – slideDown и slideUp, которые посредством изменения высоты элементов плавно раскрывают и скрывают эти элементы (в нашем случае это список ссылок – подпунктов меню).


Читать...    Просмотров: 1091 Комментариев: 0 Рейтинг: (0)
Дата:  18.01.2014       Автор:  Сергей Тема: JS и jQuery

Аккордеонное меню на MooTools 1.4.5

Как я и обещал в предыдущей статье, сегодня рассмотрю вертикальное аккордеонное меню, выполненное посредством использования более новой версии фреймворка MooTools – 1.4.5. В общем-то, отличия кода от рассмотренного ранее (в предыдущей статье) - незначительные, и касаются в основном способа подключения фреймворка и некоторых изменений в разметке странички. Кроме того, скрипт создания аккордеона включен в тело самой страницы, хотя ничто не мешает вынести его в отдельный файл.


Читать...    Просмотров: 2414 Комментариев: 0 Рейтинг: (0)
Дата:  17.01.2014       Автор:  Сергей Тема: JS и jQuery

Аккордеонное меню на MooTools 1.11

 В сегодняшней статье (самой первой в данном разделе) пойдёт речь  о простом вертикальном меню типа аккордеон. Особенностью данного меню является то, что оно выполнено с помощью фреймворка MooTools версии 1.11. Несмотря на то, что данная версия уже считается устаревшей, тем не менее, в практике может возникнуть необходимость в таком меню. Тем более, что данная версия относительно легковесна и в принципе может обеспечить разработчика вполне приемлемым функционалом. Однако, при желании, вполне можно подкорректировать данное меню под более новую версию фреймворка.


Читать...    Просмотров: 586 Комментариев: 0 Рейтинг: (0)
Дата:  14.01.2014       Автор:  Сергей Тема: HTML и CSS

Аккордеонное меню на псевдоклассе :focus.

Хочу предложить Вашему вниманию ещё одно аккордеонное меню с использованием только таблицы стилей. В отличии от предыдущих меню в данном для отслеживания клика по основному пункту меню применен псевдоклас :focus, который в общих случаях используется для стилевого оформления элементов, получающих фокус ввода. В нашем случае будет меняться величина отступа от верхнего края элемента списка - margin-top (с 23px на 0px). Для динамики применен также эффект перехода transition.


Читать...    Просмотров: 537 Комментариев: 0 Рейтинг: (0)
Дата:  13.01.2014       Автор:  Сергей Тема: HTML и CSS

Симпатичные подсказки на CSS3

В этой статье я хочу поделиться с Вами кодом, с помощью которого можно организовать простые, но достаточно приятные на вид, всплывающие подсказки для различных элементов на страничках ваших сайтов. В качестве примера я выбрал – ссылки, так как именно для них обычно требуются развёрнутые подсказки. Но ничто не мешает создать свои  tooltips для других веб-элементов.


Читать...    Просмотров: 541 Комментариев: 0 Рейтинг: (0)
Дата:  13.01.2014       Автор:  Сергей Тема: HTML и CSS

Ещё один аккордеон на CSS3

В сегодняшней стать, как я и обещал раньше, пойдёт речь ещё об одном аккордеонном меню, выполненном с помощью CSS. Главное отличие данного меню от рассмотренных в предыдущих статьях заключается в использовании для выбора пунктов меню (отслеживания клика) вместо псевдоклассов target и nth-of-type элемента формы -  input типа переключатель (radio).


Читать...    Просмотров: 510 Комментариев: 0 Рейтинг: (0)
Дата:  12.01.2014       Автор:  Сергей Тема: HTML и CSS

Аккордеонное меню средствами CSS3 без target

В предыдущей статье я рассказывал, как с помощью только средств CSS3 сделать простенькое аккордеонное меню. При этом для обработки клика был использован псевдокласс  target. В данной же статье пойдёт речь об аккордеонное меню, также выполненном только средствами CSS3, но без использования target...


Читать...    Просмотров: 1229 Комментариев: 0 Рейтинг: (0)
Дата:  11.01.2014       Автор:  Сергей Тема: HTML и CSS

Aккордеонное меню средствами CSS3

В сегодняшней статье хочу  рассказать, как организовать простенькое аккордеонное меню только средствами CSS3,  без использования  всяких там скриптов и библиотек. Данное меню достаточно легковесно и работоспособно во всех современных браузерах. К сожалению (или к радости..:) ) не поддерживается глючными IE ниже 9 версии.


Читать...    Просмотров: 2371 Комментариев: 0 Рейтинг: (0)
Поделитесь этой страничкой в социальных сетях