<!DOCTYPE html>
<html>
	<head>
		<title>Meikan - Home</title>
		<link rel="stylesheet" type="text/css" href="/static/css/base.css">
	</head>
	<body>
		<div class="menu">

			<div class="container">

				<a class="logo" href="/home.html">

					<i class="material-icons">local_library</i><span>Meikan</span>

				</a>

				<a data-group="anime" href="/anime">

					anime

				</a>

				<a data-group="manga" href="/manga">

					manga

				</a>

				<a data-group="vn" href="/vn">

					vn

				</a>

			</div>

		</div>

		<div id="subMenu" class="submenu">

			<div class="container">

				<div data-group="anime" class="group">

					<div class="column">

						<div class="groupTitle">Top Anime</div>

						<ul>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

						</ul>

					</div>

					<div class="column">

						<div class="groupTitle">Top Genre</div>

						<ul>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

						</ul>

					</div>

					<div class="column">

						<div class="groupTitle">Random</div>

						<ul>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

						</ul>

					</div>

				</div>

				<div data-group="manga" class="group">

					<div class="column">

						<div class="groupTitle">Top Manga</div>

						<ul>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

						</ul>

					</div>

					<div class="column">

						<div class="groupTitle">Top Genre</div>

						<ul>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

						</ul>

					</div>

					<div class="column">

						<div class="groupTitle">Random</div>

						<ul>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

						</ul>

					</div>

				</div>

				<div data-group="vn" class="group">

					<div class="column">

						<div class="groupTitle">Top VN</div>

						<ul>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

						</ul>

					</div>

					<div class="column">

						<div class="groupTitle">Top Genre</div>

						<ul>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

						</ul>

					</div>

					<div class="column">

						<div class="groupTitle">Random</div>

						<ul>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

							<li>

								<div class="title">Something</div>

								<div class="info">TV | 10 eps | Finished</div>

							</li>

						</ul>

					</div>

				</div>

			</div>

		</div>

		<script>

			let menus = document.querySelectorAll('a[data-group]'),

				subMenu = document.getElementById("subMenu"),

				activeSubMenuGroup = [

					document.querySelector(`div.group[data-group]`),

					document.querySelector(`a[data-group]`)

				];

				subMenuGroups = [];



			function openMenu(event){

				activeSubMenuGroup[0].classList.remove("open");

				activeSubMenuGroup[1].classList.remove("open");

				activeSubMenuGroup[0] = subMenuGroups[this.dataset.group];

				activeSubMenuGroup[1] = this;



				this.classList.add("open");

				subMenu.classList.add("open");

				activeSubMenuGroup[0].classList.add("open");

			}



			function keepMenuOpen(event){

				subMenu.classList.add("open");

				activeSubMenuGroup[1].classList.add("open")

			}



			function closeMenu(event){

				subMenu.classList.remove("open");

				activeSubMenuGroup[1].classList.remove("open");

			}



			subMenu.addEventListener("mouseenter", keepMenuOpen);

			subMenu.addEventListener("mouseleave", closeMenu);

			for(let m of menus){

				subMenuGroups[m.dataset.group] = document.querySelector(`div.group[data-group="${m.dataset.group}"]`);

				m.addEventListener("mouseenter", openMenu);

				m.addEventListener("mouseleave", closeMenu);

			}

		</script>
	</body>
</html>