• 0
Free3e

Подскажите как реализовать интерактивное меню.

    Вопрос

    Free3e    0
    Free3e

    Добрый день.

     

    Подскажите пожалуйста как правильно реализовать данное меню или список, не знаю как правильней назвать.

    Нужно чтобы при нажатии на город появлялся блок с информацией и загорался определенное место на карте.

    Если с появлением блока более менее понятно, то как позиционировать эти красные (активные) города, чтобы они не съезжали с карты на разных разрешениях.

    Буду благодарен ссылкам на демо и примеры.

     

    С меня кофе тому кто поможет мне найти хорошее решение =)

    Screen Shot 2017-06-07 at 8.26.50 PM.png

    Изменено пользователем Free3e
    поправка

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах

    1 ответ на этот вопрос

    Рекомендуемые сообщения

    • 0
    Igor Schnaider    162
    Igor Schnaider

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

    Про то, чтобы загорались регионы, принцип такой.

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах

    Создайте аккаунт или войдите в него для комментирования

    Вы должны быть пользователем, чтобы оставить комментарий

    Создать аккаунт

    Зарегистрируйтесь для получения аккаунта. Это просто!

    Зарегистрировать аккаунт

    Войти

    Уже зарегистрированы? Войдите здесь.

    Войти сейчас

    • Войти через Facebook
    • Войти через Twitter
    • Войти через Microsoft
    • Войти через LinkedIn
    • Войти через Google

    • Похожие публикации

      • Rex4r
        Автор: Rex4r
        Добрый день. Столкнулся с неожиданной проблемой. На айфонах блоки сайта наезжают друг на друга, на винде и андроиде всё работает нормально. Вьевпорт указан.
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> На айфонах сайт выглядит так:   
         
        Должен выглядеть вот так: 
         
         
        Задачу осложняет то что у меня нет iOS устройств чтобы можно было протестить, а все эмуляторы, какие пробовал, выдают что всё верно.
         
        Кто-нибудь сталкивался с подобным? В чем может быть проблема?
      • mightybat
        Автор: mightybat
        Добрый день.
        Есть форма(опросник), переменных на 200, подскажите как можно ее заполнить на компьютере1, и открыть на компьютере2 уже заполненную?
        Может быть есть человеческий способ, решения данной проблемы? 
        Вижу только вариант 1)сохранить все переменные в mysql 2)на втором компе вытащить из БД 3)воссоздать страницу HTML через echo( куча чекбоксов с oncliсk показывающими дивы, которые замучаюсь переписывать с block на none и наоборот).