Страница 1 из 11
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Меню с прокруткой до объектов (Для сайта ucoz)
Меню с прокруткой до объектов
๖ۣۜInspire
Дата: Суббота, 04.01.2014, 22:18 | Сообщение # 1
Администраторы
Сообщений:598
Награды: 2


Многие хотели себе меню в котором при нажатии на пункт происходил плавный скроллинг до определённого объекта, например как ЗДЕСЬ

тока что сделал такое

Код
<style>
.menu{
position:fixed;
left:0;
width:900px;
left:50%;
top:0;
margin-left:-450px;
border-bottom:3px solid #aaa;
height: 71px;
}
ul{
list-style:none;
}
li {
cursor:pointer;
list-style: none;
float: left;
font: 14px arial;
padding: 19px 30px 20px 30px;
}
li:hover{
border-bottom:3px solid #ffc944;
}
.box{
width:100%;
height:500px;
background:#ccc;
margin-top:150px;
}
#1{
background:#ccc;
}
#2{
background:#aaa;
}
#3{
background:#efefef;
}
.red{
border-bottom:3px solid red !important;
}
</style>
<div class="menu"><ul><li value="1">FIRST</li><li value="2">SECOND</li><li value="3">THIRD</li></ul></div>
<div class="box" id="1"></div>
<div class="box" id="2"></div>
<div class="box" id="3"></div>
<script>
$(".menu li").click(function(){
$(".menu li").removeClass("red");
$(this).addClass("red");
var val="#" + $(this).val();
$("body").animate({scrollTop:$(val).offset().top},300);
});
</script>






работает оно так:

я создал 3 бокса(элемента), дал им идентификаторы(id="1" и т.д.), а также дал значение(value="1" и т.д.) пунктам меню, так если вы хотите чтобы при нажатии на первый пункт меню страница прокручивалась до первого элемента то нужно дать этому элементу id="1", а пункту меню значение value="1"

это не готовое меню, это просто концепт, поэтому переделывайте его под себя
Прикрепления: 3335589.jpg(5Kb) · 0591056.jpg(8Kb)




Моё портфолио
Kosten
Дата: Воскресенье, 05.01.2014, 02:03 | Сообщение # 2
Администраторы
Сообщений:12700
Награды: 39


А что именно можно прокрутить?

Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Меню с прокруткой до объектов (Для сайта ucoz)
Страница 1 из 11
Поиск: