[ANSWERED] javascript – Move child element under the parent element by z-index and position

Question 1

There’s a simple way you could do it, but it won’t have the best animation…
Give the nav a z-index, when you click the menu icon set the z-index of the ul to something less than your nav‘s z-index. To make the animation a bit better you could add this CSS to it as well (only after you click the menu icon)

ul {
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.5s, opacity 0.5s;
    /* Other CSS properties */
}

You could use @keyframes to make an animation that will make it go behind the nav. Something like this:

@keyframes {
    0% {
        z-index: 100;
    }
    50% {
        /* Just has to be some number less than nav's z-index */
        z-index: 1;

        /* The 100px is just some amount that will get the ul out
           of the way of the nav */
        transform: translate(0px, 100px) scale(0.9);
    }
    100% {
        transform: translate(0px, 0px) scale(0.9);
        /* I'm not completely sure that this translate will go
           back underneath or if the scale still needs to be
           there... just test somethings out with it to make
           it how you want. */
    }
}

The main thing that you need to do is give your nav a z-index and when you put the ul underneath your nav you need to change your ul‘s z-index to a lesser number than you nav‘s z-index.

Hope this helps!

Question 2

I am not good at CSS. While developing a mobile menu, I stuck in setting the required order of z-index.

HTML CODE

<body>
    <nav>
        <ul></ul>
    </nav>
</body>

Here nav is header and contains, logo, search icon and menu in ul.

CSS code

body {
  position: relative;
  /*other properties*/
}
nav {
  /*css properties*/
}
ul {
  position: fixed;
  z-index: 100;
  /*other properties*/
}

Is it possible to bring ul under nav but above bodyusing z-index and position CSS properties?

I want to use CSS transform and transition properties to bring the slide down and up effect when clicking the menu icon. Since in current code, ul is sliding from top of nav, therefore it looks a bit of odd.

Bollate

[ANSWERED] javascript – Move child element under the parent element by z-index and position

By

Solution 1 :

Problem :

Comments

Comment posted by Tanner Dolby

Comment posted by sanjay ojha

Comment posted by Scott Marcus

Comment posted by G-Cyrillus

By

Related Post

[ANSWERED] html – Child div has an offset border

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] problem in selecting list item in html/css

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate