Подскажите, как создать примитивное всплывающее меню на странице

[warm12]

Всем привет. Возникла проблема с сайтом, не хватает навыков (

Подскажите, как создать примитивное всплывающее меню на странице?


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


Может есть какой то плагин или скрипт, чтобы привязать. Подскажите куда копать. Спасибо большое.


Прилагаю скрин так, как ссылку на сайт не могу скинуть он на оффе находится.

 

[rikitiki]

Подскажите, как создать примитивное всплывающее меню на странице?

На какой странице? Категорий? Товаров?

 

[warm12]

На какой странице? Категорий? Товаров?

Это все на главной странице. Одностраничный сайт для предоставления услуг. Чем меньше переходов по ссылкам тем лучше. Соответственно нужно чтобы клиент смотрит на этот кружок нажмет на него и выведется менюшка такая с текстом

 

[rikitiki]

Наберите в Яндексе - скрыть и показать при клике

 

[tuxfighter]

еще можно набрать "модальное окно" или "всплывающая форма"

 

[warm12]

Нашел вроде бы приемлемый вариант, вот

1. HTML разметка


<div class="poster">
<div class="descr">
Какой-то текст который должен быть в блоке<br>
<a href="#">Интересная ссылка</a>
</div>
</div>

2. Стили CSS


.poster{
position:relative;
margin:100px auto;
background:#ff6600;
height:200px;
width:150px;
}
.descr{
display:none;
margin-left:-350px;
padding:10px;
margin-top:17px;
background:#f3f3f3;
height:200px;
-moz-box-shadow:0 5px 5px rgba(0,0,0,0.3);
-webkit-box-shadow:0 5px 5px rgba(0,0,0,0.3);
box-shadow:0 5px 5px rgba(0,0,0,0.3);
}
.poster:hover .descr{
display:block;
position:absolute;
top:120px;
z-index:9999;
width:400px;


Пример №2 по ссылке http://gnatkovsky.com.ua/files/holder/index.html


Ребят, вопрос, стили я вставил, все работает, но куда вставить 1 код чтобы он действовал на мои вкладки?