Translatex() needs to be activated in a <li> and move a <Nav>

Asked

Viewed 157 times

1

The problem I’m having is that I’m making a burger menu, this burger menu, once opened, has a specific field that when passing the mouse would have to open a sub menu, my idea is that this submenu is a second one that is hidden with a negative left and that, when I’m mouse on top of li with id sub10 it do through the Hover this appear. The problem is, as far as I know, if I do #sub10:Hover{ Transform: translateX(value); , in fact I will modify the li itself that has this id and not the second . It is possible to do what I intend?

If you need, I’ll put in the HTML and CSS code I’ve made so far.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Edgar Müeller</title>
<link href="estilo/estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Inicio do menu !-->
<script>
function myFunction(x) {
  x.classList.toggle("change");
}
</script>
    <input type="checkbox" id="chec">
    <label for="chec">
    <div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
    </div>
    </label>
      <div class="bg"></div>
    <nav id="principal">
        <ul>
            <li><a href="#">Home</a></li>
            <li id="sub10"><a href="#">Obras <span>+</span></a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Sobre</a></li>
            <li><a href="#">Contato</a></li>
            <li><a href="#">Estilo das obras</a></li>
        </ul>
    </nav>
  <nav id="obras">
    <ul>
      <li id="sub10"><a href="#">3D Pavement Art</a></li>
      <li id="sub10"><a href="#">Evolution</a></li>
      <li id="sub10"><a href="#">The Caves</a></li>
      <li id="sub10"><a href="#">Unconditional Love</a></li>
      <li id="sub10"><a href="#">The Ark</a></li>
    </ul>
  </nav>
<!-- Fim do menu !-->
</body>
</html>

CSS:

@charset "utf-8";
/* Formatação padrão */
    * {
    margin:0;
    padding:0;
    }

    a{
        text-decoration: none;
        color: black;   
    }

    body{
        font-family: "Agency FB", Arial, SansSerif;
        font-size: 1.4em; 
        background-color: #F1F1F1;
    }

    ul {
        list-style: none;   
    }
/* Inicio do css icone do menu hamburguer */
.container {
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}
/* Fim do css do icone do menu hamburguer */

/* Inicio Menu hamburguer */

#chec
    {
    display: none;  /* esconde o checkbox */
    }

#chec:checked ~ #principal{
    transform: translateX(100%); /* Faz o menu aparecer e reaparecer */
}
#chec:checked ~ .bg{
    display:block;
}
#sub10:hover{
    transform: translateX(300%);
}

#principal{
        background-color: rgba(110, 110, 110, 0.5); /* cor do fundo do menu */
        width: 22%;
        height:100vh; /* unidade base do viewport, pega 100% da pagina */
        left: -22%;
        position: absolute; 
        transition: all .4s; /* Faz a transição/animação do menu */
    }
#obras{
        background-color: rgba(110, 110, 110, 0.5); /* cor do fundo do sub-menu */
        width: 14%;
        height:100vh; /* unidade base do viewport, pega 100% da pagina */
        left: -14%;
        position: absolute; 
        transition: all .4s; /* Faz a transição/animação do menu */
    }

    a{
        display: block;
        padding: 20px 5px;
        color: white;
    }
    a:hover{ /* hover do menu */
        background-color: rgb(176,224,230); 
        color: black;
    }
    label{
        padding: 5px;
        margin: 10px;
        position: absolute;
        z-index: 1;
    }
    ul{
        top:70px;
        position: absolute;
        width: 100%
    }
    ul li span{
        float: right;
    }

    .bg{
        width: 100%;
        height: 100vh;
        left: 0;
        top: 0;
        position: fixed;
        background-color: rgba(0,0,0,.4);
        display: none;
    }

/* Fim Menu hamburguer */
css html5 css3 css-hover submenu

1 answer

0


I don’t know if I understood it correctly but from the comments I had in your code I think that’s what you wanted. The detail is that you were using the transition in the "father item" when in fact you have to use the transition in the child sub-menu...

