• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Меню с прокруткой до объектов (Для сайта ucoz)
Меню с прокруткой до объектов
๖ۣۜInspire
Суббота, 04 Января 2014 | Сообщение 1
Оффлайн
Vip
Сообщений:598
Награды: 3
Многие хотели себе меню в котором при нажатии на пункт происходил плавный скроллинг до определённого объекта, например как ЗДЕСЬ

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

Код
<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 (5.3 Kb) · 0591056.jpg (8.3 Kb)




Моё портфолио
Страна: (RU)
Kosten
Воскресенье, 05 Января 2014 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44269
Награды: 70
А что именно можно прокрутить?
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Меню с прокруткой до объектов (Для сайта ucoz)
  • Страница 1 из 1
  • 1
Поиск: