dwd-projects/rgyci.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
dev sp
2023-01-18 15:18:55 +00:00
parent f7507ccaea
commit af8c3d4409
24 changed files with 625 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

239
src/components/Menu.astro Normal file
View File

@@ -0,0 +1,239 @@
<main class="container-fluid navbar">
<!-- Desktop Menu -->
<div class="container mx-auto flex justify-center">
<div class="hidden md:block py-4">
<div class="navbar">
<a href="#home">Home</a>
<div class="dropdownDesktop">
<button class="dropbtnDesktop">About
<i class="fa fa-caret-downDesktop"></i>
</button>
<div class="dropdown-contentDesktop">
<a href="#">About Us</a>
<a href="#">Chairman Message</a>
<a href="#">Adninistrator</a>
</div>
</div>
<a href="#news">Center List</a>
<div class="dropdownDesktop">
<button class="dropbtnDesktop">Courses
<i class="fa fa-caret-downDesktop"></i>
</button>
<div class="dropdown-contentDesktop">
<a href="#">Online Courses</a>
<a href="#">Offline Courses</a>
</div>
</div>
<div class="dropdownDesktop">
<button class="dropbtnDesktop">Student Zone
<i class="fa fa-caret-downDesktop"></i>
</button>
<div class="dropdown-contentDesktop">
<a href="#">Check Registration</a>
<a href="#">Result</a>
<a href="#">Certificate Verification</a>
<a href="#">Download</a>
<a href="#">Online Exam</a>
<a href="#">Student's Placement Form</a>
<a href="#">Library</a>
</div>
</div>
<div class="dropdownDesktop">
<button class="dropbtnDesktop">Franchise
<i class="fa fa-caret-downDesktop"></i>
</button>
<div class="dropdown-contentDesktop">
<a href="#">Procedure</a>
<a href="#">Enquiry</a>
<a href="#">Company's Placement Form</a>
</div>
</div>
<a href="#home">Gallery</a>
<a href="#home">Contact Us</a>
<div class="dropdownDesktop">
<button class="dropbtnDesktop">Login
<i class="fa fa-caret-downDesktop"></i>
</button>
<div class="dropdown-contentDesktop">
<a href="#">Center</a>
<a href="#">Teacher</a>
</div>
</div>
</div>
</div>
</div>
<!-- Mobile Menu -->
<div class="mobileTopMenu block md:hidden">
<div class="topnavMobile">
<a href="#home" class="active">Logo</a>
<div id="mobileMenu" class="hidden">
<a href="#news">News</a>
<a href="#contact">Contact</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
&#11183
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2Link 2Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#about">About</a>
<a href="#about">About</a>
<a href="#about">About</a>
<a href="#about">About</a>
</div>
<a class="icon" onclick="openMobileMenu()">
&#9776;
</a>
</div>
</div>
</main>
<script is:inline>
function openMobileMenu() {
var element = document.getElementById("mobileMenu");
element.classList.toggle("hidden");
}
</script>
<style>
.navbar {
overflow: hidden;
background-color: rgb(150, 39, 39);
/* position: absolute;
width: 100%;
left: 0;
top: 0; */
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdownDesktop {
float: left;
overflow: hidden;
}
.dropdownDesktop .dropbtnDesktop {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdownDesktop:hover .dropbtnDesktop {
background-color: red;
}
.dropdown-contentDesktop {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-contentDesktop a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-contentDesktop a:hover {
background-color: #ddd;
}
.dropdownDesktop:hover .dropdown-contentDesktop {
display: block;
}
/* .mobileTopMenu{
position: absolute;
top:0;
left:0;
width:100%;
} */
.dropdown:hover .dropdown-content {
display: block;
background-color: #ddd;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown-content a {
float: none;
text-decoration: none;
display: block;
text-align: left;
}
.topnavMobile {
overflow: hidden;
background-color: #333;
position: relative;
}
.topnavMobile a, .topnavMobile >div > div {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnavMobile a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnavMobile a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #aa6204;
color: white;
}
</style>