Content Slide with HTML and CSS

Question

Content Slide with HTML and CSS

Navigation

#1 by (3 votes)

3

I'd like to make a slide of content with HTML and CSS , the slide the header. I'll explain better ...

Normally the menu is used to navigate the pages, so when clicking this link the current page is redirected to another, but what I want is to have buttons on the main page and clicking on them instead of redirecting the user to another page , simply scrolls the contents of the current page and displays the contents of the other page. In other words it would be like an image slide, but with all page content 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 was not able to make the slide-like transition, 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 this.

html css

asked by anonymous 08.12.2018 / 21:03

1 answer

Auto Relationship with Entity Framework 2.2 How to redirect a page using .htaccess?

score 3 · Accepted Answer

This layout is not very complicated, but you have to stay tuned for some details.

First you need to use overflow on 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 transition effect when the link calls the content. And position:fixed leaves Nav in place. How did these relative values and flex turn out to be quite responsive!

ThewayImounteddoesnotneedtochangeanythingintheCSSjustgoincludingtheSectionsandaddingthelinksthatwillfitright;)

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>