Введите часть искомого слова, названия или фразы...
↑ ↓
  1. Новые темы озаглавленные с маленькой буквы - удаляются без предупреждения!
  2. Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!

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

Тема в разделе "Общее для WordPress", создана пользователем warm12, 15 окт 2016.

  1. warm12

    warm12

    Сообщения:
    17
    Симпатии:
    0
    Баллы:
    1
    Всем привет. Возникла проблема с сайтом, не хватает навыков (

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


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


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


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

    Вложения:

  2. rikitiki

    rikitiki Местный

    Сообщения:
    749
    Симпатии:
    184
    Баллы:
    43
    На какой странице? Категорий? Товаров?
     
  3. warm12

    warm12

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

    rikitiki Местный

    Сообщения:
    749
    Симпатии:
    184
    Баллы:
    43
    Наберите в Яндексе - скрыть и показать при клике
     
    • Нравится Нравится x 1
  5. tuxfighter

    tuxfighter Местный

    Сообщения:
    666
    Симпатии:
    105
    Баллы:
    43
    еще можно набрать "модальное окно" или "всплывающая форма"
     
  6. warm12

    warm12

    Сообщения:
    17
    Симпатии:
    0
    Баллы:
    1
    Нашел вроде бы приемлемый вариант, вот

    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 код чтобы он действовал на мои вкладки?