So i know this is so easy for most of people here but i'm learning and i realy hope someone can help me;
I'm making a responsive nav for my website so i want to click the menu buttom so the menu drops from top of the screen. So i did the transform: translateY(-100%), but i have a function to make my menu (classic 3 lines) to turn into an "X" so what can i add to this function to make at the same time the menu appears?. And i don't know why but the transition from 3 hirizontal lines to X works nice but from X to the 3 lines is not working the same way.
DOM
<div id="mobile_menu">
<div class="mobile_menu_lines1"></div>
<div class="mobile_menu_lines2"></div>
<div class="mobile_menu_lines3"></div>
</div>
<nav id="mobile_nav">
<ul id="mobile_links">
<li>INICIO</li>
<li>PORTAFOLIO</li>
<li>NOSOTROS</li>
<li>CONTACTO</li>
</ul>
<ul id="mobile_links_social">
<li><img src="assets/img/svgs/facebook_icon.svg" alt="Facebook logo"/></li>
<li><img src="assets/img/svgs/twitter_icon.svg" alt="Twitter Logo"/></li>
<li><img src="assets/img/svgs/instagram_icon.svg" alt="Instagram logo"/></li>
</ul>
</nav>
CSS
#mobile_menu{
position: absolute;
display: block;
width: 50px;
height: 60px;
float: right;
right: 5px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.mobile_menu_lines1{
max-width: 70%;
align-items: center;
height: 2px;
background-color: white;
margin-top: 18px;
border-radius: 2px;
}
.mobile_menu_lines2, .mobile_menu_lines3{
max-width: 70%;
align-items: center;
height: 2px;
background-color: white;
margin-top: 9px;
border-radius: 2px;
}
.show .mobile_menu_lines1 {
transform: rotate(45deg) translate(11px, 5px);
transition: all 0.3s ease-in-out;
}
.show .mobile_menu_lines2 {
opacity: 0;
transition: all 0.3s ease-in-out;
}
.show .mobile_menu_lines3 {
transform: rotate(-45deg) translate(10px, -5px);
transition: all 0.3s ease-in-out;
}
#mobile_nav{
display: block;
text-align: center;
padding-top:60px;
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
transform: translateY(-100%);
transition: all 0.3s ease-in-out;
}
#mobile_nav #mobile_links li{
padding: 15px 0;
}
#mobile_nav #mobile_links li a{
list-style: none;
text-decoration: none;
color: white;
font-family: "josefin sans";
font-size: 12px;
letter-spacing: 7px;
align-items: center;
text-align: center;
padding: 15px 0;
width:600px;
max-width: 100%
}
#mobile_nav #mobile_links_social li{
padding: 10px 20px;
}
JS
var mobileNavMostrar = document.getElementById('mobile_menu');
mobileNavMostrar.addEventListener('click',function(){
mobileNavMostrar.classList.toggle('show');
})
Thanks in advance.
I tried your code and I think you are missing two things - the css to define how the mobile_nav should change when it is shown, and the javascript to apply that css on click.
Related
I'm new to building websites and am in the process of building a simple website that I'd like to use as a blog. I'd like to be able to have the menu closed (on a mobile browser) when navigating back or forward to a page that has been previously viewed. To achieve this I've been using Javascript to reload a page when navigating back or forward to it.
if(performance.getEntriesByType("navigation")[0].type == "back_forward"){
location.reload();
debugger;
}
This Javascript works well. However, I'm finding that there is now a flash of unstyled content that appears on the screen for about a second or so when navigating back or forward to a previously viewed page on my website.
As a workaround for getting the menu to close upon the navigation of a page on a mobile browser, I've been using a re-trigger of the javascript that I have set to the menu bar. I have it set up so that the background isn't scrollable when navigating and use the code below to ensure that it stays as such on a previously viewed page on my website. If I cannot close my menu upon navigation, I'd at least like it to function how I have it coded (have it so that the background freezes and isn't scrollable) when returning to a page. The Javascript no longer runs properly upon navigation to a previously viewed web page so I've been using this code to combat it. It doesn't seem to be working properly. The background is scrollable (which it shouldn't be) and I still find a flash of unstyled content appearing between pages.
if (performance.getEntriesByType("navigation")[0].type == "back_forward") {
document.getElementById('cp_toggle03').dispatchEvent(
new Event('change')
);
}
Below is all the code on my website. Is there a way I can set it so that the menu is closed when navigating back and forth between previously viewed web pages? Is setting Javascript to reload the page upon navigation my only option? Any knowledge that you could share with me would be very much appreciated. Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0;" charset="utf-8">
<title>MORIKOBOSHI・</title>
</head>
<body>
<div class="page-wrap">
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: 1px solid lightgray;">Home</li>
<li style="border-bottom: 1px solid lightgray;">Blog</li>
<li style="border-bottom: 1px solid lightgray;">About This Website</li>
<li style="border-bottom: 1px solid lightgray;">Bibliography</li>
<div class="searchbar">
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 10px; padding-top: 20px; text-align: center; position: inline;">
<input class="search2" id="txtSearch" type="text" placeholder="Custom Google Search" name="serach_bar" size="31" maxlength="255" value="" style="top: 185px; width: 180px; height: 26px;">
<input class="search1" type="submit" name="submition" value="Search" style="padding-left: 5px; top: 153px; height: 25px; width: 50.5px; display: inline-flex; justify-content: center; font-size: 10.5px;">
<input class="search2" type="hidden" name="sitesearch" value="default.html">
</form>
</div>
<script type="text/javascript">
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:morikoboshi.com' + document.getElementById('txtSearch').value;
return false;
}
</script>
<script>
document.getElementById('cp_toggle03').onchange = function() {
if (document.getElementById('cp_toggle03').checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
}
</script>
</ul>
</nav>
</header>
<div class="setsumei">
<br><br><h1 style="text-align: center; font-size: 40px;">◯◯◯◯</h1>
<br><p style="text-align: justify; font-size: 16px;"></p>
<p style="text-align: center; font-size: 13px;">Author: ◯◯◯◯</p>
<p style="text-align: center; font-size: 13px;">Photos/Videos Taken：◯◯◯◯/◯◯/◯◯</p>
<br><br><p style="text-align: justify; font-size: 16px;">
#
</p>
</div>
<br><br><div class="image">
<img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
</div>
<br><br><footer class="site-footer" style="font-size: 12px;">MORIKOBOSHI© | 日本語</footer>
</div>
</div>
<style>
.body{background-color: white;
font-family: sans-serif;}
.searchbar{float: right;}
.image{text-align: center;}
.setsumei{margin-left: 20px;
margin-right: 20px;}
.footer{width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*, *:before, *:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before,
.cp_menuicon > span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,
#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked ~ #h-menu_black {
display: block;/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll{
overflow: hidden;
position: fixed;
}
</style>
</body>
</html>
Please take a look at the following basic example:
html,
body {
height: 100%;
}
body {
margin: 0;
}
.sidebar {
height: 100%;
width: 300px;
background-color: pink;
float: left;
}
.students-list {
height: 100%;
width: 200px;
background-color: skyblue;
float: left;
}
<div class="sidebar">
Students List
</div>
<div class="students-list">
</div>
The pink div is a sidebar with a link. at first the second div which is the skyblue one, should be hidden, and when the user clicks on the link the whole div should slide smoothly from the left (From underneath the pink div).
Do any of you have a tip or can help me out how to achieve the animation?
EDIT: Is it possible to also use another button to slide out even a third div to the right of the second div?
Please check the below code
body {
font-family: "Roboto", sans-serif;
font-size: 18px;
overflow-x: hidden;
}
main {
padding: 40px 25px;
transition: .5s ease-in-out;
width: 100%;
}
nav {
background: #36a;
bottom: 0;
box-shadow: 0 0 5px #666;
height: 100%;
left: -17.5rem;
padding-top: 38px;
position: absolute;
top: 0;
transition: .5s ease-in-out;
width: 17rem;
user-select: none;
}
nav a {
color: #eee;
display: block;
padding: 12px 16px;
transition: .5s;
text-decoration: none;
-webkit-user-drag: none;
}
nav a:hover {
background-color: #39c;
}
#nav-collapse {
padding: 8px 12px;
position: absolute;
right: 0;
top: 0;
}
#nav-expand {
background-color: #333;
color: #eee;
display: block;
left: 0;
top: 0;
padding: 8px 12px;
position: absolute;
text-decoration: none;
transition: .5s linear;
user-select: none;
-webkit-user-drag: none;
}
#nav-expand:focus {
opacity: 0;
}
#nav-expand:focus ~ main {
margin-left: 17rem;
transition-delay: .25s;
}
#nav-expand:focus ~ nav {
left: 0;
transition-delay: .25s;
}
#nav-expand:hover {
background-color: #369;
color: #fff;
}
.icon {
display: inline-block;
background-position: center;
background-repeat: no-repeat;
height: 12px;
width: 12px;
}
.icon-cross {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABHNCSVQICAgIfAhkiAAAAPdJREFUGJV1jz9LhWAYxc+9rVZDQ+DcEI0NLU19gxr6Ci3tuvjnA+gggSBt4qzzO90b5FBubkHgEM1CBL5K93Ia8jWv4G88/A7PeQAArusekXwRQpiGYSzQ4/v+Gcn3OI6vMRJf+cdWFXrxs8+bOI5vkCTJLckf/rMtiuJhJJIk67oWAIA0Te8mhR2klGvbtg/UvNlC27ZPSlwquaqqZwA1dmGe56uu676HxPO8U5IfMyuGp+fEt+nTQghzqWnaMYBDdUVKuXYc5yLLsnsAmz5e6Lp+AgCIouiK5FfTNCvLsvanT5dl+Wia5t6wOwiC87GoCMPwUom/I2EVwEqOzwUAAAAASUVORK5CYII=');
}
.icon-menu {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAB5JREFUKJFj/P///38GEgATKYoHKWAc9TQRgGRPAwD0IAv+FT8LPwAAAABJRU5ErkJggg==');
}
<a id="nav-expand" href="#">
<span class="icon icon-menu"></span>
Menu
</a>
<nav>
<a id="nav-collapse" href="#">
<span class="icon icon-cross"></span>
</a>
Link1
Link2
Link3
Link4
</nav>
<main>
<h2>Push Sidebar Exmaple</h2>
<p>Please click on menu button.</p>
</main>
I am taking reference from :
https://codepen.io/SudhakarJ/pen/GRgpddL .
I want to make same transition effect in my application, where I have 10 images and I use 3 classes namely cars,animals and fruits and when I click they should be filtered.
But the animated filter selector is not performing transition
HTML
<div class="section">
<div id="wrapper-filter">
<ul id="filter-bar">
<span class="pill" style="color:#212121"></span>
<li class="filter-option option-1 active" onclick="filterSelection('all')" style="color:#fffefe">All</li>
<li class="filter-option option-2" onclick="filterSelection('cars')" style="color:#fffefe">Shoes</li>
<li class="filter-option option-3" onclick="filterSelection('animals')" style="color:#fffefe">Toys</li>
<li class="filter-option option-4" onclick="filterSelection('fruits')" style="color:#fffefe">Toys</li>
</ul>
</div>
css
body {background-color:#ffffff; margin: 0; padding:0; font-family: Tahoma;}
h2 {text-align:center;}
#filter-bar {width: 100%; margin:0; padding:0; height:36px; display:inline-flex;}
#wrapper-filter {background-color:#000; width: 570px; height:auto; margin:30px auto; border-radius: 30px; box-sizing: border-box;}
#filter-bar li {width: 190px;background-color: transparent; text-align: center; list-style-type: none;z-index:10; cursor: pointer; font-family: Open Sans, sans-serif; font-weight: 100; font-size: 15px;line-height:36px;}
.pill {position: absolute; width:190px; height: 38px; background-color: #39c; border-radius: 30px; color: #444; z-index:10; border: 5px solid #eee; box-sizing: border-box; }
.filter-option {transition: color 500ms;}
#filter-bar.option-1 .pill {margin-left: 0px; transition: margin-left 200ms ease;}
#filter-bar.option-2 .pill {margin-left: 187px; transition: margin-left 200ms ease;}
#filter-bar.option-3 .pill {margin-left: 380px; transition: margin-left 200ms ease;}
.option-1.active, .option-2.active, .option-3.active {color:#FFD700; transition: color 200ms; }
JS
$(document).ready(function() {
$("#filter-bar li").click(function() {
$("#filter-bar li").removeClass("active")
$(this).addClass("active")
$("#filter-bar").removeClass().addClass($(this).attr("data-target"))
})
})
Below is an adapted version of the codepen where:
menu width is changed from 570px to 760px to take in account the 4 elements instead of 3 (it could maybe done in a dynamic way to take in account any number of items)
item width is unchanged (190px)
onclick=filterSelection custom method is removed. JS retrieves the class to apply using the data-target-filter attr
CSS transitions rules are updated with your options (.all, .car, .animals, .fruits instead of example .option-1,.option-2,.option-3) so they match when the value is applied as a class on #bar-filter
$("#filter-bar li").click(function() {
$("#filter-bar li").removeClass("active");
$(this).addClass("active");
$("#filter-bar").removeClass().addClass($(this).attr("data-target-filter"));
});
#filter-bar {
width: 100%;
margin: 0;
padding: 0;
height: 36px;
display: inline-flex;
}
#wrapper-filter {
background-color: #000;
width: 760px;
height: auto;
margin: 30px auto;
border-radius: 30px;
box-sizing: border-box;
}
#filter-bar li {
width: 190px;
background-color: transparent;
text-align: center;
list-style-type: none;
z-index: 10;
cursor: pointer;
font-family: Open Sans, sans-serif;
font-weight: 100;
font-size: 15px;
line-height: 36px;
}
.pill {
position: absolute;
width: 190px;
height: 38px;
background-color: #39c;
border-radius: 30px;
color: #212121: z-index: 10;
border: 5px solid #eee;
box-sizing: border-box;
}
.filter-option {
transition: color 500ms;
color: #fffefe;
}
#filter-bar.all .pill {
margin-left: 0px;
transition: margin-left 200ms ease;
}
#filter-bar.cars .pill {
margin-left: 190px;
transition: margin-left 200ms ease;
}
#filter-bar.animals .pill {
margin-left: 380px;
transition: margin-left 200ms ease;
}
#filter-bar.fruits .pill {
margin-left: 570px;
transition: margin-left 200ms ease;
}
.all.active,
.cars.active,
.animals.active,
.fruits.active {
color: #FFD700;
transition: color 200ms;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">
<div id="wrapper-filter">
<ul id="filter-bar">
<span class="pill"></span>
<li class="filter-option all active" data-target-filter="all">All</li>
<li class="filter-option cars" data-target-filter="cars">Shoes</li>
<li class="filter-option animals" data-target-filter="animals">Toys</li>
<li class="filter-option fruits" data-target-filter="fruits">Fruits</li>
</ul>
</div>
The following codes work perfectly in Google Chrome or other browsers. But when tested with a safari on an iPhone, the bottom dropdown menu doesn't appear. But when I click on the screen it goes to the menu. The menu is operational but nothing appears on the screen. What is the reason of this? This appears when I add position: fixed to the menu. But I don't want it fixed on the screen. Any help, I'd appreciate it.
.navbar-nav {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.nav>li {
position: initial;
display: block;
transition: all 0.6s ease;
}
#menu div.dropdown-menu {
margin-left: 0 !important;
padding-bottom: 10px;
background-color: #FFF;
border: none;
overflow-y: auto;
border-radius: 0px;
width: 100%;
}
.dropdown_mobile {
background: #FFF;
width: 100%;
min-height: 40px;
display: inline-table;
align-items: center;
transition: all 0.6s ease;
}
#menu .dropdown-inner {
display: flex;
}
#menu div.dropdown-inner > ul.list-unstyled {
display: flex;
}
#menu .dropdown-inner li {
margin: 5px;
padding-top: 5px;
padding-bottom: 10px;
}
#menu .dropdown-inner a {
font-family: Century Gothic, sans-serif;
font-size: 14px;
font-weight: 600;
color: #FFF;
}
<li class="dropdown open">
Fruits
<div class="dropdown-menu" style="">
<div class="dropdown_mobile">
<div class="dropdown-inner"> <ul class="list-unstyled">
<li>Apple</li>
<li>Banana</li>
</ul>
</div>
</div>
</div>
</li>
BOTTOM DROPDOWN MENU WORKS ON GOOGLE CHROME
BOTTOM DROPDOWN MENU DOESN'T WORK ON SAFARI (iPHONES)
It seems Safari doesn't support well when transition-property is all.
Also, -webkit-transition should be added for better Safari support.
Try to change this:
.nav>li {
transition: all 0.6s ease;
}
.dropdown_mobile {
transition: all 0.6s ease;
}
To this:
.nav>li {
transition: 0.6s ease;
-webkit-transition: 0.6s ease;
}
.dropdown_mobile {
transition: 0.6s ease;
-webkit-transition: 0.6s ease;
}
This is due to the size of the drop-down menu. This problem can be solved by adding a height or margin-bottom. I changed my css files below and it works fine now. If the size of the top menu is 70px, for example, the pop-up menu is 120px when opened. However, since the size of the menu is 70px, the drop-down menu does not appear in the safari. I solved this by adding margin-bottom: 70px and pinned a *top to the drop-down menu.
CSS;
#menu div.dropdown-menu {
margin-left: 0 !important;
padding-bottom: 10px;
background-color: #FFF;
border: none;
overflow-y: auto;
border-radius: 0px;
width: 100%;
top: 80px;
margin: 0;
padding: 5px;
}
.navbar-nav {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-bottom: 70px;
margin-top: 0;
background-image: linear-gradient(to right, rgb(254, 202, 56) 0%, rgb(245, 130, 32) 51%, rgb(250, 69, 3) 100%);
}
I am working on a portfolio website of my OJT experience. It's a project that is due 3 days and nearly complete.
My problem is that I'd like to keep the sidebar navigation open as well as the drop down links when I open a different page. For example, if I am on the Home page and I clicked the Rationale page on the sidebar, I'm taken to the Rationale page with the sidebar and drop down still open from the previous page (Home page in this example). I need the same for every page. If I can, I'd like to keep the current codes as much as possible, with just the new codes added on.
Sorry if the codes are messy, I had to relearn HTML and CSS for this project since I'm not very familiar and don't have much experience with web developing. Thank you.
HTML sidebar and dropdown
<div class="sidebar">
<nav id='navigation' class="navigation">
<div id="menuToggle" class="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<button class="dropdown-btn">Introduction
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
Rationale
Work Expectation
Contact Details
Company Profile
Company Size
Nature of Business
Divisions/Departments
Organizational Chart
Pictures of the Company
</div>
<button class="dropdown-btn">Observation
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
SWOT Analysis
Overall Observation
</div>
<button class="dropdown-btn">Anecdotal Reports
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
Periodic Reports
Professional Experiences and Training
Tasks and Assignments
Problems Encountered
Outstanding Achievements
Salient Practices
Relevance of the Chosen Training
Overall Experiences
</div>
<button class="dropdown-btn">Appendix
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
Practicum Recommendation Letter
Agreement & Liability Waiver
Performance Evaluation Report
Certificate of Hours Worked
Attendance Summary
Pictures while in Actual Work
Professional Resume
</div>
</ul>
</div>
</nav>
<script src="intro.js"></script>
</div>
CSS to style the sidebar
#menu a{
padding:10px 10px 10px 30px;
text-decoration:none;
font-size:20px;
color:#fff;
display:block;
transition: color 0.3s ease;
}
#menu a:hover{
color:rgb(153, 153, 153);
}
#menuToggle::before{
/* display:block;
position: absolute;
content: "OJT Portfolio";
width:144px;
font-size: 18px;
color:#f2f2f2;
top: 1px;
right: 44px; */
}
#menuToggle
{
display: block;
position: absolute;
top: 22px;
right: 22px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
#menuToggle span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child
{
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
#menuToggle input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2)
{
opacity: 1;
transform: rotate(-45deg) translate(0, -1px);
}
#menu
{
position: absolute;
height: 100vh;
width: 300px;
padding-bottom: 100%;
margin: -100px 0 0 0;
padding: 40px;
padding-top: 167px;
padding-left: 20px;
right: -60px;
background: #181818;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 10px 0;
/* padding:0 10px 0 0; */
font-size: 22px;
}
#menuToggle input:checked ~ ul
{
transform: scale(1.0, 1.0);
opacity: 1;
}
.dropdown-btn {
font-family: 'Anonymous Pro', monospace;
padding: 22px 22px 22px 22px;
text-decoration: none;
font-size: 22px;
color: #ffffff;
display: block;
border: none;
background: none;
width:100%;
text-align: left;
cursor: pointer;
outline: none;
}
.sidenav a:hover, .dropdown-btn:hover {
color: #818181;
}
.active {
background-color: #2e2e2e;
color: white;
}
.dropdown-container {
display: none;
background-color: #262626;
padding-left: 8px;
}
.fa-caret-down {
float: right;
padding-right: 8px;
}