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

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

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Единый форум поддержки » Корзина » Помощь по созданию бокового меню!

Помощь по созданию бокового меню!

Страница: 1

Сообщений 1 страница 16 из 16

1

  • Автор: HelloKitti
  • Заслуженный
  • HelloKitti
  • Зарегистрирован: Вс, 3 Июл 2011
  • Сообщений: 39
  • Уважение: -1
  • Позитив: +4
  • Пол: Женский
  • Последний визит:
    Вт, 25 Июн 2013 13:17:52

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

http://cs4155.vkontakte.ru/u94667025/-3/y_2fce5af0.jpg

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

0

2

  • Автор: rps
  • Стремясь к новому...
  • rps
  • Зарегистрирован: Вс, 12 Окт 2008
  • Сообщений: 22652
  • Уважение: +4738
  • Позитив: +3431
  • Пол: Мужской
  • Предупреждения: ‡ 1. 2. 3. ... 10!
  • Последний визит:
    Вс, 14 Мар 2021 21:42:57

HelloKitti
Здравствуйте.

HelloKitti написал(а):

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

Давайте код выплывающего меню.

0

3

  • Автор: HelloKitti
  • Заслуженный
  • HelloKitti
  • Зарегистрирован: Вс, 3 Июл 2011
  • Сообщений: 39
  • Уважение: -1
  • Позитив: +4
  • Пол: Женский
  • Последний визит:
    Вт, 25 Июн 2013 13:17:52

Верх

Код:
<style> /* Стиль всплывающего меню */
.splLink {width: 130px; height: 40px; border: 1px 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: -40px; margin-left: 140px; 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;
    }

</style>

Низ

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

Код кнопок

Код:
<table width="140">
<tr><td align="center">
<DIV><div class=splLink><img src="http://i074.radikal.ru/1107/d1/123583ff68ea.jpg"></div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>

Ваш Контент для гостей

</DIV></DIV>
</td></tr>
<tr><td align="center">
<DIV><div class=splLink><img src="http://s004.radikal.ru/i206/1107/f1/9c9bf9275a5f.jpg"></div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>

Ваш Контент для пользователей

</DIV></DIV>
</td></tr>
<tr><td align="center">
<DIV><div class=splLink><img src="http://s55.radikal.ru/i149/1107/a6/b356d45946bc.jpg"></div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>

Ваш Контент новостей

</DIV></DIV>
</td></tr>
<tr><td align="center">
<DIV><div class=splLink><img src="http://s011.radikal.ru/i318/1107/c6/d7e989337a99.jpg"></div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>

Ваш Контент событий

</DIV></DIV>
</td></tr>
</table>

0

4

  • Автор: Кофеман
  • Заслуженный
  • Кофеман
  • Зарегистрирован: Ср, 2 Фев 2011
  • Сообщений: 1575
  • Уважение: +257
  • Позитив: +167
  • Пол: Мужской
  • Последний визит:
    Пт, 1 Мар 2013 14:56:10

HelloKitti, а все равно сайдбар встроенный pun-main нужно ставить.  :D

0

5

  • Автор: rps
  • Стремясь к новому...
  • rps
  • Зарегистрирован: Вс, 12 Окт 2008
  • Сообщений: 22652
  • Уважение: +4738
  • Позитив: +3431
  • Пол: Мужской
  • Предупреждения: ‡ 1. 2. 3. ... 10!
  • Последний визит:
    Вс, 14 Мар 2021 21:42:57

HelloKitti

Код:
<style> /* Стиль всплывающего меню */
.splLink {width: 130px; height: 40px; border: 1px 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: -40px; margin-left: 140px; 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;
    }

.splLink img {
  position: relative;
  z-index: 1000;
  left: -60px;
}
</style>
Код:
<script type="text/javascript"> 
  $(document).ready(function(){
    $('.splLink').click(function(){
      $(this).parent().children('div.splCont').toggle('normal');
      return false;
    });
  });
document.getElementById("pun-main").innerHTML = "<table cellspacing='0' style='width: 100%; borser-style: none !important;'><tdody><tr><td style='vertical-align: top; width: 250px;'>" + document.getElementById("hidden").innerHTML + "</td><td>" + document.getElementById("pun-main").innerHTML  + "</td></tr></tbody></table>";
</script>
Код:
<div id="hidden" style="display: none;"><table width="140">
<tr><td align="center">
<DIV><div class=splLink><img src="http://i074.radikal.ru/1107/d1/123583ff68ea.jpg"></div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>

Ваш Контент для гостей

</DIV></DIV>
</td></tr>
<tr><td align="center">
<DIV><div class=splLink><img src="http://s004.radikal.ru/i206/1107/f1/9c9bf9275a5f.jpg"></div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>

Ваш Контент для пользователей

</DIV></DIV>
</td></tr>
<tr><td align="center">
<DIV><div class=splLink><img src="http://s55.radikal.ru/i149/1107/a6/b356d45946bc.jpg"></div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>

Ваш Контент новостей

</DIV></DIV>
</td></tr>
<tr><td align="center">
<DIV><div class=splLink><img src="http://s011.radikal.ru/i318/1107/c6/d7e989337a99.jpg"></div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>

Ваш Контент событий

</DIV></DIV>
</td></tr>
</table></div>

0

6

  • Автор: HelloKitti
  • Заслуженный
  • HelloKitti
  • Зарегистрирован: Вс, 3 Июл 2011
  • Сообщений: 39
  • Уважение: -1
  • Позитив: +4
  • Пол: Женский
  • Последний визит:
    Вт, 25 Июн 2013 13:17:52

А последний код куда вставлять? Ставлю в HTML-низ, так оно съезжает в конец форума и иконки друг на друга заходят наполовину...

0

7

  • Автор: Кофеман
  • Заслуженный
  • Кофеман
  • Зарегистрирован: Ср, 2 Фев 2011
  • Сообщений: 1575
  • Уважение: +257
  • Позитив: +167
  • Пол: Мужской
  • Последний визит:
    Пт, 1 Мар 2013 14:56:10
HelloKitti написал(а):

А последний код куда вставлять? Ставлю в HTML-низ, так оно съезжает в конец форума и иконки друг на друга заходят наполовину...

HelloKitti, последний код вставляйте в объявление.

0

8

  • Автор: HelloKitti
  • Заслуженный
  • HelloKitti
  • Зарегистрирован: Вс, 3 Июл 2011
  • Сообщений: 39
  • Уважение: -1
  • Позитив: +4
  • Пол: Женский
  • Последний визит:
    Вт, 25 Июн 2013 13:17:52

HelloKitti, последний код вставляйте в объявление.

Ну, а при чем здесь объявление?) Я же не для объявления просила... К тому же, у меня его совершенно некуда впихнуть!

0

9

  • Автор: Кофеман
  • Заслуженный
  • Кофеман
  • Зарегистрирован: Ср, 2 Фев 2011
  • Сообщений: 1575
  • Уважение: +257
  • Позитив: +167
  • Пол: Мужской
  • Последний визит:
    Пт, 1 Мар 2013 14:56:10

HelloKitti, тот код, который Вам дал rps, нужно вставоять в Объявление. Таким образом, Ваше объявление будет вертикальным и слева от форума. Ваше меню будет в нем. Вставьте и посмотрите.
Встроенное в pun-main, как Вы сказали, Вам не подходит. Это - тоже. А вариант с фиксированным блоком div найдете поиском по форуму.

0

10

  • Автор: HelloKitti
  • Заслуженный
  • HelloKitti
  • Зарегистрирован: Вс, 3 Июл 2011
  • Сообщений: 39
  • Уважение: -1
  • Позитив: +4
  • Пол: Женский
  • Последний визит:
    Вт, 25 Июн 2013 13:17:52

Благодарю!!!!!!  :flirt:
Но один вопросик еще есть!
Прошу прощения, я, наверное, уже надоела вам со своими вопросами... У меня иконки не становятся как нужно и немного съезжают в сторону из-за чего под ними образовывается чернота... Могу я это как-то исправить?

Отредактировано HelloKitti (Чт, 7 Июл 2011 09:31:58)

0

11

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51115
  • Уважение: +15197
  • Позитив: +11571
  • Последний визит:
    Вчера 23:10:52

HelloKitti Адрес форума

0

12

  • Автор: HelloKitti
  • Заслуженный
  • HelloKitti
  • Зарегистрирован: Вс, 3 Июл 2011
  • Сообщений: 39
  • Уважение: -1
  • Позитив: +4
  • Пол: Женский
  • Последний визит:
    Вт, 25 Июн 2013 13:17:52

http://federalexpertservice.russ-forum.ru/

0

13

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51115
  • Уважение: +15197
  • Позитив: +11571
  • Последний визит:
    Вчера 23:10:52

HelloKitti О чём идет речь и какие иконки куда двигать - укажите стрелками

> http://savepic.org/1919169.png

0

14

  • Автор: Кофеман
  • Заслуженный
  • Кофеман
  • Зарегистрирован: Ср, 2 Фев 2011
  • Сообщений: 1575
  • Уважение: +257
  • Позитив: +167
  • Пол: Мужской
  • Последний визит:
    Пт, 1 Мар 2013 14:56:10

HelloKitti, замените в HTML-верх код стиля меню на этот

<style> /* Стиль всплывающего меню */
.splLink {width: 130px; height: 46px; 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: 1005; margin-top: -40px; margin-left: 140px; 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;
    }

.splLink img {
  position: relative;
  z-index: 1000;
  left: -20px;
top: -15px;
}
</style>

0

15

  • Автор: HelloKitti
  • Заслуженный
  • HelloKitti
  • Зарегистрирован: Вс, 3 Июл 2011
  • Сообщений: 39
  • Уважение: -1
  • Позитив: +4
  • Пол: Женский
  • Последний визит:
    Вт, 25 Июн 2013 13:17:52

Кофеман, спасибо огромное!!! Все восстановилось!!
Как только смогу ставить оценку сразу!!  :love:

0

16

  • Автор: rps
  • Стремясь к новому...
  • rps
  • Зарегистрирован: Вс, 12 Окт 2008
  • Сообщений: 22652
  • Уважение: +4738
  • Позитив: +3431
  • Пол: Мужской
  • Предупреждения: ‡ 1. 2. 3. ... 10!
  • Последний визит:
    Вс, 14 Мар 2021 21:42:57

На всякий случай:

rps написал(а):

<div id="hidden" style="display: none;">

Это я к тому, что ставить последний код можно куда угодно, хоть в ХТМЛ-верх, хоть в ХТМЛ-низ, хоть в ХТМЛ-объявление. Ибо он сам по себе скрыт и служит контейнером, из которого скрипт берёт код и вставляет его в левую колонку создаваемой в #pun-main  таблицы:

rps написал(а):

document.getElementById("pun-main").innerHTML = "<table cellspacing='0' style='width: 100%; borser-style: none !important;'><tdody><tr><td style='vertical-align: top; width: 250px;'>" + document.getElementById("hidden").innerHTML + "</td><td>" + document.getElementById("pun-main").innerHTML  + "</td></tr></tbody></table>";

+1

Страница: 1

Вы здесь » Единый форум поддержки » Корзина » Помощь по созданию бокового меню!