<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset.css">
<title>Sub menu</title>
<style>
#header > h1 {
font-size: 3em;
font-weight: bolder;
line-height: 2em;
text-indent: 1em;
text-shadow: 4px 4px 4px darkgray;
}
#nav {
display: flex;
justify-content: space-between;
background-color: darkgray;
box-shadow: 0 4px 4px darkgray;
}
#nav > ul { display: flex; }
#nav > ul > li > a {
display: block;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
color: white;
text-decoration: none;
}
#nav > ul > li > a:hover { background-color: gray; }
#nav > ul:first-child > li { position: relative; }
#nav > ul:first-child > li > ul {
display: none;
position: absolute;
top: 55px;
border-radius: 5px;
background-color: darkgray;
}
#nav > ul:first-child > li > ul > li > a {
display: block;
padding: 20px 30px;
color: white;
text-decoration: none;
}
#nav > ul > li > ul > li > a:hover { background-color: gray; }
#container { display: flex; }
#sidebar { width: 200px; }
#sidebar > ul > li > a {
display: block;
padding: 25px 20px;
color: black;
text-decoration: none;
}
#sidebar > ul > li > a:hover {
color: white;
background-color: darkgray;
}
#main {
width: calc(100% - 200px);
padding: 25px;
border-left: 2px solid darkgray;
}
#main > h2 {
margin-bottom: 25px;
font-size: 2em;
font-weight: bolder;
line-height: 2em;
}
#main > p {
margin-bottom: 25px;
line-height: 1.5em;
}
#footer {
padding: 40px;
background-color: darkgray;
color: white;
text-align: right;
}
</style>
<script>
window.addEventListener('load', function () {
const menu = document.querySelectorAll('#nav > ul > li > a');
const subMenu = document.querySelectorAll('#nav > ul > li > ul');
for (let i = 0; i < menu.length; i++) {
menu[i].addEventListener('click', function (event) {
const next = this.nextElementSibling;
event.preventDefault();
if (next.style.display === 'block') {
next.removeAttribute('style');
}
else {
for(let i = 0; i < subMenu.length; i++){
subMenu[i].removeAttribute('style');
}
next.style.display = 'block';
}
});
}
});
</script>
</head>
<body>
<header id="header">
<h1>Fluid Layout</h1>
</header>
<nav id="nav">
<ul>
<li>
<a href="#home">Home</a>
<ul>
<li><a href="#home_tutorial">Tutorial</a></li>
<li><a href="#home_reference">Reference</a></li>
<li><a href="#home_example">Example</a></li>
<li><a href="#home_faq">FAQ</a></li>
</ul>
</li>
<li>
<a href="#html">HTML</a>
<ul>
<li><a href="#html_tutorial">Tutorial</a></li>
<li><a href="#html_reference">Reference</a></li>
<li><a href="#html_example">Example</a></li>
<li><a href="#html_faq">FAQ</a></li>
</ul>
</li>
<li>
<a href="#css">CSS</a>
<ul>
<li><a href="#css_tutorial">Tutorial</a></li>
<li><a href="#css_reference">Reference</a></li>
<li><a href="#css_example">Example</a></li>
<li><a href="#css_faq">FAQ</a></li>
</ul>
</li>
<li>
<a href="#javascript">JavaScript</a>
<ul>
<li><a href="#javascript_tutorial">Tutorial</a></li>
<li><a href="#javascript_reference">Reference</a></li>
<li><a href="#javascript_example">Example</a></li>
<li><a href="#javascript_faq">FAQ</a></li>
</ul>
</li>
<li>
<a href="#jqeury">jQuery</a>
<ul>
<li><a href="#jqeury_tutorial">Tutorial</a></li>
<li><a href="#jqeury_reference">Reference</a></li>
<li><a href="#jqeury_example">Example</a></li>
<li><a href="#jqeury_faq">FAQ</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#login">Log in</a></li>
<li><a href="#signUp">Sign up</a></li>
</ul>
</nav>
<div id="container">
<aside id="sidebar">
<ul>
<li><a href="#sideHome">Home</a></li>
<li><a href="#sideHtml">HTML</a></li>
<li><a href="#sideCss">CSS</a></li>
<li><a href="#sideJavascript">JavaScript</a></li>
<li><a href="#sideJquery">jQeury</a></li>
</ul>
</aside>
<main id="main">
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis ornare neque vitae pharetra.
Proin luctus leo a ipsum mollis, lobortis tempor ante semper.
Cras vitae lectus in nunc malesuada blandit ac ac dolor. Sed cursus molestie ipsum et commodo.
Maecenas consectetur nibh in purus vulputate hendrerit. Aenean sit amet feugiat lorem, eu ultricies turpis.
Fusce augue diam, condimentum id dignissim nec, volutpat at est.
Pellentesque luctus porta leo, a imperdiet lorem hendrerit et.
</p>
<p>
Nulla congue pretium ullamcorper. In vehicula mauris et diam tempor, non mattis leo sagittis.
Curabitur at nisi leo. Morbi mollis molestie euismod. Phasellus sit amet felis laoreet, rutrum est non, tempus nisl.
Nulla convallis tortor at tellus efficitur, sed aliquam ante aliquet. Quisque id arcu nulla.
Duis dictum nibh vel mattis tempus. Vestibulum luctus metus imperdiet est tempus, nec molestie dui blandit.
</p>
<p>
In lacinia arcu quis nisi feugiat vulputate.
Aliquam varius, lacus id molestie luctus, massa massa semper quam, vehicula volutpat nisi libero non est.
Phasellus lectus nulla, vulputate in mollis a, tincidunt sed risus.
Maecenas augue risus, rhoncus nec nibh a, auctor semper diam. Etiam blandit bibendum urna, vitae ultrices elit commodo ac.
Phasellus mauris ipsum, finibus quis nisi eu, dignissim condimentum lectus.
Aenean fermentum, velit non tempor auctor, metus nisl tincidunt nulla, sed maximus nisl mauris vitae metus.
Nam mauris metus, pellentesque nec leo in, sagittis mollis felis. Nullam sagittis venenatis tortor, nec mattis dui gravida non.
Aliquam tincidunt sem lorem. Vivamus sit amet accumsan risus.
Sed egestas, risus ac interdum sagittis, felis urna rhoncus tortor, nec ornare felis elit ut nisl.
Morbi hendrerit ac dui a ultricies. Morbi efficitur lobortis libero, sit amet tempus purus commodo eget.
Suspendisse volutpat lobortis nisi quis aliquam. Mauris fringilla nisi sit amet risus vehicula aliquet.
</p>
<p>
Praesent auctor sapien quam, sed dapibus odio ornare a. Nam ipsum tellus, viverra a urna at, auctor rhoncus quam.
In vel dignissim ligula, facilisis pellentesque justo. Pellentesque in ligula lobortis, bibendum orci sed, semper diam.
Mauris ultricies lobortis tellus vel accumsan.
Mauris iaculis, odio sed pretium tristique, justo nisi dignissim sapien, in tempus libero mauris vestibulum neque.
Vivamus accumsan bibendum velit, eget posuere dolor egestas ac. Curabitur ac justo eu risus rutrum rhoncus.
Pellentesque malesuada massa nec metus porttitor, in porttitor nisi porttitor.
Vestibulum lectus odio, blandit sed fermentum maximus, luctus at nisl. Pellentesque consectetur eget mauris ut pretium.
Sed in arcu magna. Vestibulum feugiat fringilla sapien a molestie. Aliquam id turpis vitae diam tristique aliquam.
nterdum et malesuada fames ac ante ipsum primis in faucibus. Praesent pretium metus eget tortor aliquet, nec suscipit quam vehicula.
</p>
<p>
Sed efficitur lectus tortor, tempus hendrerit est accumsan non. Donec rhoncus ipsum sit amet nibh vulputate dictum.
Nulla rutrum hendrerit erat nec ornare. Cras lobortis eros elit, non consectetur leo dapibus eget.
Integer varius sapien massa, eu efficitur metus varius nec. Nullam feugiat et felis a maximus. Cras mollis sagittis elit ac lacinia.
Vestibulum maximus neque ac ipsum fringilla semper. Nunc egestas ac quam in bibendum.
</p>
</main>
</div>
<footer id="footer">
© 2016-2024 SBS Academy Gwangju.
</footer>
</body>
</html>
