Skip to content

Commit

Permalink
corrected the function of more button
Browse files Browse the repository at this point in the history
  • Loading branch information
@aryansharma220
aryansharma220 committed May 23, 2024
1 parent 3b7dccc commit af2d631
Show file tree
Hide file tree
Showing 3 changed files with 140 additions and 84 deletions.
145 changes: 104 additions & 41 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -460,6 +460,84 @@ body {
mix-blend-mode: normal;
}

.navbar-list{
display: flex;
justify-content: center; /* Center align the navbar items */
align-items: center; /* Vertically center the navbar items */
margin: 0; /* Remove default margin */
padding: 0; /* Remove default padding */
}

.navbar-item {
margin: 0 10px; /* Adjust the horizontal margin to increase spacing */
padding: 0; /* Remove default padding */
}

.navbar-link {
position: relative;
color: var(--charcoal);
padding: 8px 12px; /* Adjust padding as needed */
line-height: 2;
transition: var(--transition-1);
}

.navbar-link:is(:hover, :focus) {
color: var(--old-rose);
}

.dropdown-menu {
/* display: none;
position: absolute;
top: calc(100% + 5px);
left: 0;
background-color: var(--white);
padding: 10px;
border-radius: 5px; */
display: none;
position: absolute;
background-color: #fff;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
z-index: 1;
transition: all 0.3s ease;
top: 100%;
}

.dropdown-item {
margin-top: 5px;
}

.dropdown-menu-list {
list-style: none;
margin: 0;
padding: 0;
}

.dropdown-menu-item {
padding: 12px 16px;
}

.dropdown-menu-item a {
text-decoration: none;
color: #000;
}

.dropdown-item:first-child {
margin-top: 0;
}

.dropdown-menu.active {
display: block;
}

.navbar-item.dropdown {
position: relative; /* Ensure the dropdown menu is positioned relative to the navbar item */
}

.navbar-item.dropdown:hover .dropdown-menu {
display: block;
} */


