Меню слайд со ссылкой на раздел страницы плавно

Я пытаюсь, чтобы мое меню div спряталось, когда я нажимаю на метку и в то же время плавно прокручиваю ее до части страницы. Сайт может скользить вниз туда, где я хочу, но я не могу скрыть меню. Я использую CSS3 и JQuery, я все еще очень новичок в JQuery, но возможно я могу сделать это только с JQuery? Если я могу сделать это, используя только ссылку или что-то другое, кроме ярлыка, это не проблема. Я открыт для предложений. Спасибо за помощь.Меню слайд со ссылкой на раздел страницы плавно

CSS:

<style> 
*{ 
    box-sizing:border-box; 
} 
body{ 
    padding: 0; 
    margin: 0; 
} 
#container{ 
    width: 80%; 
    height: 3000px; 
    background-color: #A77676; 
    margin: 0 auto; 
    position: relative; 
} 
.menu-cont{ 
    width: 100%; 
    height: 500px; 
    background-color: #7B87FF; 
} 
.menu{ 
    width: 200px; 
    height:400px; 
    background-color: #C6C6C6; 
    overflow: hidden; 
    position: relative; 
    top: 0; 
    left: 0px; 
    z-index: 10; 

} 
.menu-slide{ 
    width: 200px; 
    height: 200px; 
    background-color: #8BE2FF; 
    position: absolute; 
    top: 200px; 
    right: 0; 
    z-index: 11; 
} 
.jqueryscrollto{ 
    width: 100%; 
    height: 200px; 
    background-color: #00FF00; 
    position: relative; 
    margin-top: 1500px; 
} 

/************************************/ 
label.button{ 
    width: 25px; 
    height: 25px; 
    font-weight: bold; 
    color: #FF0000; 
    /*background-color: #1800FF;*/ 
    display: inline-block; 
} 
label.linkbutton{ 
    width: 25px; 
    height: 25px; 
    background-color: #36FF00; 
    display: inline-block; 
} 
/********slide starter****/ 
input.toggle ~ .menu-slide{ 
    overflow: hidden; 
    transition: .5s ease-in-out; 
    transform: translateX(0px); 
} 
input.toggle:checked ~ .menu-slide{ 
    transform: translateX(-200px); 
} 
input.toggle{ 
    display: none; 
} 
/*****************************/ 
input.togglelink ~ .menu-slide{ 
    overflow: hidden; 
    transition: .5s ease-in-out; 
    transform: translateX(0px); 
} 
input.togglelink:checked ~ .menu-slide{ 
    transform: translateX(-200px); 
} 
input.togglelink{ 
    display: none; 
} 
</style>

HTML:

<body> 
<div id="container"> 
    <div class="menu-cont"> 

    <div class="menu"> 
     <input type="checkbox" class="toggle" id="iconbtn"> 
     <label class="button" for="iconbtn">ICON BUTTON</label> 
     <input type="checkbox" class="togglelink" id="linkbtn" data-href="#SCROLL"> 
     <div class="menu-slide"> 
     <div class="menu-content"> 
      <h2>SLIDER</h2> 
      <label class="linkbutton" for="linkbtn">ABOUT US-LINKBTN</label> 
     </div> 
     </div><!--menu slide --> 
    </div><!-- menu --> 

    </div><!-- menu-cont --> 
    <div class="jqueryscrollto">I WANT TO SCROLL HERE</div><label id="SCROLL"></label> 

</div><!-- #container --> 
</body>

Jquery:

<head> 
<script src="https://code.jquery.com/jquery-1.6.4.js"></script> 
</head> 

<body> 
<script> 
try {$('input').click(function(){ 
href=$(this).data('href'); 
$('html, body').animate({ 
scrollTop: $(href).offset().top 
}, 500); 
return false; 
}); 
} catch (error) { throw error; } 
</script> 
</body

Я поставил JQuery в нижней части тела HTML.

источник

2016-02-25 Guillaume Palm

Я понял это. Просто застрял в книгах и изучил основы :)

$(function() { 
$(document.onload) 

    var left = true; 
    $(".button, .icon").click(function() { 
    $(".slide-container").animate({ 
     left: left ? "0px" : "-200px" 
    }, 1000); 

    left = !left; 

    }); 

    $('.button').on('click', function(){ 

    href=$(this).data('href'); 

    $('html, body').animate({ 
    scrollTop: $(href).offset().top 
    }, 1000); 

    }); 

});

источник

2016-02-28 14:44:09

Вот способ скрыть HTML элемент, используя Js

$("button").click(function(){ 
     $("p").hide(1000); 
    });

источник

2016-02-25 11:15:11

Как вы думаете, лучше ли вообще забыть CSS3 и пойти только с JQuery? Спасибо за быстрый ответ. –

Ну, мне кажется, что метод JQuery безопаснее, поскольку разные браузеры визуализируют css немного по-другому. –

правый .. делает состояние. Единственная проблема заключается в том, что я все еще очень новичок в jquery. Но я постараюсь сделать все, что вы предлагаете. Я дам вам знать, как оно идет. –

Меню слайд со ссылкой на раздел страницы плавно

ответ

Смежные вопросы