Главная » 2012 » Октябрь » 30 » Красивые выскальзывающие подсказки при наведении на блок (Javascript)
30.10.2012, 22:27

Красивые выскальзывающие подсказки при наведении на блок





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

HTML

Code
<div class="blockBottom">
<h5>Заголовок</h5>
<span><b>Заголовок</b> — описание.</span>
</div>

<div class="blockBottom">
<h5>Заголовок</h5>
<span><b>Заголовок</b> — описание.</span>
</div>

<div class="blockLeft">
<h5>Заголовок</h5>
<span><b>Заголовок</b> — описание.</span>
</div>

<div class="blockRight">
<h5>Заголовок</h5>
<span><b>Заголовок</b> — описание.</span>
</div>


CSS

Для начала давайте разберем простой пример: заголовок плавно уходит вверх, а за ним, снизу, появляется текст.

Как обычно, сначала оформим наш основной контейнер, класс blockBottom

Code
.blockBottom {
  background-color:#33CC26; /* Фон */
  width:300px; /* Фиксированная ширина */
  overflow:hidden; /* Будем убирать все то, что вылезло */
  height: 75px; /* Высота */
  display: inline-block; /* Все блоки будут идти друг за другом, можно убрать. */
  color:#fff; /* Цвет текста */
  padding:0 10px 10px 10px; /* Отступы. Сверху 0 */
}


Основное здесь лишь свойства overflow, width, height, хотя ширину и высоту можно было бы задать в процентном соотношении...

Теперь стоит оформить внутренние элементы. Так как сначала будет уходить заголовок, а уже за ним появится текст, то соответственно все работы будем проводить с заголовком.

Сначала в состояние по умолчанию.

Code
.blockBottom h5{
  text-align:center; /* текст по центру */
  margin-top:25px; /* отступ сверху, чтобы текст был ровно по середине */
  padding:0; /* внутренние отступы */
  font:20pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* размер, семейство шрифта */
  padding-bottom:15px; /* отступ снизу */
}


Если вы еще не поняли, в чем тут фишка, то объясняю. Мы добавили свойство padding-bottom, то есть нижний отступ, который вытесняет текст из рамок нашего главного контейнера. А, так как у нашего главного контейнера стоит свойство overflow, со значением hidden, то та часть текста, которая была вытеснена, она просто напросто не будет показываться, "исчезнет".

Так же, чтобы выскальзывание было плавным, нужно добавить свойство transition:

Code
.blockBottom h5{
...
  -webkit-transition:All 1s ease;
  -moz-transition:All 1s ease;
  -o-transition:All 1s ease;
}


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

Code
.blockBottom:hover h5{
  margin-top: -90px;
}


Вот и все! Осталось лишь оформить наш текст, выскальзывающий за заголовком.

Code
.blockBottom span{
  text-shadow:1px 0 0 #DFF9DD;
  font:11pt "Trebuchet MS", tahoma, verdana, arial narrow, arial;
}


Это был первый пример создания блока, где заголовок уходит вверх, а текст за ним выскальзывает снизу.

Теперь, как сделать, чтобы заголовок уходил влево, а за ним появлялся текст? Здесь так же все просто.

Что и где нужно заменить:

Code
.blockLeft h5{
  -webkit-transition:All 1s ease;
  -moz-transition:All 1s ease;
  -o-transition:All 1s ease;
  text-align:center;
  margin-top:25px; padding:0;
  font:20pt "Trebuchet MS", tahoma, verdana, arial narrow, arial;
  padding-bottom:15px;
}
.blockLeft:hover h5{
  margin-left: -500px;
  float:left;
}


Почти так же и в случае, когда нужно сделать, чтобы заголовок уходил в право:

Code
.blockRight h5{
  -webkit-transition:All 1s ease;
  -moz-transition:All 1s ease;
  -o-transition:All 1s ease;
  text-align:center;
  margin-top:25px; padding:0;
  font:20pt "Trebuchet MS", tahoma, verdana, arial narrow, arial;
  padding-bottom:15px;
}
.blockRight:hover h5{
  margin-right: -500px;
  float:right;
}


вот и все...

а вот код для лентяев, которые не хотят все описание:

Code
<html>
<head>
<style>

body {
  background-color:white; /* Фон */
  margin:0; /* Внешний отступ 0 */
  padding:0; /* Внутренний отступ 0 */
  text-align:center; /* Текст по центру (для IE) */
}
.main {
  margin:0 auto; /* Внешних отступов 0, делаем элемент по центру */
  width:800px; /* Обяхательно наличие ширины */
  text-align:left; /* Текст по левому краю */
}

.blockBottom {
  background-color:#33CC26; /* Фон */
  width:300px; /* Фиксированная ширина */
  overflow:hidden; /* Будем убирать все то, что вылезло */
  height: 75px; /* Высота */
  display: inline-block; /* Все блоки будут идти друг за другом, можно убрать. */
  color:#fff; /* Цвет текста */
  padding:0 10px 10px 10px; /* Отступы. Сверху 0 */
}

.blockBottom h5{
  /* transition start */
  -webkit-transition:All 1s ease;
  -moz-transition:All 1s ease;
  -o-transition:All 1s ease;
  /* transition end */
  text-align:center; /* текст по центру */
  margin-top:25px; /* отступ сверху, чтобы текст был ровно по середине */
  padding:0; /* внутренние отступы */
  font:20pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* размер, семейство шрифта */
  padding-bottom:15px; /* отступ снизу */
}
.blockBottom:hover h5{
  margin-top: -90px;
}
.blockBottom span{
  text-shadow:1px 0 0 #DFF9DD;
  font:11pt "Trebuchet MS", tahoma, verdana, arial narrow, arial;
}

.blockLeft {
  background-color:#6388B0;
  width:300px;
  overflow:hidden;
  height: 75px;
  display: inline-block;
  color:#fff;  
  padding:0 10px 10px 10px;
}

.blockLeft h5{
  -webkit-transition:All 1s ease;
  -moz-transition:All 1s ease;
  -o-transition:All 1s ease;
  text-align:center;
  margin-top:25px; padding:0;
  font:20pt "Trebuchet MS", tahoma, verdana, arial narrow, arial;
  padding-bottom:15px;
}
.blockLeft:hover h5{
  margin-left: -500px;
  float:left;
}
.blockLeft span{
  text-shadow:1px 0 0 #6388B0;
  font:11pt "Trebuchet MS", tahoma, verdana, arial narrow, arial;
}

.blockRight {
  background-color:#DA3838;
  width:300px;
  overflow:hidden;
  height: 75px;
  display: inline-block;
  color:#fff;  
  padding:0 10px 10px 10px;
}

.blockRight h5{
  -webkit-transition:All 1s ease;
  -moz-transition:All 1s ease;
  -o-transition:All 1s ease;
  text-align:center;
  margin-top:25px; padding:0;
  font:20pt "Trebuchet MS", tahoma, verdana, arial narrow, arial;
  padding-bottom:15px;
}
.blockRight:hover h5{
  margin-right: -500px;
  float:right;
}
.blockRight span{
  text-shadow:1px 0 0 #DA3838;
  font:11pt "Trebuchet MS", tahoma, verdana, arial narrow, arial;
}

</style>
</head>
<body>
<div class="main">
<br><br><br><br>

<div class="blockBottom">
<h5>Филоттрано</h5>
<span><b>Филоттрано</b> — коммуна в Италии, располагается в регионе Марке, подчиняется административному центру Анкона.</span>
</div>

<div class="blockBottom">
<h5>???</h5>
<span><b>webo4ka.ru</b> — А ты гуляешь на webo4ke???.</span>
</div>

<div class="blockLeft">
<h5>Кайласанатха</h5>
<span><b>Кайласанатха</b> — скальный индуистский храм, является центральным сооружением комплекса пещерных храмов в Эллоре.</span>
</div>

<div class="blockRight">
<h5>Вуд, Роберт</h5>
<span><b>Роберт Вуд</b> — английский путешественник, писатель. Его книга произвела переворот в изучении Гомера.</span>
</div>

</div>
</body>
</html>
Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: Неизвестен
Категория: JavaScript's | Просмотров: 2012 | Добавил: sold93 | Рейтинг: 4.5/2 |
Теги: Блок, При, выскальзывающие, На, наведении, подсказки, красивые
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]