Dropup

CSS dropup menu.

by mkirkland616

HTML

<div class="dropup">
  <button class="dropbtn" ratio="0"><span class="caret"></span></button>
  <div class="dropup-content">
    <a class="maintain" ratio="0">Maintain Aspect Ratio</a>
    <a class="stretch" ratio="1">Stretch</a>
    <a class="actual" ratio="2">Actual Size</a>
  </div>
</div>

CSS

body {
  margin-top: 100px;
}

.maintain {
  background-image: url('https://i.postimg.cc/zDCPBKLC/Image_Size_Normal.png');
  background-repeat: no-repeat;
  background-position-x: 4px;
  background-position-y: 6px;
}
.stretch {
  background-image: url('https://i.postimg.cc/3NFLcQMS/Image_Size_Stretched.png');
  background-repeat: no-repeat;
  background-position-x: 4px;
  background-position-y: 6px;
}
.actual {
  background-image: url('https://i.postimg.cc/sxr6mDLG/Image_Size1x.png');
  background-repeat: no-repeat;
  background-position-x: 4px;
  background-position-y: 6px;
}

.dropbtn {
  background-color: #3498DB;
  color: white;
  width: 200px;
  height: 26px;
  background-color: #252525;
  outline: 0;
  border: none;
}
.dropbtn[ratio="0"] {
  background-image: url('https://i.postimg.cc/zDCPBKLC/Image_Size_Normal.png');
  background-repeat: no-repeat;
  background-position-x: 4px;
  background-position-y: 6px;  
}
.dropbtn[ratio="0"]::before {
  content: 'Maintain Aspect Ratio';
  float: left;
  margin-left: 20px;
}
.dropbtn[ratio="1"] {
  background-image: url('https://i.postimg.cc/3NFLcQMS/Image_Size_Stretched.png');
  background-repeat: no-repeat;
  background-position-x: 4px;
  background-position-y: 6px;  
}
.dropbtn[ratio="1"]::before {
  content: 'Stretch';
  float: left;
  margin-left: 20px;
}
.dropbtn[ratio="2"] {
  background-image: url('https://i.postimg.cc/sxr6mDLG/Image_Size1x.png');
  background-repeat: no-repeat;
  background-position-x: 4px;
  background-position-y: 6px;  
}
.dropbtn[ratio="2"]::before {
  content: 'Actual Size';
  float: left;
  margin-left: 20px;
}

.dropup {
  position: relative;
  display: inline-block;
}

.dropup-content {
  display: none;
  position: absolute;
  background-color: #252525;
  width: 100%;
  bottom: 26px;
  z-index: 1;
}

.dropup-content a {
  color: white;
  cursor: pointer;
  padding: 5px 16px;
  padding-left: 26px;
  text-decoration: none;
  display: block;
}

.dropup-content a:hover {
 ...

JavaScript

let menu = document.getElementsByClassName('dropup')[0];
let btn = document.getElementsByClassName('dropbtn')[0];
let selectedOption = document.getElementsByClassName('dropup-content')[0].children;
let caret = document.getElementsByClassName('caret')[0];

menu.addEventListener('click', function() {
	caret.classList.add('expanded');
	this.addEventListener('mouseleave', function() {
  	this.classList.remove('open');
    caret.classList.remove('expanded');
  }, {once: true});
	this.classList.toggle('open');
});

for(let link of selectedOption) {
  link.addEventListener('click', function() {
    let ratio = this.getAttribute('ratio')
    /* console.log(this.innerText); */
    // Do something here. Set GLOBAL display setting
    btn.setAttribute('ratio', ratio);
  }, {once: true});
}