menu-update
This commit is contained in:
Suvodip Ghosh
@@ -1,244 +1,276 @@
|
||||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Online from "./Online.vue";
|
||||
---
|
||||
<Online/>
|
||||
|
||||
<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</a>
|
||||
<div class="dropdownDesktop">
|
||||
<button class="dropbtnDesktop">About
|
||||
<i class="fa fa-caret-downDesktop"></i>
|
||||
</button>
|
||||
<div class="dropdown-contentDesktop">
|
||||
<a href="/aboutus">About Us</a>
|
||||
<a href="/chairman-message">Chairman Message</a>
|
||||
<a href="/administrator">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-course">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 z-index">
|
||||
<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="#">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="dropdownDesktop">
|
||||
<button class="dropbtnDesktop">Franchise
|
||||
<i class="fa fa-caret-downDesktop"></i>
|
||||
</button>
|
||||
<div class="dropdown-contentDesktop">
|
||||
<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="dropdownDesktop">
|
||||
<button class="dropbtnDesktop">Login
|
||||
<i class="fa fa-caret-downDesktop"></i>
|
||||
</button>
|
||||
<div class="dropdown-contentDesktop">
|
||||
<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>
|
||||
</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
|
||||
⮯
|
||||
</button>
|
||||
<div class="dropdown-content">
|
||||
<a href="#">Link 1</a>
|
||||
<a href="#">Link 2Link 2Link 2</a>
|
||||
<a href="#">Link 3</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<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>
|
||||
<a class="icon" onclick="openMobileMenu()">
|
||||
☰
|
||||
</a>
|
||||
</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>
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<script is:inline>
|
||||
function openMobileMenu() {
|
||||
var element = document.getElementById("mobileMenu");
|
||||
element.classList.toggle("hidden");
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.z-index {
|
||||
z-index: +10;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
overflow: hidden;
|
||||
background-color: rgb(150, 39, 39);
|
||||
/* position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0; */
|
||||
</section>
|
||||
|
||||
</main>
|
||||
<script is:inline>
|
||||
</script>
|
||||
<style>
|
||||
.drop-content {
|
||||
color: black;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
.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;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
background-color: rgb(9, 14, 90);
|
||||
transition: all 0.3s ease-in;
|
||||
overflow-y: hidden;
|
||||
top: 70px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.dropdownDesktop {
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
|
||||
.navbar .nav-links a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdownDesktop .dropbtnDesktop {
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: white;
|
||||
padding: 14px 16px;
|
||||
background-color: inherit;
|
||||
font-family: inherit;
|
||||
margin: 0;
|
||||
|
||||
/* when nav toggle button not checked */
|
||||
.navbar #nav-check:not(:checked) ~ .nav-links {
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.navbar a:hover, .dropdownDesktop:hover .dropbtnDesktop {
|
||||
background-color: red;
|
||||
|
||||
/* when nav toggle button is checked */
|
||||
.navbar #nav-check:checked ~ .nav-links {
|
||||
height: fit-content;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.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;
|
||||
.navbar .nav-links .loginBtn {
|
||||
padding: 10px 40px ;
|
||||
margin: 20px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: rgb(9, 14, 90);
|
||||
}
|
||||
|
||||
.dropdown-contentDesktop a {
|
||||
/* Responsive dropdown code */
|
||||
.navbar .nav-links .dropdown, .navbar .nav-links .dropdown2 {
|
||||
float: none;
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.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;
|
||||
.navbar .nav-links .drop-content, .navbar .nav-links .drop-content2 {
|
||||
position: relative;
|
||||
background-color: rgb(220, 220, 250);
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
|
||||
.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>
|
||||
/* 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
Block a user