• Yamaha motors
  • Subaru WRX STI
  • Баба Клава!
  • Светодиодные системы освещения

Печать

Простая кнопка Sype для сайта

Указанный ниже код выводит две кнопки для двух менеджеров отдела продаж.

Код кнопки (HTML)

<div id="skype_buttom_layer1">
<nav id="skype_buttom">
<ul>
<li><a href="#">
<table>
<tr>
<td><img src="/images/logo/skype.png"></td>
<td>Задать вопрос в Skype</td>
</tr>
</table>
</a>
<ul>
<li><a href="skype:menedger1?chat">Начать чат</a></li>
<li><a href="skype:menedger1?call">Аудиозвонок</a></li>
<li><a href="skype:menedger1?call&video=true">Видеозвонок</a></li>
<li><a href="skype:menedger1?userinfo">Информация</a></li>
<li><a href="skype:menedger1?add">Добавить в контакты</a></li>
</ul>
</li>
</ul>
</div>


<div id="skype_buttom_layer2">
<nav id="skype_buttom">
<ul>
<li><a href="#">
<table>
<tr>
<td><img src="/images/logo/skype.png"></td>
<td>Задать вопрос в Skype</td>
</tr>
</table>
</a>
<ul>
<li><a href="skype:menedger2?chat">Начать чат</a></li>
<li><a href="skype:menedger2?call">Аудиозвонок</a></li>
<li><a href="skype:menedger2?call&video=true">Видеозвонок</a></li>
<li><a href="skype:menedger2?userinfo">Информация</a></li>
<li><a href="skype:menedger2?add">Добавить в контакты</a></li>
</ul>
</li>
</ul>
</div>

 

CSS
/*Button Skype  >>>>>>>>>>> */

.sub-menu
{
   display: none;
}
.main-item:focus ~ .sub-menu,
.main-item:active ~ .sub-menu,
.sub-menu:hover
{
   display: block;
}

#skype_buttom_layer1 {position: absolute; top: 30px; z-index: 50;}
#skype_buttom_layer2 {position: absolute; top: 70px; z-index: 20;}

#skype_buttom
{
    margin-top:5px
}

#skype_buttom ul
{
    list-style: none;
    position: absolute;
    float: left;
    margin: 0;
    padding: 0;
}

#skype_buttom ul a
{
    display:block;
    width: 185px;
    color: #333;
    text-decoration: none;
    font-weight: 700;
    line-height: 0px;
    padding: 0 0px;
    font: 14px "Arial Narrow";
    /* box-shadow: 0 0px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1); */
}

#skype_buttom ul li
{
    position:relative;
    float:left;
    margin:0;
    padding:0
}

#skype_buttom ul li.current-menu-item
{
    background:#ddd
}

#skype_buttom ul li:hover
{
    background:#f6f6f6
}

#skype_buttom ul ul
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    padding:0
}

#skype_buttom ul ul li
{
    float:none;
    width:200px
}

#skype_buttom ul ul a
{
    line-height:120%;
    padding: 5px 15px
}

#skype_buttom ul ul ul
{
    top:0;
    left:100%
}

#skype_buttom ul li:hover > ul
{
    display:block
}
/*  <<<<<<<<<<     Button Skype */