Navbar inside an image

Asked

Viewed 266 times

1

Hi, I’m doing a navbar and I wanted all the buttons to stay inside an image like this: inserir a descrição da imagem aqui

I went on a lot of website but none specifically talked about this topic, so if anyone can help me I’d appreciate it.

My code: 

@keyframes pular{
    0%, 20%, 60%, 100%{
        -webkit-transfomr: translateY(0);
        transform: translateY(0)
    }
    40%{
        -webkit-transfomr: translateY(-20px);
        transform: translateY(-20px)
    }
    80%{
        -webkit-transfomr: translateY(-10px);
        transform: translateY(-10px)
    }
}

.pulo:hover{
    animation: pular 1s;
}
<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title>Pokemon Generations</title>
        <link rel="icon" href="Logo/Dream_Poké_Ball_Sprite.png">
        <meta charset="utf-8">
        <meta name="viewport" content="width-device-width, initial scale=1.0">
        <meta name="author" content="Daniel Lucas">
        <meta name="description" content="Tela Inicial do site">
        <meta name="keywords" content="pokémon,bingo,história">
        <link rel="stylesheet" href="estilo.css">
        <link rel="stylesheet" href="node_modules/bootstrap/compiler/bootstrap.css">
        <link rel="stylesheet" href="node_modules/bootstrap/compiler/style.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="node_modules/jquery/dist/jquery.js"></script>
        <script src="node_modules/popper.js/dist/umd/popper.js"></script>
        <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>

    <body style="background-image: url(Fundo/fundo_pokemon_branco.jpg)">
        <nav class="navbar sticky-top navbar-expand-lg navbar-dark" style="background-color:#38102b" > 
            <div class="container">
                <a class="navbar-brand h1 mb-0" href="site_inicial.htm"><img src="Logo/shining_legends.png"></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSite">
                    <span class="navbar-toggler-icon"></span> 
                </button>

                <div class="collapse navbar-collapse " id="navbarSite" > 
                    <ul class="navbar-nav">
                        <li class="nav-item"><a class="nav-link" href="#"><button type="button" class="btn btn-outline-warning" class="ml-1"><img src="icone_personagens_gold.png" >Personagens</button></a></li>
                        <li class="nav-item"><a class="nav-link" href="#"><button type="button" class="btn btn-outline-warning" class="ml-1"><img src="icone_comojogar_gold.png" >Como jogar</button></a></li>
                        <li class="nav-item"><a class="nav-link" href="#"><button type="button" class="btn btn-outline-warning" class="ml-1"><img src="icone_jogar_gold1.png" >Jogar</button></a></li>
                        <li class="nav-item"><a class="nav-link" href="#"><button type="button" class="btn btn-outline-warning" class="ml-1"><img src="icone_atualizacoes_gold.png" >Atualizações</button></a></li>
                        <li class="nav-item mr-5"><a class="nav-link" href="#"><button type="button" class="btn btn-outline-warning" class="ml-1"><img src="icone_quemsou_gold.png" >Quem Sou</button></a></li>

                        <li class="nav-item " id="charmander"><a class="navbar-brand h1 mb-0 pulo" target="_blank" href="https://www.youtube.com/channel/UC6VdsMMnL-GdcoKc9qZEtQA?disable_polymer=true"><img src="Icones/icone_charmander.png"></a></li>
                        <li class="nav-item"><a class="navbar-brand h1 mb-0 pulo " target="_blank" href="http://api.whatsapp.com/send?1=pt_BR&phone=5584996011922"><img src="Icones/icone_bulbasaur.png"></a></li>
                        <li class="nav-item"><a class="navbar-brand h1 mb-0 pulo" target="_blank" href="https://twitter.com/LegendsShining"><img src="Icones/icone_squirtle.png"></a></li>
                    </ul>
                </div>
                
            </div>
        </nav>


    </body>
</html>

THE CODE ABOVE IS WITHOUT THE IMAGES The image that will be the navbar: inserir a descrição da imagem aqui

javascript html css twitter-bootstrap

  • Do you want to make this bar by customizing a native Bootstrap Navbar? Or a simple example without using Bootstrap helps you? I’m asking you this because Bootstrap’s Navbar already comes by default with A LOT of original CSS from Bootstrap itself and these CSS will more mess up than helping to make a Nav as customized as what you want... Ideally you make your menu and not use the original Bootstrap Nav...

  • I’m using bootstrap more by resizing than anything else, so I could do this menu with some navbar-expand-lg bootstrap classes?

  • Just designing Navbar isn’t that complicated, but making it responsive would be more boring... You have to think about how you’re going to treat this menu on small screens. But my tip is you make a new bar and do not use the original Bootstrap pq Navbar it already comes with a lot of CSS that Bootstrap puts in it that will more mess than help! If you want an example without using the bootstrap Nav I can give you a help, but to customize and transform the BS Nav in this Nav, I think it’s not worth it...

  • It can be without the bootstrap Nav so then I turn around to do the resizing

1 answer

1


We are here to teach to fish and not to deliver the fish. So I just made the left side of the menu, the right side you do ;)

Notice that it was very flexible, I used flex, and depending on the size of the link text will work well on most screens...

inserir a descrição da imagem aqui

First, obviously I used the form I found most practical, but maybe there are other better ones

For the link on the left I used transform skewX to lean on the sides of the link, and on the second item on the left I use a linear-gradiente in 45deg, so the slope is only on one side and the other is straight. Already for red Navbar on the bottom to make the angle at the corners I used two pseudo-elements, one in each corner, and each of them with a linear-gradiente tb in 45deg with the same background color, white... If you want you can use your image as background-imagem that won’t change much, then just remove the pseudo-elements CSS if you choose to do so.

Your homework is to do the right side now. Note that I did not use any Bootstrap, even so, I left it indexed on the page, so you see that there is no conflict between what I did and the BS classes.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<style>

.menu {
  width: 80%;
  height: 60px;
  margin: auto;
  color: darkred;
  background-color: currentColor;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.menu::after,
.menu::before {
  content: "";
  width: 60px;
  height: 60px;
  position: absolute;
  top: 0;
  z-index: 2;
}
.menu::after {
  left: 0;
  background-image: linear-gradient(45deg, #fff 0%, #fff 50%, transparent 51%);
}
.menu::before {
  background-image: linear-gradient(-45deg, #fff 0%, #fff 50%, transparent 51%);
  right: 0;
}
.item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25%;
  background-color: gold;
  margin: 5px;
  height: 50px;
}
.item:nth-child(1) {
  transform: skewX(45deg) translateX(40px);
  width: calc(25% - 40px);
}
.item:nth-child(1) a{
  transform: skewX(-45deg);
}
.item:nth-child(2) {
  background-color: transparent;
  background-image: linear-gradient(45deg, darkred 0, darkred 45px, gold 41px);
}
.item:nth-child(2) a{
  transform: translateX(calc(45px / 2));
}

</style>
</head>
<body>
  
  <div class="menu">
    <div class="item">
      <a href="#">link</a>
    </div>
    <div class="item">
      <a href="#">link</a>
    </div>
    <div class="item">
      <a href="#">link</a>
    </div>
    <div class="item">
      <a href="#">link</a>
    </div>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>

  • Ahhh, thanks man, saved me

  • @Akali good that helped, there in the example have several applied techniques, so there are things there that can help you in the future in other layouts. Abs

Browser other questions tagged javascript html css twitter-bootstrap

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