.nav-toggle-btn {
font-size: 40px;
color: var(--charcoal);
Expand Down Expand Up @@ -503,39 +581,23 @@ body {
overflow-y: scroll;
}


/* .navbar-item:nth-child(9) .navbar-link {
margin-right: 35px;
} */
/* .navbar-item:nth-child(9) .navbar-link {
margin-right: 5px;
}*/

/* @media (min-width:641px) {
.navbar-list{
flex-direction: column;
}
.navbar.active{
max-height: 330px;
}
} */
.navbar-list{
.navbar-list {
display: flex;
justify-content: center; /* Center align the navbar items */
align-items: center; /* Vertically center the navbar items */
margin: 0; /* Remove default margin */
padding: 0; /* Remove default padding */
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}

.navbar-item {
margin: 0 10px; /* Adjust the horizontal margin to increase spacing */
padding: 0; /* Remove default padding */
margin: 0 10px;
padding: 0;
}

.navbar-link {
position: relative;
color: var(--charcoal);
padding: 8px 12px; /* Adjust padding as needed */
padding: 8px 12px;
line-height: 2;
transition: var(--transition-1);
}
Expand All @@ -547,37 +609,38 @@ body {
.dropdown-menu {
display: none;
position: absolute;
top: calc(100% + 5px);
left: 0;
background-color: var(--white);
padding: 10px;
border-radius: 5px;
background-color: #fff;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
z-index: 1;
transition: all 0.3s ease;
top: 100%;
}

.dropdown-item {
margin-top: 5px;
.dropdown-menu-list {
list-style: none;
margin: 0;
padding: 0;
}

.dropdown-item:first-child {
margin-top: 0;
.dropdown-menu-item {
padding: 12px 16px;
}

.dropdown-menu-item a {
text-decoration: none;
color: #000;
}

.dropdown-menu.active {
display: block;
}

.navbar-item.dropdown {
position: relative; /* Ensure the dropdown menu is positioned relative to the navbar item */
}

.navbar-item.dropdown:hover .dropdown-menu {
display: block;
position: relative;
}

/* Adjust the position of the dropdown menu */
.dropdown-menu {
top: 100%; /* Position below the navbar item */
}



/*-----------------------------------*\
Expand Down
16 changes: 16 additions & 0 deletions assets/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,3 +220,19 @@ function validateAndConnect() {
document.getElementById('yourPrice').value='';
}
}


function toggleMoreDropdown(event) {
event.preventDefault();
const moreDropdown = document.getElementById('more-dropdown');
const dropdownMenu = document.getElementById('dropdown-menu');
const moreLink = document.getElementById('more-link');

if (dropdownMenu.style.display === "block") {
dropdownMenu.style.display = "none";
moreLink.style.display = "block";
} else {
dropdownMenu.style.display = "block";
moreLink.style.display = "none";
}
}
63 changes: 20 additions & 43 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,49 +82,35 @@
<div id="loader"></div>
</div>

<header class="header header-anim" data-header>

<header class="header header-anim" data-header>
<div class="container">

<nav class="navbar" data-navbar>
<a href="#home" onclick="lenis.scrollTo('#home');" class="logo" style="display:flex;">
<img src="./assets/images/LogoPicLight.png" alt="" class="logopic" style=" width:0.1px;opacity: 0;" />
<img src="./assets/images/LogoPicLight.png" alt="" class="logopic" style="width:0.1px;opacity: 0;" />
</a>

<ul class="navbar-list">
<img src="assets/images/logo_whitebg.png" class="logopic" style=" width: 150px;">

<img src="assets/images/logo_whitebg.png" class="logopic" style="width: 150px;">
<li class="navbar-item">
<a href="#home" onclick="lenis.scrollTo('#home')" class="navbar-link" data-nav-link><i
class="ri-home-fill"></i> Home</a>
<a href="#home" onclick="lenis.scrollTo('#home')" class="navbar-link" data-nav-link><i class="ri-home-fill"></i> Home</a>
</li>

<li class="navbar-item">
<a href="#benefits" onclick="lenis.scrollTo('#benefits')" class="navbar-link" data-nav-link><i
class="ri-bar-chart-fill"></i> Benefits</a>
<a href="#benefits" onclick="lenis.scrollTo('#benefits')" class="navbar-link" data-nav-link><i class="ri-bar-chart-fill"></i> Benefits</a>
</li>

<li class="navbar-item">
<a href="#genre" onclick="lenis.scrollTo('#genre')" class="navbar-link" data-nav-link><i
class="ri-bar-chart-fill"></i> Genre</a>
<a href="#genre" onclick="lenis.scrollTo('#genre')" class="navbar-link" data-nav-link><i class="ri-bar-chart-fill"></i> Genre</a>
</li>

<li class="navbar-item">
<a href="#contact" onclick="lenis.scrollTo('#contact')" class="navbar-link" data-nav-link><i
class="ri-customer-service-2-fill"></i> Contact</a>
<a href="#contact" onclick="lenis.scrollTo('#contact')" class="navbar-link" data-nav-link><i class="ri-customer-service-2-fill"></i> Contact</a>
</li>

<li class="navbar-item">
<a href="#" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a>
</li>

<li class="navbar-item" id="login-signup-link">
<a href="./assets/html/login.html" class="navbar-link">Login/Signup</a>
</li>

<li class="navbar-item dropdown">
<a href="#" class="navbar-link">More <i class="ri-arrow-down-s-line"></i></a>
<div class="dropdown-menu">
<li class="navbar-item dropdown" id="more-dropdown">
<a href="#" class="navbar-link" id="more-link" onclick="toggleMoreDropdown(event)">More <i class="ri-arrow-down-s-line"></i></a>
<div class="dropdown-menu" id="dropdown-menu">
<ul class="dropdown-menu-list">
<li class="dropdown-menu-item">
<a href="#chapters" onclick="lenis.scrollTo('#chapters')" class="navbar-link" data-nav-link><i class="ri-medal-fill"></i> Literary Realms</a>
Expand All @@ -137,34 +123,25 @@
</li>
</ul>
</div>

<li>

<div class="switch-container">
<input type="checkbox" id="switch" class="switch-checkbox">
<label for="switch" class="switch-label">
<div class="switch-button">
<span class="material-icons sun-icon">wb_sunny</span>
<span class="material-icons moon-icon">brightness_2</span>
</div>
</label>
</div>

</li>
<div class="switch-container">
<input type="checkbox" id="switch" class="switch-checkbox">
<label for="switch" class="switch-label">
<div class="switch-button">
<span class="material-icons sun-icon">wb_sunny</span>
<span class="material-icons moon-icon">brightness_2</span>
</div>
</label>
</div>
</ul>
</nav>

<button class="nav-toggle-btn" aria-label="toggle menu" data-nav-toggler>
<ion-icon name="menu-outline" aria-hidden="true" class="open"></ion-icon>

<ion-icon name="close-outline" aria-hidden="true" class="close"></ion-icon>
</button>

</div>
</header>






<main>
Expand Down

0 comments on commit af2d631

Please sign in to comment.