I have a secondary navigation bar for my portfolio, but now I need a way to make it so the unselected items are hidden while using the sidebar!
I don’t want to make multiple HTML and CSS codes just for this, and just have everything on one page. Is there a way to have the unselected items hidden, and then show them when the sidebar is clicked?
-HTML Code-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="port.css">
<link rel="icon" type="image/png" href="FAVICON.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<h1>Clouded Manticore</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a id="active" href="port.html">Portfolio</a></li>
<li><a href="https://cloudsmanticore.carrd.co/">Contact</a></li>
</ul>
</nav>
</header>
<main>
<div class="double-column">
<div id="Side-bar" class="column">
<ul>
<li><a href="#Introduction" class="active">Introduction</a></li>
<li><a href="#Traditional">Traditional Illustrations</a></li>
<li><a href="#Digital">Digital Illustrations</a></li>
<li><a href="#Mixed-Media">Mixed Media</a></li>
<li><a href="#Animation">Digital Animation</a></li>
<li><a href="#Programming">Programming</a></li>
</ul>
</div>
<div id="content" class="column">
<div id="introduction">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum rem impedit maxime autem ea quos ipsa cumque esse in assumenda quaerat laudantium cupiditate sequi facere culpa, perferendis eius alias recusandae! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Recusandae commodi nam accusamus nesciunt nihil, eius non officia laboriosam ut iure eos atque iste incidunt voluptate esse minus fugiat placeat asperiores. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos inventore unde dolorem a perspiciatis harum ipsum? Ex eaque iure, facere at expedita nam ad dolore facilis voluptatem, in ipsam deleniti? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quam consequatur optio eligendi qui repudiandae nulla beatae, amet quo. Commodi nesciunt cum illo repellendus magni delectus enim consequuntur maiores quam quisquam!</p>
</div>
<div id="Traditional">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus veniam, reiciendis ea aut itaque, facilis quaerat blanditiis delectus assumenda dicta corrupti ipsam eaque, rerum aperiam ratione dignissimos consequuntur excepturi sunt! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet dolorum, labore magni unde, eius nulla laudantium ipsum, ducimus nihil corrupti natus quaerat quae quisquam sit cumque ratione itaque error blanditiis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse praesentium numquam doloribus nam quis, adipisci architecto aliquid laudantium eaque cupiditate optio facilis eius nulla saepe tempore temporibus tempora qui possimus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, deleniti architecto, delectus itaque quo enim repudiandae nihil dolores praesentium corporis nobis saepe accusantium molestias maiores, facilis quod facere quasi illo!</p>
</div>
<div id="Digital">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus veniam, reiciendis ea aut itaque, facilis quaerat blanditiis delectus assumenda dicta corrupti ipsam eaque, rerum aperiam ratione dignissimos consequuntur excepturi sunt! Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat soluta laborum obcaecati enim illo eveniet eius fugiat unde natus voluptatum, reiciendis quos. Nisi praesentium sequi aut ipsam deleniti sint. Modi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia quod laborum tempore ipsam. Illo rem accusantium numquam consectetur ipsam deserunt, deleniti, aut assumenda cum molestias alias, incidunt quasi inventore ullam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, aliquam! Quos a laudantium consequatur libero, incidunt nemo rem ipsa reprehenderit. Voluptate voluptas repellendus, nesciunt explicabo deserunt fugit sunt consectetur similique.</p>
</div>
<div id="Mixed-Media">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus veniam, reiciendis ea aut itaque, facilis quaerat blanditiis delectus assumenda dicta corrupti ipsam eaque, rerum aperiam ratione dignissimos consequuntur excepturi sunt! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum inventore, distinctio provident deserunt nisi debitis officia tempore dignissimos labore facere accusantium ex at voluptas asperiores itaque unde aliquam natus! Ipsam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque distinctio odit reiciendis, dolor optio, assumenda fugit voluptatum molestias repellendus itaque debitis nobis officia, cumque voluptas accusantium laudantium atque inventore. Similique? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, veniam temporibus nobis itaque voluptas facilis at recusandae quis reiciendis nulla perferendis deleniti odio tenetur laudantium, doloribus autem soluta eum fugiat.</p>
</div>
<div id="Animation">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus veniam, reiciendis ea aut itaque, facilis quaerat blanditiis delectus assumenda dicta corrupti ipsam eaque, rerum aperiam ratione dignissimos consequuntur excepturi sunt! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum soluta saepe dolore voluptate, odit, fugit sit vel officiis earum hic harum officia, id expedita. Quidem perferendis ea illum minima ex. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed est quia quidem similique dignissimos eum aspernatur repudiandae nesciunt repellendus, minus totam voluptatum quo quod, aperiam rerum recusandae. Porro, voluptate adipisci! Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque reiciendis dolorem, similique ullam pariatur unde nostrum! Accusamus doloribus unde enim dignissimos, numquam adipisci non consequatur neque eveniet ea ratione ullam.</p>
</div>
<div id="Programming">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus veniam, reiciendis ea aut itaque, facilis quaerat blanditiis delectus assumenda dicta corrupti ipsam eaque, rerum aperiam ratione dignissimos consequuntur excepturi sunt! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto distinctio vel harum nihil hic libero delectus, labore quo exercitationem asperiores repellendus ea saepe. Consequatur natus tempora asperiores fugiat distinctio esse? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident perferendis enim quia cumque aperiam rerum quas alias saepe consectetur voluptas fuga iste ut, suscipit eaque quam. Obcaecati suscipit nisi quo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error tempore officiis recusandae. Labore quidem ab perspiciatis deleniti eos aspernatur placeat maxime quas aut, quis veritatis necessitatibus fugiat eaque consequatur beatae?</p>
</div>
</div>
</div>
</main>
</body>
</html>
-CSS Code-
body{
background-color: #272745;
max-width: 1600px;
}
header{
background-color: #9d5e7a;
margin: 0px 200px;
padding: 0px 30px;
h1{
text-align: center;
font-size: 100px;
}
nav{
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: -webkit-sticky;
position: sticky;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color: #272745;
}
#active{
color: #d2b2d5;
}
}
@media (max-width: 800px) {
h1{
font-size: 5vw;
overflow: hidden;
}
}
}
main{
border: #9d5e7a solid 8px;
background-color: #aa80ae;
margin: 0px 200px;
padding: 0px;
.double-column{
display: flex;
box-sizing: border-box;
max-width: 1200px;
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
}
li a {
display: block;
color: #000;
padding: 10px 20px;
text-decoration: none;
}
li a:hover {
background-color: #9d5e7a;
color: #d2b2d5;
}
.active {
background-color: #9d5e7a;
color: #d2b2d5;
}
}
.column {
float: left;
}
.column#side-bar{
width: 30%;
border: #9d5e7a solid 8px;
background-color: #aa80ae;
}
.column#content{
padding: 10px 20px;
width: 80%;
border: none;
background-color: #d2b2d5;
}
}
I’ve tried linking the navigation buttons with their individual divs, like how you would with forms. But it seems to only jump to the place of the div, and not hide all the rest!
2
Answers
I think you are referring to an accordion, you’ll need to use some JavaScript to handle opening and closing each section of the accordion but it isn’t that complex. This tutorial is pretty nice and easy to follow accordion tutorial
Try and stick with standards and/or standard behaviors. Use the hash property of the URL, i.e.,
#some-section.People expect a URI fragment (part of the navigation link you speak of) to point to a specific part of a page.
Your JavaScript could read the URI fragment and handle your UI component accordingly.