Курилка.co.ua
Orphus RSS kurilka.co.ua

Category

Archives

Секреты плавно раскрывающегося меню

Author wmas wmas | Category Category CSS, JavaScript

Если честно, то это конечно не секрет и Aesma в моей заметке Как AJAXница так и Prototypeница дал весьма полезную ссылочку в тему на сайте проекта moo.fx — готовая библиотека с прочими наворотами. Однако, запустить эту вещь мне не удалось, а любопытство подвигло на разбирательства. Как так получается, что оно ме-е-е-едленно разворачивается?.

«Секрет» оказался весьма тривиальным. Всё дело в волшебстве CSS, а точнее в свойстве такой фишки как clip, которая определяет область позиционированного элемента, в которой будет показано его содержимое. Другими словами, оно вырезает заданный кусочек пространства, пока только в виде квадратика (rect). Данное свойство поддерживается фактически всеми современными браузерами и имеет следующий синтаксис:

clip: rect(Y1 X1 Y2 X2) | auto

Как по мне, не совсем удобное расположение координат, но что поделаешь: «такова селяви». Чтобы было понятней изобразим этот натюрморт вот таким образом:

координаты CSS свойства clip

Как видите, изобретатель просто использовал другую систему координат. Начало лежит в верхнем правом углу. Да и координаты Y почему-то вводятся первыми. Вот такой необычный финт. Ну да дело житейское. Главное, что для использования этого свойства, как я понимаю, необходимо использовать «абсолютное позиционирование», т.е.:

position: absolute;

Это вносит определённые неудобства, но с ними легко справится и на этом, думаю, не стоит останавливаться. Для большей наглядности небольшой примерчик:

<style>
#layer {
 position: absolute;
 clip: rect(31px 138px 75px 39px);
 border: 1px solid black;
width: 200px;
 height: 100px;
 background: #efecc9;
 color: #000000;
 font: 12px Arial;
 padding: 10px;
}
</style>

<div id=layer>This is example text for content
this box. This is example text for content this
box. This is example text for content this box.
This is example text for content this box. This
is example text for content this box. This is
example text ... </div>

Как вы сможете пронаблюдать, размеры сохраняются, но вырезается интересующий нас кусочек. К слову, параметры позиционирования по умолчанию равны auto.

Для задания динамического изменения вырезаемого кусочка можно воспользоваться языком JavaScript. Конструкция имеет следующий синтаксис:

document.getElementById("elementID").style.clip = "rect(Y1 X1 Y2 X2)";

Если вернуться к нашему примерчику и в нём удалить строку:

 clip: rect(31px 138px 75px 39px);

а в конец кода добавить следующий:

<script>
document.getElementById("layer").style.clip = "rect(31px 138px 75px 39px)";
</script>

то получим тот же результат. Думаю, объяснять дальнейшие действия смысла нет. Достаточно применить setTimeout и обработку скажем события onClick. Далее всё зависит от вашей фантазии. Спасибо за внимание ;)

Publish: Вторник Апр 3, 2007

One Response for "Секреты плавно раскрывающегося меню"

feed for comments on this post

  • Комментарий #2822 author: Serjio Cavalli Reply
    publish: Пятница Июн 10, 2011 at 7:32 дп

    К сожалению у меня не крафтица каменный цветок)))) Не работает…. Уже всё что мог перерыл с этой красивой разъезжающейся панелью……ничего не помогает не javascript чистый, ни jquery, ни эта статья…может я совсем дурак? Я просто начинающий…и очень интересно как это сделать.


Popular links

Copyright © since 2006 Курилка.co.ua,
powered by WordPress