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

276 lines
6.9 KiB
Plaintext
Raw Blame History

---
import Online from "./Online.vue";
---
<main>
<Online />
<section class="container-fluid" style="background-color: #962727;">
<div class="navbar shadow-xl zindex container mx-auto">
<!-- Navbar logo -->
<div class="nav-header">
<div class="nav-logo">
</div>
</div>
<!-- responsive navbar toggle button -->
<input type="checkbox" id="nav-check">
<div class="nav-btn">
<label for="nav-check">
<span></span>
<span></span>
<span></span>
</label>
</div>
<!-- Navbar items -->
<div class="nav-links">
<a href="/">Home</a>
<div class="dropdown">
<a class="dropBtn" href="#">About
<i class="fas fa-angle-down"></i>
</a>
<div class="drop-content" >
<a href="/aboutus">About Us</a>
<a href="/chairman-message">Chairman Message</a>
<a href="/administrator">Adninistrator</a>
</div>
</div>
<a href="https://center.rgyci.org/center_list">Center List</a>
<!-- Dropdown menu -->
<div class="dropdown">
<a class="dropBtn" href="#">Courses
<i class="fas fa-angle-down"></i>
</a>
<div class="drop-content">
<a href="https://online.rgyci.org/login/index.php">Online Courses</a>
<a href="#">Offline Courses</a>
</div>
</div>
<div class="dropdown">
<a class="dropBtn" href="#">Student Zone
<i class="fas fa-angle-down"></i>
</a>
<div class="drop-content">
<a href="https://center.rgyci.org/check_registration">Check Registration</a>
<a href="https://center.rgyci.org/checkresult">Result</a>
<a href="https://center.rgyci.org/chekcertificate">Certificate Verification</a>
<a href="https://center.rgyci.org/download">Download</a>
<a href="http://center.rgyci.org/form/exam_center_login">Online Exam</a>
<a href="https://center.rgyci.org/form/student_placement">Student's Placement Form</a>
<a href="/library">Library</a>
</div>
</div>
<div class="dropdown">
<a class="dropBtn" href="#">Franchise
<i class="fas fa-angle-down"></i>
</a>
<div class="drop-content">
<a href="https://center.rgyci.org/how-to-get-franchisee-with-rgyci">Procedure</a>
<a href="https://center.rgyci.org/form/franchise_enquiry">Enquiry</a>
<a href="https://center.rgyci.org/form/companies_placement">Company's Placement Form</a>
</div>
</div>
<a href="/gallery">Gallery</a>
<a href="/contactus">Contact Us</a>
<div class="dropdown">
<a class="dropBtn" href="#">Login
<i class="fas fa-angle-down"></i>
</a>
<div class="drop-content">
<a href="https://center.rgyci.org/form/center_login">Center</a>
<a href="https://center.rgyci.org/form/teacher_login">Teacher</a>
</div>
</div>
</div>
</div>
</section>
</main>
<script is:inline>
</script>
<style>
.drop-content {
color: black;
width: fit-content;
}
.zindex {
z-index: 1;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
/* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
background-image: url(background-img.jpg);
background-size: cover;
background-attachment: fixed;
}
.navbar{
height: 70px;
width: 100%;
padding: 25px 30px;
background-color: #962727;
position: relative;
}
.navbar .nav-header{
display: inline;
}
.navbar .nav-header .nav-logo{
display: inline-block;
margin-top: -7px;
}
.navbar .nav-links{
display: inline;
float: right;
font-size: 18px;
}
.navbar .nav-links .loginBtn{
display: inline-block;
padding: 5px 15px;
margin-left: 20px;
font-size: 17px;
color: rgb(255, 255, 255);
}
.navbar .nav-links a {
padding: 10px 12px;
width: fit-content;
text-decoration: none;
font-weight: 550;
color: white;
}
/* Hover effects */
.navbar .nav-links a:hover{
background-color: rgba(0, 0, 0, 0.3);
width: 100%;
border-radius: 10px;
}
/* responsive navbar toggle button */
.navbar #nav-check, .navbar .nav-btn{
display: none;
}
@media (max-width:970px) {
.navbar .nav-btn{
display: inline-block;
position: absolute;
top: 0px;
right: 0px;
}
.navbar .nav-btn label {
display: inline-block;
width: 80px;
height: 70px;
padding: 25px;
}
.navbar .nav-btn label span {
display: block;
height: 10px;
width: 25px;
border-top: 3px solid #eee;
}
.navbar .nav-btn label:hover, .navbar #nav-check:checked ~ .nav-btn label {
background-color: rgb(9, 14, 90);
transition: all 0.5s ease;
}
.navbar .nav-links{
position: absolute;
display: block;
text-align: center;
width: 100%;
background-color: rgb(9, 14, 90);
transition: all 0.3s ease-in;
overflow-y: hidden;
top: 70px;
right: 0px;
}
.navbar .nav-links a {
display: block;
}
/* when nav toggle button not checked */
.navbar #nav-check:not(:checked) ~ .nav-links {
height: 0px;
}
/* when nav toggle button is checked */
.navbar #nav-check:checked ~ .nav-links {
height: fit-content;
overflow-y: auto;
}
.navbar .nav-links .loginBtn {
padding: 10px 40px ;
margin: 20px;
font-size: 18px;
font-weight: bold;
color: rgb(9, 14, 90);
}
/* Responsive dropdown code */
.navbar .nav-links .dropdown, .navbar .nav-links .dropdown2 {
float: none;
width: 100%;
}
.navbar .nav-links .drop-content, .navbar .nav-links .drop-content2 {
position: relative;
background-color: rgb(220, 220, 250);
top: 0px;
left: 0px;
}
/* Text color */
.navbar .nav-links .drop-content a {
color: rgb(9, 14, 90);
}
}
/* Dropdown menu CSS code */
.dropdown{
position: relative;
display: inline-block;
color: black;
}
.drop-content, .drop-content2 {
display: none;
position: absolute;
background-color: #962727;
color: black;
min-width: 200px;
width: 100%;
font-size: 16px;
top: 34px;
z-index: 1;
box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.4);
}
/* on hover show dropdown */
.dropdown:hover .drop-content, .dropdown2:hover .drop-content2 {
display: block;
}
/* drondown links */
.drop-content a {
padding: 12px 10px;
/* width: 200px;
border-bottom: 1px solid rgb(197, 197, 250); */
display: block;
transition: all 0.5s ease !important;
}
.dropBtn .drop-content a:hover {
background-color: rgb(230, 230, 230);
}
.dropdown:hover .dropBtn, .dropdown2:hover .dropBtn2 {
background-color: rgba(0, 0, 0, 0.3);
}
.dropdown2 .drop-content2 {
position: absolute;
left: 120px;
top: 126px;
}
.dropBtn2 i {
margin-left: 15px;
}
</style>
Reference in New Issue View Git Blame Copy Permalink