Dropdown Menu

dropdown-menu.markdown

Dropdown Menu

A Pen by Mahmud Hasan on CodePen.

License.

index.html

<div class="menu">
	<div class="menu__main">
		<div class="menu__main__item menu__main__item--current menu__main__item--home">
			<a class="menu__main__item__link" href="#">Home</a>
		</div>
		<div class="menu__main__item menu__main__item--motors">
			<a class="menu__main__item__link" href="#">Motors</a>
		</div>
		<div class="menu__main__item menu__main__item--fashion">
			<a class="menu__main__item__link" href="#">Fashion</a>
		</div>
		<div class="menu__main__item menu__main__item--electronics">
			<a class="menu__main__item__link" href="#">Electronics</a>
		</div>
		<div class="menu__main__item menu__main__item--toys">
			<a class="menu__main__item__link" href="#">Toys</a>
		</div>
		<div class="menu__main__item menu__main__item--motors">
			<a class="menu__main__item__link" href="#">Motors</a>
		</div>
		<div class="menu__main__item menu__main__item--fashion">
			<a class="menu__main__item__link" href="#">Fashion</a>
		</div>
		<div class="menu__main__item menu__main__item--electronics">
			<a class="menu__main__item__link" href="#">Electronics</a>
		</div>
	</div>
	<div class="menu__sub">
		<div class="menu__sub__categories">
			<div class="menu__sub__categories__top menu__sub__categories__category">
				<h3 class="menu__sub__categories__header">
					Top Categories
				</h3>
				<ul class="menu__sub__categories__items menu__sub__categories__items--top">
				</ul>
			</div>
			<div class="menu__sub__categories__additional menu__sub__categories__category">
				<h3 class="menu__sub__categories__header">
					Additional Categories
				</h3>
				<ul class="menu__sub__categories__items menu__sub__categories__items--additional">
				</ul>
			</div>
		</div>
		<div class="menu__sub__visual">
			<img class="menu__sub__visual__img" src="https://cdn.stocksnap.io/img-thumbs/960w/dog-pet_4T0BQID9GS.jpg" />
		</div>
	</div>
</div>

script.js

const HOST = "server.com/";

function populateCategories(category) {
	const activeMenuItemName = activeMenuItem.children[0].innerHTML;
	api.get(
		HOST + "categories",
		{ category, menuItem: activeMenuItemName },
		function (categories) {
			let newCategories = "";
			for (const category of categories) {
				const categoryElement = `
        <li class="menu__sub__categories__item">
          <a href="#" class="menu__sub__categories__item__link">${category}</a>
        </li>
      `;
				newCategories += categoryElement;
			}
			const categoriesElement = document.getElementsByClassName(
				`menu__sub__categories__items--${category}`
			)[0];
			categoriesElement.innerHTML = newCategories;
		}
	);
}

function showSubmenu() {
	const submenu = document.getElementsByClassName("menu__sub")[0];
	submenu.style.display = "block";

	populateCategories("top");
	populateCategories("additional");
}

function hideSubmenu() {
	const submenu = document.getElementsByClassName("menu__sub")[0];
	submenu.style.display = "none";
}

let activeMenuItem = null;

function onMenuItemMouseEnter(item) {
	if (activeMenuItem) {
		activeMenuItem.classList.remove("menu__main__item--active");
	}
	activeMenuItem = item;
	item.classList.add("menu__main__item--active");
	showSubmenu();
}

const menuItems = document.getElementsByClassName("menu__main__item");
for (const menuItem of menuItems) {
	menuItem.onmouseenter = () => onMenuItemMouseEnter(menuItem);
}

const menu = document.getElementsByClassName("menu")[0];
menu.onmouseleave = hideSubmenu;

// Server

function getCategories(data) {
	if (data.category == "top") {
		if (data.menuItem == "Motors") {
			return ["Car", "Motorcycle", "Plane", "Trucks", "Wheels"];
		}
		if (data.menuItem == "Fashion") {
			return ["Women's tops", "Men's tops", "Jeans", "Hats"];
		}
		return ["Server apple", "Server banana", "Server pear", "Server orange"];
	}
	if (data.category == "additional") {
		if (data.menuItem == "Motors") {
			return ["Tires", "Windshields", "Ski racks", "Doors", "Windows"];
		}
		if (data.menuItem == "Fashion") {
			return ["On sale", "Red stuff", "Gucci", "New Arrivals"];
		}
		return ["Server square", "Server circle", "Server oval", "Server diamond"];
	}
	return [];
}

const endpoints = {
	"/categories": {
		get: getCategories
	}
};

function getFunction(url, data, callback) {
	const domain = url.substring(0, url.indexOf("/"));
	const endpoint = url.substring(url.indexOf("/"), url.length);

	callback(endpoints[endpoint]["get"](data));
}

const api = {
	get: getFunction
};

function deactivateMenuItem() {
	console.log("Write your code here");
}

const submenu = document.getElementsByClassName("menu__sub")[0];
submenu.onmouseleave = deactivateMenuItem;

style.css

:root {
	--dark-grey: #333333;
	--light-grey: #555;
	--border-grey: #cfcfcf;
}

* {
	font-family: Roboto;
	box-sizing: border-box;
}

body {
	background: blue;
	height: 500px;
}

.menu {
	margin: 0 auto;
	width: 70rem;
	background: #f7f6f5;
	border-top: 1px solid var(--border-grey);
}

.menu__main {
	width: 90%;
	margin: 0 auto;
}

.menu__main__item {
	display: inline-block;
	padding: 0.5rem 2rem;
	border-bottom: 1px solid var(--border-grey);
}

.menu__main__item--active,
.menu__main__item:hover {
	background: white;
	border-bottom: none;
	border-right: 1px solid #cfcfcf;
	border-left: 1px solid #cfcfcf;
	margin: 0 -1px;
}

.menu__main__item--current .menu__main__item__link {
	color: var(--dark-grey);
	border-bottom: 2px solid #333;
	padding-bottom: 0.3rem;
}

.menu__main__item__link {
	text-decoration: none;
	color: var(--light-grey);
	font-family: Roboto;
	font-size: 0.9rem;
	font-weight: 800;
}

.menu__main__item__link:hover {
	text-decoration: underline;
	color: #1c60bb;
}

.menu__sub {
	height: 18rem;
	background: white;
	display: none;
}

.menu__sub__categories {
	vertical-align: top;
	display: inline-block;
	width: calc(40% - 1rem - 2px);
	padding: 0.8rem;
	margin-left: 1rem;
}

.menu__sub__visual {
	display: inline-block;
	width: calc(60% - 2px);
	padding: 0.5rem;
	height: 100%;
}

.menu__sub__visual__img {
	width: 100%;
	height: 100%;
}

.menu__sub__categories__category {
	display: inline-block;
	width: calc(50% - 2px);
	vertical-align: top;
}

.menu__sub__categories__header {
	font-size: 0.9rem;
	border-bottom: 1px solid var(--border-grey);
	margin-right: 1rem;
	padding-bottom: 1rem;
}

.menu__sub__categories__items {
	list-style: none;
	padding: 0;
	line-height: 1.6rem;
	color: var(--light-grey);
}

.menu__sub__categories__item__link {
	text-decoration: none;
	color: var(--light-grey);
	font-size: 0.8rem;
	font-weight: 800;
}

.menu__sub__categories__item__link:hover {
	text-decoration: underline;
}