Scroll Jquery html css

Navigation
0

Galera could help me needed to make a scroll change menu as it descends identically to this link site could help me where can I be finding it? 

<div id="cssmenu" class="menu-agency-main-menu-container"><ul id="menu-agency-main-menu" class="menu nav nav-pills"><li id="menu-item-13123" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home nav-item"><a href="http://localhost/" class="nav-link" style="text-shadow: rgba(255, 255, 255, 0.35) 0px 1px 0px;"><span style="border-color: rgba(255, 255, 255, 0.35);">INÍCIO</span></a></li>
<li id="menu-item-13415" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-ativo a:first has-sub nav-item"><a class="nav-link" style="text-shadow: rgba(255, 255, 255, 0.35) 0px 1px 0px;"><span style="border-color: rgba(255, 255, 255, 0.35);">A EMPRESA</span><span class="holder" style="border-color: rgba(255, 255, 255, 0.35);"></span></a>
<ul class="sub-menu nav nav-pills" style="display: block;">
    <li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-ativo a:first nav-item dropdown"><a href="/a-empresa/#sobre" class="nav-link dropdown-item"><span>Sobre a SHEVAR</span></a></li>
    <li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-ativo a:first nav-item dropdown"><a href="/a-empresa/#organograma" class="nav-link dropdown-item"><span>Organograma</span></a></li>
    <li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-ativo a:first nav-item dropdown"><a href="/a-empresa/#equipe" class="nav-link dropdown-item"><span>A Equipe</span></a></li>
</ul>
</li>
<li id="menu-item-13388" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has-sub nav-item"><a href="http://localhost/produtos-e-servicos/" class="nav-link" style="text-shadow: rgba(255, 255, 255, 0.35) 0px 1px 0px;"><span style="border-color: rgba(255, 255, 255, 0.35);">PRODUTOS E SERVIÇOS</span><span class="holder" style="border-color: rgba(255, 255, 255, 0.35);"></span></a>
<ul class="sub-menu nav nav-pills" style="display: block;">
    <li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has-sub nav-item dropdown"><a class="nav-link dropdown-item"><span>SHEVAR PARTICIPAÇÕES</span></a>
    <ul class="sub-menu nav nav-pills" style="display: block;">
        <li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom nav-item dropdown"><a href="/shevar-participacoes/#produtos-servicos" class="nav-link dropdown-item"><span>Gestão de Ativos Imobiliário</span></a></li>
        <li id="menu-item-10886" class="menu-item menu-item-type-custom menu-item-object-custom nav-item dropdown"><a href="/shevar-participacoes/#investimentos-participacoes" class="nav-link dropdown-item"><span>Investimentos e Particiáções</span></a></li>
        <li id="menu-item-10887" class="menu-item menu-item-type-custom menu-item-object-custom nav-item dropdown"><a href="/shevar-participacoes/#estruturacao-capital" class="nav-link dropdown-item"><span>Estruturação de Capital</span></a></li>
    </ul>
</li>
    <li id="menu-item-10888" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has-sub nav-item dropdown"><a class="nav-link dropdown-item"><span>SHEVAR PARTNERS</span></a>
    <ul class="sub-menu nav nav-pills">
        <li id="menu-item-10889" class="menu-item menu-item-type-custom menu-item-object-custom nav-item dropdown"><a href="/shevar-partners/#credito-imobiliario" class="nav-link dropdown-item"><span>Originação de Crédito Imobiliário</span></a></li>
        <li id="menu-item-10890" class="menu-item menu-item-type-custom menu-item-object-custom nav-item dropdown"><a href="/shevar-partners/#operacao-credito" class="nav-link dropdown-item"><span>Estruturação de Operações de Crédito</span></a></li>
        <li id="menu-item-10891" class="menu-item menu-item-type-custom menu-item-object-custom nav-item dropdown"><a href="/shevar-partners/#cons-empresarial" class="nav-link dropdown-item"><span>Consultoria Empresarial</span></a></li>
        <li id="menu-item-10892" class="menu-item menu-item-type-custom menu-item-object-custom nav-item dropdown"><a href="/shevar-partners/#mercado" class="nav-link dropdown-item"><span>Pesquisa de Mercado</span></a></li>
        <li id="menu-item-10893" class="menu-item menu-item-type-custom menu-item-object-custom nav-item dropdown"><a href="/shevar-partners/#risco-ativos" class="nav-link dropdown-item"><span>Avaliações e Análise de Risco de Ativos</span></a></li>
        <li id="menu-item-10894" class="menu-item menu-item-type-custom menu-item-object-custom nav-item dropdown"><a href="/shevar-partners/#aquisicoes" class="nav-link dropdown-item"><span>Fusões e Aquisições</span></a></li>
    </ul>
