586 lines
9.1 KiB
HTML
586 lines
9.1 KiB
HTML
<!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> |