Skip to content
Snippets Groups Projects
Commit ff3c805c authored by Nicole Finks's avatar Nicole Finks
Browse files

[add css and js for dropdown filter menu]

parent 793f7cd2
Branches
Tags
Hide whitespace changes
Inline Side-by-side
layouts/custom/repository.html
+ 20
− 2
View file @ ff3c805c
......@@ -11,9 +11,24 @@
<!-- Sidebar for Filters -->
<div class= "sidenav">
<button class="dropdown-btn">
Gender
<i class="fa fa-caret-down"></i>
</button>
<div id="gender">
<input type="checkbox" name="genderF" value="female"> Female</input><br>
<input type="checkbox" name="genderM" value="male"> Male</input><br>
<input type="checkbox" name="genderTF" value="transFem"> Transgender Female</input><br>
<input type="checkbox" name="genderTM" value="transMale"> Transgender Male</input><br>
<input type="checkbox" name="genderFl" value="fluid"> Gender Fluid</input><br>
<input type="checkbox" name="other" value="other"> Other </input>
</div>
<button class="dropdown-btn">
Age
<i class="fa fa-caret-down"></i>
</button>
<a href="#">Example</a>
</div>
......@@ -39,9 +54,12 @@
<head>
<link rel="stylesheet" type="text/css" href="/css/sidenavRepository.css"/>
<script src="/js/repositoryJS.js"></script>
</head>
<body>
</body>
{{ partial "footer.html" . }}
static/css/sidenavRepository.css
+ 23
− 7
View file @ ff3c805c
/* the sidebar menu */
.sidenav {
width: 130px;
width: 20% ;
position: fixed/* stay in place on scroll */
/* z-index:1; /* stay on top*/
top : 0; /* stay on top*/
......@@ -8,21 +8,35 @@
background: #eee;
padding-top: 20px;
padding-right:20px;
}
/* Sidenav filters */
.sidenav a {
padding: 6px 8px 6px 16px;
.sidenav a, .dropdown-btn, #gender {
padding: 6px 15px 6px 6px;
text-decoration: none;
font-size: 25px;
font-size: 15px;
color: #818181;
display: block;
border: none;
background: none;
width:100%;
text-align: left;
cursor: pointer;
outline: none;
}
/* when you hover over filters, change colors */
.sidenav a:hover{
color: #f1f1f1;
/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
color: #FFF;
}
/* Add an active class to the active dropdown button */
.active {
background-color: green;
color: white;
}
/*change style of sidebar on smaller screens */
......@@ -30,3 +44,5 @@
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
static/js/repositoryJS.js 0 → 100644
+ 15
− 0
View file @ ff3c805c
//* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment