Skip to content

Commit

Permalink
toggle navbar fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
@TheMIU
TheMIU committed Nov 12, 2023
1 parent e42f35d commit 918a585
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 11 deletions.
3 changes: 2 additions & 1 deletion css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
z-index: -100;
}

/* custom 3 buttons */
.button {
border: none;
background: #4285f4;
Expand All @@ -27,6 +28,7 @@
transform: translate(0px, -10px) scale(1.2);
}

/* custom containers */
.sub-container-styles {
background-color: rgba(0, 0, 0, 0.8);
border-radius: 5px;
Expand All @@ -47,7 +49,6 @@
color: white;
}


.subject-container span {
display: inline-block;
padding-left: 10px;
Expand Down
42 changes: 42 additions & 0 deletions js/scripts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,26 +20,48 @@ $(".subject-container ul li").each(function () {

////// Navigation
hideAll();
changeNavLinksWhite();
$("#home").css("color", "#45b0ff");
$("#main3buttons").show();

$("#navHome").click(function () {
hideAll();
$("#main3buttons").show();
changeNavLinksWhite();
$("#home").css("color", "#45b0ff");
toggleNavbar();
});

$("#home").click(function () {
hideAll();
$("#main3buttons").show();
changeNavLinksWhite();
$("#home").css("color", "#45b0ff");
toggleNavbar();
});

$("#btn-sem-1, #navSEM01").click(function () {
hideAll();
$("#sem-1").show();
changeNavLinksWhite();
$("#navSEM01").css("color", "#45b0ff");
toggleNavbar();
});

$("#btn-sem-2, #navSEM02").click(function () {
hideAll();
$("#sem-2").show();
changeNavLinksWhite();
$("#navSEM02").css("color", "#45b0ff");
toggleNavbar();
});

$("#btn-sem-3, #navSEM03").click(function () {
hideAll();
$("#sem-3").show();
changeNavLinksWhite();
$("#navSEM03").css("color", "#45b0ff");
toggleNavbar();
});

function hideAll() {
Expand All @@ -48,3 +70,23 @@ function hideAll() {
$("#sem-2").hide();
$("#sem-3").hide();
}

function changeNavLinksWhite(){
$("#navSEM01").css("color", "white");
$("#navSEM02").css("color", "white");
$("#navSEM03").css("color", "white");
$("#home").css("color", "white");
}

////// Toggle navbar
function toggleNavbar(){
/* $(".navbar-toggler").click(); */
$(".navbar-collapse").collapse('hide');
}

$(document).on("click", function (event) {
// Check if the clicked element is not part of the navbar
if (!$(event.target).closest('.navbar').length) {
$(".navbar-collapse").collapse('hide');
}
});
55 changes: 45 additions & 10 deletions newSiteTest.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,14 @@
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@100;200;400;500;600;700;800&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap" rel="stylesheet">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
body {
font-family: 'Kanit';
font-family: 'Roboto', sans-serif;
}
</style>
</head>
Expand All @@ -38,14 +37,16 @@
<div class="container-fluid">

<a class="navbar-brand text-white" href="#" id="navHome">
<img src="images/favicon.png" style="width: 30px; margin-right: 5px;"> Notes</a>
<img src="images/favicon.png" style="width: 30px; margin-right: 5px; font-weight: bold;"> Notes</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon" style="color: white"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a style="color: #45b0ff" class="nav-link" href="#" id="home"><i
class="fa-solid fa-book mb-2"></i> Home</a>
<a style="color: #45b0ff" class="nav-link" href="#" id="navSEM01"><i
class="fa-solid fa-book mb-2"></i> SEM_01</a>
<a style="color: #45b0ff" class="nav-link" href="#" id="navSEM02"><i
Expand All @@ -56,8 +57,8 @@
<!-- dropdown menu -->
<li class="nav-item dropdown">
<a style="color: rgb(184, 250, 255)" class="nav-link dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown" aria-expanded="false"><i
class="fa-solid fa-circle-info"></i> More</a>
data-bs-toggle="dropdown" aria-expanded="false"><i class="fa-solid fa-circle-info"></i>
More</a>

<ul class="dropdown-menu bg-black">
<li><a class="dropdown-item"
Expand Down Expand Up @@ -135,10 +136,43 @@ <h5 class="modal-title"><i class="fa-solid fa-circle-info"></i> About</h5>
<i class="fa-regular fa-circle-xmark" type="button" data-bs-dismiss="modal"
aria-label="Close"></i>
</div>
<div class="modal-body">
<p>about </p>
<div class="modal-body text-center">
<h5>Notes 1.0.2</h5>

<p>
<i class="fa-solid fa-asterisk"></i> Use this as a reference or material.
<br>
<span style="color: gold">
<i class="fa-solid fa-triangle-exclamation"></i> Keeping your own notes are highly
recommended.
</span>
</p>

<p>
SEM_1, SEM_2 are finished, but there may be some updates.
SEM_3 is not finished, but there are some resources available.
</p>
</div>
<div class="modal-footer"></div>
<div class="modal-footer text-center">
<p>
<i class="fa-solid fa-bug"></i> If there are any suggestions, broken links, or issues,
please let me know.

<br>
<br>

<a class="text-white" href="https://github.com/TheMIU" target="_blank"><i
class="fa-brands fa-github fa-xl"></i></a> &nbsp;&nbsp;
<a class="text-white" href="https://facebook.com/kasunmiuranga.themiu" target="_blank"><i
class="fa-brands fa-facebook fa-xl"></i></a> &nbsp;&nbsp;
<a class="text-white" href="https://www.linkedin.com/in/kasun-miuranga" target="_blank"><i
class="fa-brands fa-linkedin fa-xl"></i></a> &nbsp;&nbsp;
<a class="text-white" href="https://api.whatsapp.com/send/?phone=0764958373"
data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="076 49 58 373"
target="_blank"><i class="fa-brands fa-whatsapp fa-xl"></i></a>
</p>
</div>

</div>
</div>
</div>
Expand Down Expand Up @@ -487,7 +521,8 @@ <h4 class="text-black text-center">SEM 03</h4>
<div class="row justify-content-evenly">
<!--**** Architecture and Design Patterns - 2 *****-->
<div class="col-lg-3 col-md-12 sub-container-styles">
<h5 data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Architecture and Design Patterns - 2">
<h5 data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-title="Architecture and Design Patterns - 2">
AD-2</h5>

<ul>
Expand Down

0 comments on commit 918a585

Please sign in to comment.