Scroll Jquery html css

Asked

Viewed 122 times

0

I need to make a scroll change menu as it descends identical to this site http://www.flatslife.com/ could help me where I might be finding?

<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 to be active only 1 menu but all sub-menu is active and only 1

html jquery css wordpress

  • Put what you already have of code becomes easier to give you a right answer

1 answer

0


Here is a very basic example made only with CSS has no jQuery, no JS, no framework. Here is just an idea, you can think how to adapt depending on the content you will use, including the @media necessary. I tried to do the way that was closest to the example you quoted. Another way would be with anchors ai vc does not get stuck on each page having to have exactly the height of the screen

The idea here is to use labels activating buttons of the type radio which remain hidden, when the btn with the id correct is :checked it "shoots" the CSS rules that make the animation happen.

From a good studied code that is quite easy to understand. As each page has 100vh height I use a margin-top, that aligns the page I want on the screen. I tried to make it as clean as possible, however you can 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>

  • I understood more I would have to use scroll to change the menus as I scroll

  • In this model navigation is only allowed with the side menu. As I told you, it’s a simple CSS-only example from where you can go for something more sophisticated using Javascript. I believe that with JS you can detect the mouse turn and change the screen. In addition to changing also which ball is selected. Look for Magic Scroll in jQuery or some plugin of the kind that can help you. I do this model I believe can help in some way, but I believe that no one here will deliver you a code 100% ready, the site here is to ask questions and help, not to do this kind of thing.

  • this is my menu it is active but is active all sub menus and not only what is on the page posted at the beginning

  • @Filipenickelsala if you are using Bootstrap use Scrollspy that solves this problem. If you’re not using Bootstrap look for a jQuery plugin that will do the same. It will help you do that. Or open a new question, put all your CSS, JS and HTML code and explain what you need that sometimes someone can help you. I made this answer based on what I understood from your question.

Browser other questions tagged html jquery css wordpress

You are not signed in. Login or sign up in order to post.