casper
/
diji
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

started working on the menu

This commit is contained in:
KZacharski 2023-08-19 21:30:03 +02:00
parent bae6c600e3
commit 5f5b63b6f7
5 changed files with 30 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/docs/assets/ic_fluent_caret_left_24_filled.svg Normal file
View File

@ -0,0 +1 @@
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15 17.898c0 1.074-1.265 1.648-2.073.941l-6.31-5.522a1.75 1.75 0 0 1 0-2.634l6.31-5.522c.808-.707 2.073-.133 2.073.941v11.796Z" fill="#ffffff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 254 B

1
docs/docs/assets/ic_fluent_chevron_left_24_filled.svg Normal file
View File

@ -0,0 +1 @@
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.707 4.293a1 1 0 0 1 0 1.414L9.414 12l6.293 6.293a1 1 0 0 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 0Z" fill="#ffffff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 248 B

4
docs/docs/index.html
View File

@ -65,14 +65,14 @@
</div>
<div id="drawer" class="navdrawer">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"><img src="./assets/ic_fluent_chevron_left_24_filled.svg" width="30px"></a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div id="drawerbg" class="navdrawerbg" onclick="closeNav()"></div>
<div class="footer">
<p class="ftrtext">Created by <a>KZacharski (Puffercat)</a></p>
<p class="ftrtext">Project created with diji 1.1</p>

9
docs/docs/script.js
View File

@ -1,8 +1,17 @@
var isOpen = false
function openNav() {
document.getElementById("drawer").style.width = "250px";
document.getElementById("drawerbg").style.width = "100%";
isOpen = true
}
/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("drawer").style.width = "0";
document.getElementById("drawerbg").style.width = "0";
isOpen = false
}

19
docs/docs/style.css
View File

@ -60,10 +60,23 @@ color: white;
left: 0;
background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
padding-top: 15px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
.navdrawerbg {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 0; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: transparent; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 15px; /* Place content 60px from the top */
transition: 0s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.navdrawer a {
padding: 8px 8px 8px 32px;
@ -94,12 +107,12 @@ color: white;
padding: 20px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size)
@media screen and (max-height: 450px) {
.navdrawer {padding-top: 15px;}
.navdrawer a {font-size: 18px;}
}
}*/