</li>
    <li id="menu-item-13124" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has-sub nav-item dropdown"><a class="nav-link dropdown-item"><span>SHEVAR SECURITIZADORA</span></a>
    <ul class="sub-menu nav nav-pills">
        <li id="menu-item-13125" class="menu-item menu-item-type-custom menu-item-object-custom nav-item dropdown"><a href="/shevar-securitizadora/#operacao-credito2" class="nav-link dropdown-item"><span>Estruturações e Operações de Crédito</span></a></li>
        <li id="menu-item-13126" class="menu-item menu-item-type-custom menu-item-object-custom nav-item dropdown"><a href="/shevar-securitizadora/#venda-ativos" class="nav-link dropdown-item"><span>Compra e Venda de Ativos</span></a></li>
    </ul>
</li>
</ul>
</li>
<li id="menu-item-10895" class="menu-item menu-item-type-custom menu-item-object-custom nav-item"><a href="/parceiros" class="nav-link" style="text-shadow: rgba(255, 255, 255, 0.35) 0px 1px 0px;"><span style="border-color: rgba(255, 255, 255, 0.35);">PARCEIROS</span></a></li>
<li id="menu-item-13171" class="menu-item menu-item-type-post_type menu-item-object-page nav-item"><a href="http://localhost/contato/" class="nav-link" style="text-shadow: rgba(255, 255, 255, 0.35) 0px 1px 0px;"><span style="border-color: rgba(255, 255, 255, 0.35);">Contato</span></a></li>
</ul></div>

I want only 1 menu to be active, but all the sub-menus are active and only 1

    
asked by anonymous 23.07.2018 / 23:31

1 answer

0

Here is a very basic example made only with CSS that does not have jQuery, nor JS, nor any framework. Here is just an idea, you can think of how to adapt depending on the content that will be used, including% required%. I tried to do it in the way that was closest to the example you mentioned. Another way would be with anchors so you do not get stuck on every page having to be exactly the height of the screen

The idea here is to use @media which activate buttons of type labels that are hidden, since btn with radio correct is id it "triggers" the CSS rules that make the animation happen

Of a good study in the code that is very easy to understand. As each page has :checked height I use a 100vh , which aligns the page I want on the screen. I tried to make it as clean as possible, but you can go from there to customize everything, etc. 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
nav {
    position: fixed;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;

}
nav label {
    position: relative;
    cursor: pointer;
    width: 16px;
    height: 16px;
    background-color: rgba(0,0,0,0.5);
    border: 1px solid black;
    margin: 8px 16px;
    border-radius: 50%;
    transition: background-color 500ms ease;
}
nav label::after {
    opacity: 0;
    background-color: #fff;
    content: attr(data-name);
    position: absolute;
    top: 0;
    right: 32px;
    white-space: nowrap;
    transition: opacity 500ms ease;
}
nav label:hover::after {
    opacity: 1;
}

.bloco {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 48px;
}
#p1 {
    background-color: #f00;
}
#p2 {
    background-color: #ff0;
}
#p3 {
    background-color: #f0f;
}
#p4 {
    background-color: #0f0;
}
#id1:checked ~ nav > label[for="id1"], 
#id2:checked ~ nav > label[for="id2"],
#id3:checked ~ nav > label[for="id3"],
#id4:checked ~ nav > label[for="id4"] {
    background-color: #fff;
}
#id1:checked ~ nav > label[for="id1"]::after, 
#id2:checked ~ nav > label[for="id2"]::after,
#id3:checked ~ nav > label[for="id3"]::after,
#id4:checked ~ nav > label[for="id4"]::after {
    opacity: 1;
}
.scroll {
    width: 100vw;
    height: 100vh;
    position: fixed;
}
.sec {
    width: 100vw;
    height: 100vh;
    margin-top: 0;
    transition: margin-top 1s ease;
}
#id1:checked ~ .scroll > .sec {
    margin-top: 0vh;
}
#id2:checked ~ .scroll > .sec {
    margin-top: -100vh;
}
#id3:checked ~ .scroll > .sec {
    margin-top: -200vh;
}
#id4:checked ~ .scroll > .sec {
    margin-top: -300vh;
}
[name="radio-grupo"] {
    display: none;
}
<input type="radio" checked name="radio-grupo" id="id1">
<input type="radio" name="radio-grupo" id="id2">
<input type="radio" name="radio-grupo" id="id3">
<input type="radio" name="radio-grupo" id="id4">
<nav>
    <label for="id1" data-name="nome 1"></label>
    <label for="id2" data-name="nome 2"></label>
    <label for="id3" data-name="nome 3"></label>
    <label for="id4" data-name="nome 4"></label>
</nav>
<main class="scroll">
    <section class="sec">
        <article class="bloco" id="p1">página 1</article>
        <article class="bloco" id="p2">página 2</article>
        <article class="bloco" id="p3">página 3</article>
        <article class="bloco" id="p4">página 4</article>
    </section>
</main>
    
24.07.2018 / 00:31
Sum of MySQL column values Return firebase values from a service to angular component 6