Мап-карта?/меню по клику?

Поделиться1Вс, 11 Мар 2012 18:41:40

Автор: Pa-ku
Заслуженный
Зарегистрирован: Пт, 25 Ноя 2011
Сообщений: 17
Уважение: 0
Позитив: +7
Последний визит:
Чт, 16 Июн 2022 21:41:30

Доброго всем!
А подскажите, реально ли вообще такое сделать?
Хочу поставить в шапку форума что-то наподобие мап-карты. Но чтобы при нажатии не ссыль открывалась, разворачивался кусочек "объявления", текст.
например, как вот здесь сделано объявление. Есть ли какой-нибудь код, возможно?
Надеюсь, понятно спрашиваю, а для наглядности шапочка:

Соответственно, по клику должны показываться поля с объявлением, списком ссылок в навигации и т.п.

0

Поделиться2Вс, 11 Мар 2012 18:45:36

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11564
Последний визит:
Сегодня 17:21:04

Pa-ku
Продемонстрируйте три - четыре эскиза - как это будет выглядеть при клике с проявленным конкретным текстом

0

Поделиться3Вс, 11 Мар 2012 18:56:34

Автор: Pa-ku
Заслуженный
Зарегистрирован: Пт, 25 Ноя 2011
Сообщений: 17
Уважение: 0
Позитив: +7
Последний визит:
Чт, 16 Июн 2022 21:41:30

как-то так

0

Поделиться4Вс, 11 Мар 2012 19:15:53

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11564
Последний визит:
Сегодня 17:21:04

cтиль меню

В HTML верх

Код:

<style> /* Стиль всплывающего меню */
.splLink {width: auto; height: auto; border: 0px solid #FFD700; text-align: center; font-family: Gothic century; font-size: 15px; padding: 5px;}
.splCont {height: auto; width: 260px; background: #D2B48C; padding: 5px; z-index: 1000; margin-top: 5px; border: 2px solid #D2B48C; font-size: 12px; font-family: Lucida Sans Unicode; text-align: center;}

 /* Тень, Прозрачка и Скругление углов во Всплывающем меню */
.splCont {background-color: transparent !important; background-image: url("http://savepic.ru/2408258.png"); 
    border-radius:15px;
    -webkit-border-radius:15px;
    -khtml-border-radius:15px;
    -moz-border-radius:15px;
    -o-border-radius:15px;

     box-shadow:0px 5px 14px #8B6C52;
    -webkit-box-shadow:0px 5px 14px #8B6C52;
    -khtml-box-shadow:0px 5px 14px #8B6C52;
    -moz-box-shadow:0px 5px 14px #8B6C52;
    /*text-shadow: #FFFFFF 1px 1px 4px !important;
    color: #color: #000000 !important;*/
    }
.splCont:first-letter {
    font-family: "Times New Roman", Times, serif; /* Гарнитура шрифта первой буквы */
    font-size: 200% !important; /* Размер шрифта первого символа */
    color: red; /* Красный цвет текста */
   } /* Конец Стиля всплывающего меню */
</style>

Туда где нужна ячейка всплытия (В данном случае - у Вас в HTML верх

<DIV style="border:red 1px solid;position:absolute;top:120px;margin-left:200px"><div class=splLink><img src="/i/blank.gif" width=176 htght=66/></div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>

Ваш Контент

</DIV></DIV>

Красное - отступ от верха экрана; cиним подвижка вправо;
Розовое -убираем - после точного позиционирование кликабельного прямоугольника - на нужное место

Код размножаем по числу надписей

В HTML низ *единственный раз на все коды

Код:

<!--Спойлер - контейнер-->
<script type="text/javascript"> 
  $(document).ready(function(){
    $('.splLink').click(function(){
      $(this).parent().children('div.splCont').toggle('normal');
      return false;
    });
  });
</script>

Отредактировано Deff (Вс, 11 Мар 2012 20:17:17)

0

Поделиться5Вс, 11 Мар 2012 19:17:21

Автор: Pa-ku
Заслуженный
Зарегистрирован: Пт, 25 Ноя 2011
Сообщений: 17
Уважение: 0
Позитив: +7
Последний визит:
Чт, 16 Июн 2022 21:41:30

Deff
ооооооооооооо, вы меня осчастливили)) пойду разбираться, СПАСИБО!!!

0

Поделиться6Вс, 11 Мар 2012 20:13:16

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11564
Последний визит:
Сегодня 17:21:04

Pa-ku Здесь поменяйте -Cиним - Добавка - красным - изменение

<style> /* Стиль всплывающего меню */
.splLink {cursor:pointer;width: auto; height: auto;

Отредактировано Deff (Вс, 11 Мар 2012 23:26:11)

0

Поделиться7Пн, 12 Мар 2012 16:16:17

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11564
Последний визит:
Сегодня 17:21:04

Pa-ku написал(а):

ооооооооооооо, вы меня осчастливили))

