Create Animated Menu

[arshivbastian]

we wanna create this menu :

piece of cake ? maybe ...

first of all I have created this 3 icons :
| |

now we need to add them instead of our router texts : ( I have created 3 routs Allies/Castel/War before for learning how check here )

html

<div id="nav">
      <div id="menu" :style="{'margin-bottom': state}">
        <sui-divider horizontal inverted id="menudivider" @click="menutoggle">Menu</sui-divider>
         <router-link to="/allies"> <img src="./assets/allies.png" /> </router-link> 
        <router-link to="/castel"> <img src="./assets/castel.png" /> </router-link>
        <router-link to="/war"> <img src="./assets/war.png" /> </router-link>
      </div>
    </div>

lets check this up :

• :style="{'margin-bottom': state}" we create a function to control states of menu ( up/down ) for learning it click here
• we have a devider that has a text "manu" in middle of it you can find it in "semantic ui vue"
• routers are linked to their own pages but they have button instead of text

• divider is calling the function menutoggle by clicking

  CSS

  #nav {
  width: 100% ;
  text-align: center !important;
  position: fixed ;
  bottom: 0 ;
  z-index: 1000 ;
  }
  #menudivider {
  margin-bottom: 20px !important ;
  cursor: ns-resize;
  }
  #menu {
  width: 460px;
  margin:0 auto;
  padding : 15px ;
  background-color: rgba(88, 115, 135, 0.9) ;
  border-radius: 5px 5px 0px 0px ;
  transition-duration: 2s;
  }
  #menu img {
  margin-left: 30px;
  }

  the most important thing in this code is transition-duration: 2s; that causes smooth animation for menu

script

<script>
export default {
  data () {
    return {
      state: '-145px'
    }
  },
  methods: {
    menutoggle () {
      if (this.state == '-145px') {
        this.state = '0px'
      }
      else if (this.state == '0px') {
        this.state = '-145px'
      }
    },
  }
}
</script>

this is most important part lets divide it :

data () {
    return {
      state: '-145px'
    }
  },

in this part we define state that is sat on menu-->style-->margin-bottom , so in first load 'margin-bottomof menu is -145 ( beneath body ) , after this we need to toggle menu'smargin-bottom` with 0 and -145 by clicking on menu divider

methods: {
    menutoggle () {
      if (this.state == '-145px') {
        this.state = '0px'
      }
      else if (this.state == '0px') {
        this.state = '-145px'
      }
    },
  }

the menutoggle function is calling by menu divider and each time check and change the state that is margin-bottom of the menu by that transition-duration: 2s; in CSS part menu toggle smoothly between margin-bottom = 0px and margin-bottom = -145px

piece of cake , wasn't it ?