Jump to content
  • 0

Как сделать плавающую панельку с кнопками соцсетей


Ultran
 Share

Question

Здравствуйте!

Подскажите пожалуйста... Мне на сайте необходимо сделать плавающую панель с кнопками социальных сетей. На подобие сервиса Share42, но не совсем. Дело в том, что кнопки должны вести на мои профили в социальных сетях, а не опубликовывать ссылку на страницу в них. Поискал в интернете - ничего путного не нашел. Слышал, что такое можно сделать средствами CSS + Javascript. Но не знаю как. По сути нужно создать небольшую узенькую панельку слева, которая будет как-бы прикреплена к левой части экрана, либо будет скролировать при пролистывании странички.

Подскажите пожалуйста, как такое реализовать?

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0


<a href="URL_STRANICI_V_SOCIALKE"><img src="URL_KARTINKI_KNOPKI" alt=""></a>

А для плавательности всего блока с кнопками оберните их все вместе в


<div style="position:absolute"></div>

И позиционируйте с помощью css свойств top и left

Edited by Daiver
Link to comment
Share on other sites

  • 0


<a href="URL_STRANICI_V_SOCIALKE"><img src="URL_KARTINKI_KNOPKI" alt=""></a>

А для плавательности всего блока с кнопками оберните их все вместе в


<div style="position:absolute"></div>

И позиционируйте с помощью css свойств top и left

А можно пожалуйста поподробнее?

А то плохо понял... Если Вас не затруднит, приведите пожалуйста пример кода :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Alarr
      Как называется сайт, который позволяет любому человеку зарегистрироваться на нём и создать пост с объявлением об определённом событии?
      Сайт листинг, или портал, или как-то ещё?
      Если более подробно, то при регистрации юзер получит свою страничку и возможность создавать посты, которые будут отображаться в общей ленте новостей. Может это соцсеть?
      Хочу сделать такой сайт на WP.
      Заранее спасибо.
    • By mmdd2015
      Какое значение left:; и top:; выбрать или что то добавить для меню что бы оно имело одно положение на разных мониторах?
       
      Пишу в процентах например left:37.7%; top:324%; то в таком случае на мониторе как у меня 1366/768 оно(кнопка или меню) занимает нужное (и нормальное с виду) положение. НО если смотреть на мониторе 1280/1024 то положение кнопки намного ниже чем необходимо и вид какой то "***" что есть вполне логичным так как проценты считал под свой монитор... ЧТО ДЕЛАТЬ?
       
       
      Не знаю как в теме отобразится код меню в теме на форуме... поэтому даю вам ссылку на страничку с "демо" и кодом меню
      http://mmdd.info/page2.html
      На страничке одна кнопка - но разницы нет так как меню строится тем же кодом только додаются пункты. 
       
      На полноценной страничке наполненной контентом кнопку ставлю далеко и так как уже говорил выше на моем мониторе она расположена идеально а на других т*по 
       
      Вот код:
       
      <div id="html5" style="position:relative; overflow:hidden; left:37.7%; top:324%; background-size: cover; z-index:1"><head><title>ПРИСОЕДИНИТЬСЯ</title> <style type="text/css">.navigation3 {   list-style: none;}.navigation3 li {   float: left;   margin-right: 5px;   font-family: Verdana, Arial, Helvetica, sans-serif;   background-size: cover;   font-size: 150%;}.navigation3 li a {   display: block;   padding: 15px 20px;   background: #0db5b5;   color: #F5F5F5;   text-decoration: none;   position: static;}.navigation3 li a:hover {   background: #92d3d3;   color: #000000;}</style></head><body><ul class="navigation3">   <li><a href="http://mmdd.info/partners">ПРИСОЕДИНИТЬСЯ</a></li></ul><body></body></html></div> 
    • By MegaS
      Верстал шаблон.Извините,возможно за тупой вопрос,но зачем выделенные на рисунке кнопки,и какую функцию выполняют?
       
       

       
       
       

    • By budanov
      Добрый день! Подскажите, пожалуйста, можно ли как-то сделать, чтобы при нажатии на кнопку поделиться Вконтакте, в поле для ввода комментария уже был вбит определённый текст?
    • By fireman691
      Подскажите пожалуйста как на css сделать?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy