Get an element moving by hovering another element-CodePudding

i'm currently learning dev code and i'm struggling with a thing. I would like to make the nav tag being totally hidden from the user. When the user hovers an icon, the nav tag comes at the top of the screen, as if it was hidden above the screen and "jumps in" when the icon is hovered. I've thought about a countdown of 0.5 second before the animation starts, then 1 second where the nav tag moves from its initial position (above the screen) to its final position (at the top of the page) ; the nav bar stays there until the icon or the nav bar are not hovered anymore.

The problem is that my nav tag appears in its final position when the icon is hovered - it doesnt move as it should do. From the tests i've made so far, it seems that i can't move an element when hovering another, but i hope i'm wrong and it's possible - i've explored an option but it was running the animation in loop, and i couldnt get it working only once, nor moving from a location A to a location B as it was doing A to B to A. I've tried using margins, paddings, changing height, i've browsed many topics from here and other websites, but couldn't find a way, probably because my code is a whole mess. I'm also learning JS so i'm open to all solutions. Here is my code as cleaned as possible, i hope someone will be able to help, thanks :)

    <header>
        <div >
            <img src="img/mainicon.png" >
            <nav>
                <ul>
                    <li><a  href="#">Half-Life</a></li>
                    <li><a  href="#">Half-Life 2</a></li>
                    <li><a  href="#">Half-Life Alyx</a></li>
                </ul>
            </nav>
        </div>
        <div ></div>
    </header>

.mainicon {
    width: 8%;
    margin-left: 2%;
    margin-top: 2%;
    float: left;
}

.mainicon:hover   nav {
    display: flex;
    margin-top: 0px;
}

nav:hover {
    display: flex;
    margin-top: 0px;
}

.clean{
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

nav {
    height: 100px;
    display: none;
    justify-content: center;
    align-items: center;
    border: 4px solid #2CBCD6;
    background-color: grey;
    text-align: center;
}

ul {
  padding: 0;
  width: 100%;
}

li {
  display: inline;
  font-size: 25px;
}

a {
  outline: none;
  text-decoration: none;
  display: inline-block;
  width: 20%;
  margin-right: 0.625%;
  text-align: center;
  line-height: 3;
  color: black;
}

CodePudding user response：

Its simpler than you think. Dont complicated it for yourself.

In short all you need to do is set the margin top to something negative to hide it and then margin top to 0 when hovering over the image or the menue

Below is demonstration of it

body {
  margin: 0;
  background-color: aqua;
}

.thing {
  display: flex;
  align-items: center;
}
.mainicon {
  position: fixed;
  margin-top: 0px;
  top: 10;
  left: 60px;
  height: 40px;
  width: auto;
  object-fit: contain;
  background-color: bisque;
}
.mainicon:hover   nav,
nav:hover {
  margin-top: 0px;
}

nav {
  background-color: grey;
  display: flex;
  height: 60px;
  width: 100%;
  justify-content: center;
  align-items: center;

  margin-top: -60px;
  transition: all 0.3s ease-in-out;
}

ul {
  padding: 0;
  margin: 0;
  display: flex;
}

li {
  list-style-type: none;
  width: 100px;
}

a {
  outline: none;
  text-decoration: none;
}

<header>
  <div >
    <img
      src="https://cdn1.iconfinder.com/data/icons/heroicons-ui/24/menu-512.png"
      
    />
    <nav>
      <ul>
        <li><a  href="#">Half-Life</a></li>
        <li><a  href="#">Half-Life 2</a></li>
        <li><a  href="#">Half-Life Alyx</a></li>
      </ul>
    </nav>
  </div>
</header

CodePudding user response：

you can do it with the hover pseudocode