eurocat2k/custom-dropdown.markdown

## custom-dropdown.markdown

      
    Raw
  

              custom-dropdown.markdown
            
          
    Custom Dropdown

A Pen by eurocat2k on CodePen.
License.

  
## index.html
<html lang="en">

  <body>
    <div id='content'></div>
  </body>

</html>

## script.js
const dropdownIcon = () => {
  const dropdown = document.createElement('span');
  dropdown.innerHTML = `<svg width="14px" height="7px" viewBox="0 0 10 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Delivery" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="Transactions-(Landing)" transform="translate(-1360.000000, -29.000000)" fill="#CDCFD3" fill-rule="nonzero">
        <g id="Group-4" transform="translate(1360.000000, 29.000000)">
            <polygon id="Shape" points="0 0 5 5 10 0"></polygon>
        </g>
    </g>
    </g>
</svg>`;
  return dropdown;
}


const users = [{
    id: 1,
    name: 'Michael Scott',
    title: 'Regional Manager'
  },
  {
    id: 2,
    name: 'Dwight Schrute',
    title: 'AARM'
  },
  {
    id: 3,
    name: 'Pam Beesly',
    title: 'Receptionist'
  },
  {
    id: 4,
    name: 'Jim Halpert',
    title: 'Salesman'
  },
  {
    id: 5,
    name: 'Kevin Malone',
    title: 'Accountant'
  },
  {
    id: 6,
    name: 'Toby Flenderson',
    title: 'HR Manager'
  },
  {
    id: 7,
    name: 'Ryan Howard',
    title: 'Temp'
  },
  {
    id: 8,
    name: 'Kelly Kapoor',
    title: 'Customer Service',
  },
  {
    id: 9,
    name: 'Creed Bratton',
    title: 'Unknown'
  }
]

const printArea = document.querySelector("#content");

const dropdown = () => {
  const component = document.createElement("div");

  const input = createInput();
  const dropdown = showDropdown();

  component.appendChild(input);
  component.appendChild(dropdown);
  printArea.appendChild(component);
};

const createInput = () => {
  // Creates the input outline
  const input = document.createElement("div");
  input.classList = "input";
  input.addEventListener("click", toggleDropdown);

  // Creates the input placeholder content
  const inputPlaceholder = document.createElement("div");
  inputPlaceholder.classList = "input__placeholder";

  const placeholder = document.createElement("p");
  placeholder.textContent = "Select user";
  placeholder.classList.add('placeholder')

  // Appends the placeholder and chevron (stored in assets.js)
  inputPlaceholder.appendChild(placeholder);
  inputPlaceholder.appendChild(dropdownIcon());
  input.appendChild(inputPlaceholder);

  return input;
};

const showDropdown = () => {
  const structure = document.createElement("div");
  structure.classList.add("structure", "hide");

  users.forEach(user => {
    const {
      id,
      name,
      title
    } = user;
    const option = document.createElement("div");
    option.addEventListener("click", () => selectOption(name));
    option.setAttribute("id", id);

    const n = document.createElement("h5");
    n.textContent = name;

    const t = document.createElement("p");
    t.textContent = `(${title})`;

    option.appendChild(n);
    option.appendChild(t);
    structure.appendChild(option);
  });
  return structure;
};

const toggleDropdown = () => {
  const dropdown = document.querySelector(".structure");
  dropdown.classList.toggle("hide");

  const input = document.querySelector(".input");
  input.classList.toggle("input__active");
};

const selectOption = (name) => {
  const text = document.querySelector('.placeholder');
  text.textContent = name;
  text.classList.add('input__selected')
  toggleDropdown();
};

dropdown();

## style.css
/* Global styles */

* {
  margin: 0;
  box-sizing: border-box;
}

:root {
  --colorPrimaryDark: #0b132b;
  --colorPrimaryLight: #494f61;
  --colorPlaceholder: #9b9fa8;
  --colorBackground: #eeeff0;
  --colorBorder: #cdcfd3;
  --colorAccent: #003bde;
  --gutter: 0 16px;
  --border: 1.5px solid var(--colorBorder);
  --radius: 3px;
}

h5,
p {
  font-family: "Lato";
  font-size: 14px;
}

#content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100vh;
  width: 100vw;
  background-color: var(--colorBackground);
}

/* Input styling */

.input {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: var(--border);
  border-radius: var(--radius);
  height: 36px;
  width: 280px;
  margin-top: 100px;
  padding: var(--gutter);
  background-color: white;
}

.input__active {
  border-color: var(--colorAccent);
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

.input__placeholder {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.input:hover {
  cursor: pointer;
}

.placeholder {
  color: var(--colorPlaceholder);
}

.input__selected {
  color: var(--colorPrimaryDark);
}

/* Dropdown styling */

.structure {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 200px;
  width: 280px;
  overflow: scroll;
  background-color: white;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
  padding: 10px 0;
}

.structure>div {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 16px;
}

.structure>div:hover {
  background-color: var(--colorAccent);
  color: white;
  cursor: pointer;
}

.structure>div>h5 {
  font-weight: 600;
  margin-right: 4px;
}

.structure>div>p {
  font-weight: 400;
  font-size: 13px;
  color: var(--colorPlaceholder);
}

.hide {
  display: none;
}
	<html lang="en">

	<body>
	<div id='content'></div>
	</body>

	</html>
	const dropdownIcon = () => {
	const dropdown = document.createElement('span');
	dropdown.innerHTML = `<svg width="14px" height="7px" viewBox="0 0 10 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<g id="Delivery" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
	<g id="Transactions-(Landing)" transform="translate(-1360.000000, -29.000000)" fill="#CDCFD3" fill-rule="nonzero">
	<g id="Group-4" transform="translate(1360.000000, 29.000000)">
	<polygon id="Shape" points="0 0 5 5 10 0"></polygon>
	</g>
	</g>
	</g>
	</svg>`;
	return dropdown;
	}


	const users = [{
	id: 1,
	name: 'Michael Scott',
	title: 'Regional Manager'
	},
	{
	id: 2,
	name: 'Dwight Schrute',
	title: 'AARM'
	},
	{
	id: 3,
	name: 'Pam Beesly',
	title: 'Receptionist'
	},
	{
	id: 4,
	name: 'Jim Halpert',
	title: 'Salesman'
	},
	{
	id: 5,
	name: 'Kevin Malone',
	title: 'Accountant'
	},
	{
	id: 6,
	name: 'Toby Flenderson',
	title: 'HR Manager'
	},
	{
	id: 7,
	name: 'Ryan Howard',
	title: 'Temp'
	},
	{
	id: 8,
	name: 'Kelly Kapoor',
	title: 'Customer Service',
	},
	{
	id: 9,
	name: 'Creed Bratton',
	title: 'Unknown'
	}
	]

	const printArea = document.querySelector("#content");

	const dropdown = () => {
	const component = document.createElement("div");

	const input = createInput();
	const dropdown = showDropdown();

	component.appendChild(input);
	component.appendChild(dropdown);
	printArea.appendChild(component);
	};

	const createInput = () => {
	// Creates the input outline
	const input = document.createElement("div");
	input.classList = "input";
	input.addEventListener("click", toggleDropdown);

	// Creates the input placeholder content
	const inputPlaceholder = document.createElement("div");
	inputPlaceholder.classList = "input__placeholder";

	const placeholder = document.createElement("p");
	placeholder.textContent = "Select user";
	placeholder.classList.add('placeholder')

	// Appends the placeholder and chevron (stored in assets.js)
	inputPlaceholder.appendChild(placeholder);
	inputPlaceholder.appendChild(dropdownIcon());
	input.appendChild(inputPlaceholder);

	return input;
	};

	const showDropdown = () => {
	const structure = document.createElement("div");
	structure.classList.add("structure", "hide");

	users.forEach(user => {
	const {
	id,
	name,
	title
	} = user;
	const option = document.createElement("div");
	option.addEventListener("click", () => selectOption(name));
	option.setAttribute("id", id);

	const n = document.createElement("h5");
	n.textContent = name;

	const t = document.createElement("p");
	t.textContent = `(${title})`;

	option.appendChild(n);
	option.appendChild(t);
	structure.appendChild(option);
	});
	return structure;
	};

	const toggleDropdown = () => {
	const dropdown = document.querySelector(".structure");
	dropdown.classList.toggle("hide");

	const input = document.querySelector(".input");
	input.classList.toggle("input__active");
	};

	const selectOption = (name) => {
	const text = document.querySelector('.placeholder');
	text.textContent = name;
	text.classList.add('input__selected')
	toggleDropdown();
	};

	dropdown();
	/* Global styles */

	* {
	margin: 0;
	box-sizing: border-box;
	}

	:root {
	--colorPrimaryDark: #0b132b;
	--colorPrimaryLight: #494f61;
	--colorPlaceholder: #9b9fa8;
	--colorBackground: #eeeff0;
	--colorBorder: #cdcfd3;
	--colorAccent: #003bde;
	--gutter: 0 16px;
	--border: 1.5px solid var(--colorBorder);
	--radius: 3px;
	}

	h5,
	p {
	font-family: "Lato";
	font-size: 14px;
	}

	#content {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	height: 100vh;
	width: 100vw;
	background-color: var(--colorBackground);
	}

	/* Input styling */

	.input {
	display: flex;
	flex-direction: column;
	justify-content: center;
	border: var(--border);
	border-radius: var(--radius);
	height: 36px;
	width: 280px;
	margin-top: 100px;
	padding: var(--gutter);
	background-color: white;
	}

	.input__active {
	border-color: var(--colorAccent);
	border-bottom-left-radius: 0px !important;
	border-bottom-right-radius: 0px !important;
	}

	.input__placeholder {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	}

	.input:hover {
	cursor: pointer;
	}

	.placeholder {
	color: var(--colorPlaceholder);
	}

	.input__selected {
	color: var(--colorPrimaryDark);
	}

	/* Dropdown styling */

	.structure {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	height: 200px;
	width: 280px;
	overflow: scroll;
	background-color: white;
	box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
	padding: 10px 0;
	}

	.structure>div {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 16px;
	}

	.structure>div:hover {
	background-color: var(--colorAccent);
	color: white;
	cursor: pointer;
	}

	.structure>div>h5 {
	font-weight: 600;
	margin-right: 4px;
	}

	.structure>div>p {
	font-weight: 400;
	font-size: 13px;
	color: var(--colorPlaceholder);
	}

	.hide {
	display: none;
	}