I needed to make some changes to position, and add a Nav properties in the sub-menu, the things I edited I left last in the CSS code to make it easy for you to see. Something else don’t use width in % in this side menu. it will make it difficult for you to treat responsiveness and it makes no sense to occupy 22% of the width. Imagine on a screen ultra-wide over 4000px wide, your menu will be over 800px wide!! Something that doesn’t make any sense.

inserir a descrição da imagem aqui

Follow the image code above.

@charset "utf-8";

/* Formatação padrão */
* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: black;
}

body {
    font-family: "Agency FB", Arial, SansSerif;
    font-size: 1.4em;
    background-color: #F1F1F1;
}

ul {
    list-style: none;
}

/* Inicio do css icone do menu hamburguer */
.container {
    display: inline-block;
    cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}

/* Fim do css do icone do menu hamburguer */

/* Inicio Menu hamburguer */

#chec {
    display: none;
    /* esconde o checkbox */
}

#chec:checked ~ #principal {
    transform: translateX(100%);
    /* Faz o menu aparecer e reaparecer */
}

#chec:checked ~ .bg {
    display: block;
}

#sub10:hover {
    /* transform: translateX(300%); */
}

#principal {
    background-color: rgba(110, 110, 110, 0.5);
    /* cor do fundo do menu */
    width: 200px;
    height: 100vh;
    /* unidade base do viewport, pega 100% da pagina */
    left: -200px;
    position: absolute;
    transition: all .4s;
    /* Faz a transição/animação do menu */
}

#obras {
    background-color: rgba(110, 110, 110, 0.5);
    /* cor do fundo do sub-menu */
    /* width: 14%; */
    height: 100vh;
    /* unidade base do viewport, pega 100% da pagina */
    left: -100%;
    transition: all .4s;
    position: relative;
    /* Faz a transição/animação do menu */
}

a {
    display: block;
    padding: 20px 5px;
    color: white;
}

a:hover {
    /* hover do menu */
    background-color: rgb(176, 224, 230);
    color: black;
}

label {
    padding: 5px;
    margin: 10px;
    position: absolute;
    z-index: 1;
}

ul {
    top: 70px;
    position: absolute;
    width: 100%
}

ul li span {
    float: right;
}

.bg {
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    position: fixed;
    background-color: rgba(0, 0, 0, .4);
    display: none;
}

/* Fim Menu hamburguer */

#sub10 #obras {
    top: -70px;
    position: absolute;
    width: 170px;
    pointer-events: none;
}

#sub10:hover #obras {
    left: 100%;
    pointer-events: initial
}

#sub10 {
    overflow: hidden;
    height: 66px;
}
<!-- Inicio do menu !-->
<script>
    function myFunction(x) {
        x.classList.toggle("change");
    }
</script>

<input type="checkbox" id="chec">
<label for="chec">
    <div class="container" onclick="myFunction(this)">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
    </div>
</label>
<div class="bg"></div>
<nav id="principal">
    <ul>
        <li><a href="#">Home</a></li>
        <li id="sub10">
            <a href="#">Obras <span>+</span></a>
            <nav id="obras">
                <ul>
                    <li id="sub10"><a href="#">3D Pavement Art</a></li>
                    <li id="sub10"><a href="#">Evolution</a></li>
                    <li id="sub10"><a href="#">The Caves</a></li>
                    <li id="sub10"><a href="#">Unconditional Love</a></li>
                    <li id="sub10"><a href="#">The Ark</a></li>
                </ul>
            </nav>
        </li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">Sobre</a></li>
        <li><a href="#">Contato</a></li>
        <li><a href="#">Estilo das obras</a></li>
    </ul>
</nav>

  • That’s what I wanted to know! When at width you commented not to use in %, I wanted to know if you have a problem with height, because the idea is to take 100% of the page, only the % was not going and had chosen to use vh, think I will have some problem with it?

  • @Viniciusverissimobazan normally face 100vh not of the problem except in some mobile devices where the bar of the browser is part of the 100vh understands. If you think the answer answered your question consider marking it as accepted in this icon below the arrows next to the answer ;)

Browser other questions tagged css html5 css3 css-hover submenu

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