i am trying to show a piece of code to from div bottom to middle basically when i click the 3 ellipses button

the code i have this and it is a working code, it shows me a dropdown but for mobile i am trying to show a div show from bottom to middle and have these links inside it instead of showing a dropdown.

<div class= "iView__mobile">
        <svg-icon slot="title" icon="icon-options" width="20px" height="20px"/>
         <el-dropdown trigger="click" @command="single">
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{type: 'excel'}">
                excel
              </el-dropdown-item>
              <el-dropdown-item :command="{type: 'pdf'}">
                pdf
              </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
      </div>

and i am following this tutorial

Animate a div from bottom to top with css

trying to make it work it work like when i click the 3 ellipses the bottom div should pop up and show the links and re clicking on the 3 ellipses will hide it or clicking anywhere will hide it again