Можно заменить скрипт, на скрипт скрытие предыдущего, при открытии последующего

<script type="text/javascript">
$(document).ready(function(){
$('.splLink').click(function(){
var aaa=$(this).parent().children("div.splCont")
$('div.splCont.Active').each(function(){
if($(this).html()!=aaa.html()){$(this).removeClass('Active').hide('normal');}
});
$(this).parent().children("div.splCont").addClass('Active').toggle('normal');
return false;
});
});
</script>

0

Поделиться8Сб, 17 Мар 2012 00:44:42

Автор: Pa-ku
Заслуженный
Зарегистрирован: Пт, 25 Ноя 2011
Сообщений: 17
Уважение: 0
Позитив: +7
Последний визит:
Чт, 16 Июн 2022 21:41:30

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

0

Поделиться9Сб, 17 Мар 2012 00:47:37

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11564
Последний визит:
Сегодня 17:21:04

Pa-ku
Лучше замените скрипт  на тот что в сообщении 7 (* Который у Вас в HTML низ -

уверяю - по наведению хуже

(типичная проблема с кликабельными ссылками во всплывающем Окне - пока перемещаетесь к ссылке - окно сворачиваецо

Отредактировано Deff (Сб, 17 Мар 2012 00:54:58)

0

Поделиться10Сб, 17 Мар 2012 00:54:06

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11564
Последний визит:
Сегодня 17:21:04

Pa-ku
Пробуйте еще и стиль поменять

<style> /* Стиль всплывающего меню */
.splLink {cursor:pointer; width: 100px; height: 40px; border: 0px solid #3a201f; text-align: center; font-size: 15px; padding: 5px;}
.splCont {height: auto; width: 260px; background: #eeebdc; padding: 5px; z-index: 1000;margin-left: -225px;margin-top: -5px; border: 2px solid #7f6d59; font-size: 14px; text-align: center;}

/* Тень, Прозрачка и Скругление углов во Всплывающем меню */
.splCont {background-color: eeebdc;
border-radius:15px;
-webkit-border-radius:15px;
-khtml-border-radius:15px;
-moz-border-radius:15px;
-o-border-radius:15px;

box-shadow:0px 5px 14px #8B6C52;
-webkit-box-shadow:0px 5px 14px #8B6C52;
-khtml-box-shadow:0px 5px 14px #8B6C52;
-moz-box-shadow:0px 5px 14px #8B6C52;
/*text-shadow: #FFFFFF 1px 1px 4px !important;
color: #color: #000000 !important;*/

} /* Конец Стиля всплывающего меню */
</style>

0

Поделиться11Сб, 17 Мар 2012 00:59:38

Автор: Pa-ku
Заслуженный
Зарегистрирован: Пт, 25 Ноя 2011
Сообщений: 17
Уважение: 0
Позитив: +7
Последний визит:
Чт, 16 Июн 2022 21:41:30

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

контейнер сменю, ага

0

Поделиться12Сб, 17 Мар 2012 01:25:29

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11564
Последний визит:
Сегодня 17:21:04

Pa-ku
Это стиль всплывалывающего меню(Он у Вас в HTML верх) И вообще -что переживать об изменениях - когда есть топик (Перед изменением любого окна в Админке - сохраняйте его в тегах [code][/code] в Отдельном сообщении!

Отредактировано Deff (Сб, 17 Мар 2012 10:29:19)

0

Единый форум поддержки

Меню навигации

Пользовательские ссылки

Информация о пользователе