HTML Menu | Cor / Bg

[Kijin]

Então eu criei um menu simples o bem padrão lá.. mas gostaria de saber como faço para criar essas especificações mostradas na gif...

Ps: E mais o scroll suave .. 

 

E sobre esse background branco, eu tento por ele porém ele não ocupa toda a tela.. se puderem me ajudar, agradeço de coração.

 

 <ul>
    <il>Início</il>
    <il>itens</il>
    <il>Promoções</il>
    <il>Site</il>
    </ul>

 

 

[DiF]

@Kijin Olá,

Tá faltando coisas ai.   Onde está o CSS?

 

Vamos ver se entendi. Queres adicionar o efeito de hover no texto do menu, uma ação de rolagem suave quando clicar no botão " ir para o site"  e adicionar uma imagem de fundo?

 

Quanto a imagem de fundo, você quer que o menu fique por cima dela com um fundo branco.

 

Veja a estrutura:

<header id="inicio">
      <section>
            <nav>
               <a href="#">Início</a>
                <a href="#">itens</a>
                <a href="#">Promoções</a>
                <a href="#">Site</a>
            </nav>
            
            <a href="#item-content" class="btn">
              <div class="botao">
                 <p>Ir Para o Site</p>
              </div>
            </a>
            
      </section>
      
      <section class="img"></section>
      
</header>
<div id="content">
    <section id="item-content">
        <a href="#">Voltar ao topo do site</a>
    </section>
</div>

 

CSS:

/*Adiciona a rolagem suave*/
html {
  scroll-behavior: smooth;
}

/*Config do <header> */
header{
  width: 100%;
  height: 620px;
  background: url(https://images3.alphacoders.com/837/837671.jpg);
  background-size: cover;
  position: relative;
}

header section{
  position: relative;
  width: 100%;
  height: 40px;
  background: rgba(255,255,255, 0.8);/*coloca a cor de fundo com transparência rgba*/
  z-index: 1;
}

/*Config do menu*/
nav{
   position: absolute;
   display: inline-block;
   left: 8pc;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 16pt;
   line-height: 40px;
   transition: color .25s ease;
}

nav a{
  text-decoration: none;
  color:#113672;
}

nav a:hover{
  color: #125ace;
}

/*Config do botão*/
.btn{
  display: block;
  color:#113672;
}

 div.botao{
  display: inline-block;
  position: absolute;
  top: 3px;
  right: 50px;
  width: 200px;
  height: 30px; 
  transition: all .30s linear; /*Adiciona o efeito de transição*/
  border: 2px solid #113672;
  cursor: pointer;
  line-height: 30px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16pt;
  text-transform: uppercase;
}

div.botao:hover{
  background: #113672;
  color: #fff;
}

/*config da imagem com o nome Game of thrones*/
section.img{
  width: 790px;
  height: 80px;
  background: url(https://i.imgur.com/hcPpeVF.png);
  position: absolute;
  top: 30pc;
  left: 16pc;
}

/*Config do contúdo*/
#content{
  width: 100%;
  height: 620px;
  background: #000;
  position: relative;
}

#content section{
  width: 960px;
  height: 600px;
  background: #fff;
  margin: 0 auto;
  position: relative; 
}

/*config do link do conteúdo*/
#item-content a{
   color:#113672;
   position: relative;
   top: 10pc;
   left: 22pc;
   font-family: Arial, Helvetica, sans-serif;
  font-size: 16pt;
  text-transform: uppercase;
  text-decoration: none;
}


#item-content  a:hover{
  color: #125ace;
}

 

Basicamente temos um header onde nele consta um section. Dentro deste section tem um elemento chamado NAV.
Ele é usado exclusivamente em menus. Eliminando o uso das listas não ordenadas(UL e LI)

Abaixo dele, tem um elemento de hipertexto que dentro dele tem um elemento DIV. É o botão que vai ter o efeito de hover trocando o fundo e a cor do texto.

 

O elemento header é o wrapper, do cabeçalho inteiro. O primeiro section é o wrapper do menu e o botão. É nele que você vai colocar o fundo branco com a largura de 100%.

O segundo section do header é só uma imagem. coloquei ali só para preencher espaço.

 

Abaixo do elemento header, tem um elemento DIV. Este é o wrapper do conteúdo. Dentro dele tem um section que eu adicionei um link para voltar ao topo da página.
Ali você pode colocar o conteúdo.

Dentro deste section, podes colocar um article se quiser, para o conteúdo principal.

Repare no menu. passe o mouse em cima dos itens e em cima do botão.
Clicando no botão você vai ser puxado para baixo com uma rolagem suave. E se clicar no link  de voltar ao topo, será puxado até o topo com a rolagem suave.

Esta rolagem suave, a partir das versões chrome 61.0, Firefox 36.0 e todas do opera, aceitam o atributo CSS: scroll-behavior: smooth;

Porém, esse atributo não funciona no IE e nem no Edge. Então aí vai ser necessário usar o javascript para adaptar. Se quiser saber como fazer isso Veja este link

 

Veja o exemplo acima funcionando.  Clique nos links

https://jsfiddle.net/dife/ytmLp2dv/116/