Раскрывающееся меню в нижней левой части страницы - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Суббота, 10.12.2016
Скрипты для uCoz » Меню для сайта uCoz » Раскрывающееся меню в нижней левой части страницы

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Раскрывающееся меню в нижней левой части страницы

Меню расрывающееся в нижнем левом углу страницы




Менюшка находящаяся в нижнем левом углу при нажатии раскрывается,выпадают круглые подпункты в форме веера.При нажатии на основной якорь меню собирается в изначальное положение.Можно использовать для любых целей,недостатком конечно является незначительный диаметр подпунктов,но кому то может и пригодиться.Устанавливать нужно на страницах модулей в которых будет работать менюха.Для работы нужна подключенная библиотека jQuery,она у Вас вшита по умолчанию если сайт находится в системе uCoz.Если требуется дополнительное пояснение указывайте на загвоздку в форму комментариев.





Пример кода для установки


<style>
*{
outline: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
::-moz-selection { background: rgba(0,0,0,0); }
::selection { background: rgba(0,0,0,0);}
#circle-mod{
position: absolute;
bottom: 0;
left: 10px;
}
#container-circle {
position: relative;
height: 100px;
width: 100px;
}
#base-button {
position: absolute;
top: 0;
left: 0;
border-radius: 50px;
height: 80px;
width: 80px;
background: #fff;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.5);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.5);
-o-box-shadow: 0px 1px 3px rgba(0,0,0,.5);
-ms-box-shadow: 0px 1px 3px rgba(0,0,0,.5);
box-shadow: 0px 1px 3px rgba(0,0,0,.5);
padding: 0;
}
#base-button div span.dsuplink{
height: 70px;
display: block;
-webkit-transition: all 400ms;
-moz-transition: all 400ms;
-o-transition: all 400ms;
-ms-transition: all 400ms;
transition: all 400ms;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}
#base-button.open div span.dsuplink{
transform: rotate(765deg);
-webkit-transform: rotate(765deg);
-moz-transform: rotate(765deg);
-o-transform: rotate(765deg);
-ms-transform: rotate(765deg);
}
#base-button div{
margin: 4px;
height: 70px;
width: 70px;
background: #db3a2b; /* Old browsers */
background: -moz-linear-gradient(top,  #db3a2b 0%, #cf0404 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#db3a2b), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #db3a2b 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #db3a2b 0%,#cf0404 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #db3a2b 0%,#cf0404 100%); /* IE10+ */
background: linear-gradient(top,  #db3a2b 0%,#cf0404 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db3a2b', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
border-radius: 45px;
border: 1px solid #cf0404;
line-height: 70px;
text-align: center;
color: #fff;
font-size: 70px;
font-weight: 700;
padding: 0;
}
a.dslink {
text-decoration:none;
color:#fff;
}
.btn{
position: absolute;
height: 50px;
width: 50px;
border-radius: 25px;
top: 15px;
left: 15px;
background: #fff;
-webkit-transition: all 250ms;
-moz-transition: all 250ms;
-o-transition: all 250ms;
-ms-transition: all 250ms;
transition: all 250ms;
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.5);
-o-box-shadow: 0px 1px 3px rgba(0,0,0,.5);
-ms-box-shadow: 0px 1px 3px rgba(0,0,0,.5);
box-shadow: 0px 1px 3px rgba(0,0,0,.5);
}
.btn.open{
transition: all 350ms;
-webkit-transition: all 350ms;
-webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.400, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.400, 1.650);
-moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.400, 1.650);
-ms-transition-timing-function: cubic-bezier(0.250, 0.250, 0.400, 1.650);
-o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.400, 1.650);
transition-timing-function: cubic-bezier(0.250, 0.250, 0.400, 1.650); /* custom */
}
.btn div{
margin: 5px;
width: 40px;
height: 40px;
background: #222;
border-radius: 20px;
line-height: 40px;
text-align: center;
color: #fff;
font-size: 12px;
}
#button-1.open{
top: -125px;
left: 25px;
}
#button-1.open.clicked{
top: -135px;
left: 15px;
}
#button-2.open{
top: -105px;
left: 80px;
}
#button-3.open{
top: -75px;
left: 125px;
}
#button-4.open{
top: -30px;
left: 160px;
}
#button-5.open{
left: 175px;
top: 25px;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
#base-button div{
line-height: 60px;
}
}
</style>
<div id=circle-mod>
<div id=container-circle>
<div id=button-1 class=btn>
<div><a href="#" target="_blank" class="dslink"><span class="dsuplink">Like</span></a></div>
</div>
<div id=button-2 class=btn>
<div><a href="#" target="_blank" class="dslink"><span class="dsuplink">+1</span></a></div>
</div>
<div id=button-3 class=btn>
<div><a href="#" target="_blank" class="dslink"><span class="dsuplink">Tweet</span></a></div>
</div>
<div id=button-4 class=btn>
<div><a href="#" target="_blank" class="dslink"><span class="dsuplink">Email</span></a></div>
</div>
<div id=button-5 class=btn >
<div><a href="#" target="_blank" class="dslink"><span class="dsuplink">♥</span></a></div>
</div>
<div id=base-button>
<div><span class="dsuplink">+</span></div>
</div>
</div>
</div>
<script defer>
$(function(){
var delay = 40, delayTime, btns = $('.btn');
$('#base-button').toggle(function(){
$(this).addClass('open');
btns.each(function(i){
delayTime = i * delay;
var ele = $(this);
window.setTimeout(function(){
ele.addClass('open');
}, delayTime);
});
}, function(){
$(this).removeClass('open');
var ii = 0;
$($(btns).get().reverse()).each(function(i){
delayTime = i * delay;
var ele = $(this);
window.setTimeout(function(){
ele.removeClass('open');
}, delayTime);
});
});
})
</script>



Библиотека jQuery для проверки меню в редакторе

Не нужно устанавливать себе этот скрипт если сайт на юКоз,его нужно вставить к имеющемуся коду примера для проверки в редакторе



<script type="text/javascript" src="http://s36.ucoz.net/src/jquery-1.7.2.js"></script>


Проверьте код для установки в редакторе










Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 1655 | Добавил: IZOTOP | Рейтинг: 0.0/0

    Всего комментариев: 3
    0   Спам
    3 IZOTOP   (01.02.2013 19:21)
    Аватар IZOTOP Valvik
    такое бывает )))

    0   Спам
    2 Valvik   (01.02.2013 17:20)
    Аватар Valvik Вот, блин, коммент написал и заработало

    0   Спам
    1 Valvik   (01.02.2013 17:19)
    Аватар Valvik Чего то ни фига не хочет работать...


    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]