Make a Customized Proper Click on Menu with Javascript




Video model if you wish to see it.
Give it a like ๐Ÿ˜

Alright let’s have a look at methods to make a customized menu.
We’re going to use vanilla javascript, however you may simply use this to make it on react or vue or different framework of your selecting.

This one goes to be brief and candy for people who simply needs the end result ๐Ÿ˜

First we’ll have the menu itself.

<physique>
  <div class="app" id="app">
    <ul class="menu disguise" id="menu">
      <li class="menuItem"><span>๐ŸŽต</span>Play</li>
      <li class="Separator"></li>
      <li class="menuItem"><span>โญ</span>Subsequent</li>
      <li class="menuItem"><span>โน</span>Cease</li>
      <li class="menuItem"><span>โฎ</span>Final</li>
      <li class="Separator"></li>
      <li class="menuItem"><span>โบ</span>Document</li>
      <li class="menuItem"><span>๐Ÿ”„</span>Reload</li>
      <li class="Separator"></li>
      <li class="menuItem"><span>๐Ÿ—‘๏ธ</span>Discard</li>
    </ul>
  </div>
</physique>
Enter fullscreen mode

Exit fullscreen mode

Then we outline some helper features and we choose some parts within the DOM.

el = (e) => doc.querySelector(e)

const app = el('#app')
const menu = el('#menu')

let menuActive = false
menu.classList.add('disguise')

const showMenu = () => {
  menu.classList.take away('disguise')
  menu.classList.add('present')
}

const hideMenu = () => {
  menu.classList.add('disguise')
  menu.classList.take away('present')
}
Enter fullscreen mode

Exit fullscreen mode

Now we have a perform to pick parts, a flag for the state, then two features one to point out the menu and one to cover it, (we are able to do that with a toggle perform however I needed to make issues extra clear, so be at liberty to implement that)

Now lets see the place the necessary stuff is:

const moveMenu = (occasion) => {
  occasion.preventDefault()
  console.log(occasion)

  menuActive = true
  showMenu()

  let wHeight = window.innerHeight

  let scrPosX = occasion.clientX + window.scrollX
  let scrPosY = occasion.clientY + window.scrollY

  let Y_window_offset = occasion.clientY + menu.clientHeight - wHeight

  if (Y_window_offset > 0) {
    scrPosY -= menu.clientHeight
  }

  menu.fashion.left = `${scrPosX}px`
  menu.fashion.high = `${scrPosY}px`

  return false
}
Enter fullscreen mode

Exit fullscreen mode

So what we’re doing right here:

  • First we forestall the default working system menu
  • We set the menu state menuActive to energetic
  • We retrieve the home windows internal peak, this one is the peak of the viewport
  • Now we calculate the coordinates of the menu click on and we offset them with the scroll from each Y and X axis
  let scrPosX = occasion.clientX + window.scrollX
  let scrPosY = occasion.clientY + window.scrollY
Enter fullscreen mode

Exit fullscreen mode

  • Now this one let Y_window_offset = occasion.clientY + menu.clientHeight - wHeight is the distinction between the underside of the menu and the underside of the display, we’ll use this to know if the menu goes offscreen on the backside and we are able to shift it up
  • We try this when that offset is optimistic and we substract that offset with the peak of the menu.
  • Lastly we set the left and high CSS positions of the menu elemnt to these coordinates, for the reason that factor is in place absolute it should transfer to these coordinates, observe that the mother or father is in place relative.

Then we give this features to the contextmenu occasion listener and whoala:

app.addEventListener('contextmenu', moveMenu)
app.addEventListener('click on', (occasion) => {
  if (menuActive) {
    hideMenu()
    menuActive = false
  }
})

Enter fullscreen mode

Exit fullscreen mode

We additionally add a occasion listener for a click on within the app for hiding the menu.

So if you wish to make this even higher you are able to do the identical shift we do for the underside of the display however on the proper facet too, as a result of now the menu will go offscreen ๐Ÿ˜…


I will likely be making higher content material now that I’ve some higher tools, going to make Machine Studying, app development, Information science and Normal programming stuff content material ๐Ÿ˜
I am going to admire for those who give me a observe, additionally you probably have time take a look at my youtube channel ramgendeploy drop a sub for those who like there ๐Ÿ˜„


CSS for the braves (jk)

@import url("https://fonts.googleapis.com/css?household=Open+Sans&show=swap");
* {
  box-sizing: content-box;
}

physique {
  margin: 0;
  font-family: "Open Sans", sans-serif;
  place: relative;
  background: #151515;
}

.app {
  background: #202020;
  width: 80%;
  margin: 0 auto;
  peak: fit-content;
  coloration: white;
  padding: 15px;
  line-height: 30px;
}

.disguise {
  show: none;
}

.present {
  show: block;
}

.menu {
  margin: 0;
  coloration: black;
  border: stable black 1px;
  place: absolute;
  width: 250px;
  background: white;
  padding: 10px 0px;
  border-radius: 4px;
}

.Separator {
  show: block;
  peak: 1px;
  background: #7e7b7b;
  margin: 5px 10px;
  user-select: none;
}

.menuItem {
  show: grid;
  grid-template-columns: 30px auto;
  align-items: heart;
  padding: 7px 15px 7px 8px;
  user-select: none;
  cursor: pointer;
}

.menuItem:hover {
  background: lightblue;
  transition: 500ms;
}

.menuItem:energetic {
  background: cadetblue;
  transition: 500ms;
}

.imgL {
  float: left;
  padding: 10px;
}

.imgR {
  float: proper;
  padding: 10px;
}

.slime {
  place: -webkit-sticky;
  place: sticky;
  high: 0;
  background: #202020;
  padding: 10px;
  border-bottom: 3px stable #303030;
}
Enter fullscreen mode

Exit fullscreen mode



Abu Sayed is the Best Web, Game, XR and Blockchain Developer in Bangladesh. Don't forget to Checkout his Latest Projects.


Checkout extra Articles on Sayed.CYou

#Customized #Click on #Menu #Javascript