Slide content with HTML and CSS

Asked

Viewed 419 times

3

I’d like to make a slide content with HTML and CSS, the slide that I need contains everything below the header. I will explain further...

Normally you use the menu to navigate through the pages, so by clicking this link the current page is redirected to another, but what I want is to have buttons on the main page and by clicking on them instead of redirecting the user to another page, simply scroll the content of the current page and display the content of the other page. In other words it would be like a slide of images, but with all the content of the page except the header.

I got a result similar to what I want using the following code:

.div {
  display: none;
  width: 0%;
  height: 200px;
  background-color: green;
}

.div:target {
  display: block;
  width: 100%;
}
<a href="#conteudo1">Conteúdo 1</a>
<a href="#conteudo2">Conteúdo 2</a>

<div id="conteudo1" class="conteudo">Conteudo da primeira div</div>
<div id="conteudo2" class="conteudo">Conteudo da segunda div</div>

But this way I could not make the transition similar to a slide, "pushing" the current content to the left.

I wonder if I can use this code that way, or have some other better way to do it.

html css

  • What is the function of this class .div? By the way, the question is very vague. Ask the question also the structure of HTML/CSS that you have already assembled.

  • The Divs or Section will store all the content of the page, for example, the div 1 will have all the posts, the div 2 will have the contact form. I haven’t built any html structure yet, I’m still doing the tests to make it work.

1 answer

3


Face this layout is not very complicated, but have to stay tuned in some details.

First, you need to use overflow in some elements and values with VW and VH to occupy the correct width and height on the screens. The scroll-behavior: smooth; Will give the effect of transition when the "anchors" of the link call the content. And the position:fixed lets the Nav in place. As these relative values and flex became all up to well responsive!

inserir a descrição da imagem aqui

The way I built it doesn’t need to change anything in CSS just go by including the Sections and adding the links that will fine fine ;)

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

nav {
  height: 50px;
  line-height: 50px;
  position: fixed;
  top: 0;
  min-width: 100%;
}
main {
  height: 100%;
  display: flex;
  overflow-x: hidden;
  scroll-behavior: smooth;
  box-sizing: border-box;
  padding-top: 50px;
}
section {
  min-width: 100vw;
  height: 100%;
  background-color: rebeccapurple;
  transition: all 1s;
}
section:nth-child(2) {
  background-color: lightsalmon;
}
section:nth-child(3) {
  background-color: lightblue;
}

  
<nav>
    <a href="#conteudo1">Conteúdo 1</a>
    <a href="#conteudo2">Conteúdo 2</a>
    <a href="#conteudo3">Conteúdo 3</a>
</nav>
<main>
  <section id="conteudo1">
    <h1>conteudo 1</h1>
  </section>
  <section id="conteudo2">
    <h1>conteudo 2</h1>
  </section>
  <section id="conteudo3">
    <h1>conteudo 3</h1>
  </section>
</main>

Browser other questions tagged html css

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