nav dropdown added for storage and memory links

This commit is contained in:
2023-05-01 15:55:55 +05:30
parent bf783a338b
commit 48625743b4
6 changed files with 326 additions and 53 deletions
+1 -1
View File
@@ -33,7 +33,7 @@
<title>About | Anwi</title> <title>About | Anwi</title>
</head> </head>
<body> <body class="about_page">
<!-- navbar --> <!-- navbar -->
<div id="navbar-head"></div> <div id="navbar-head"></div>
<!-- end-navbar --> <!-- end-navbar -->
+55 -6
View File
@@ -12,6 +12,30 @@
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="styles/style.css"> <link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="./dist/css/main.css" />
<link rel="stylesheet" href="./dist/css/paymentmethod.css" />
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./libs/owlcarousel/Css/owl.carousel.min.css">
<link rel="stylesheet" href="./libs/owlcarousel/Css/owl.theme.default.min.css">
<link rel="stylesheet" href="./dist/css/vendor/bootstrap.min.css">
<link rel="stylesheet" href="./dist/css/vendor/bootstrap.min.css">
<link rel="stylesheet" href="./dist/css/vendor/vandella.css">
<link rel="stylesheet" href="./dist/css/vendor/jellybelly.css">
<!-- <link rel="stylesheet" href="./dist/css/vendor/icofont.min.css"> -->
<link rel="stylesheet" href="./dist/css/vendor/fontello.css">
<link rel="stylesheet" href="./dist/css/plugins/easyzoom.css">
<link rel="stylesheet" href="./dist/css/plugins/slick.css">
<link rel="stylesheet" href="./dist/css/plugins/nice-select.css">
<link rel="stylesheet" href="./dist/css/plugins/animate.css">
<link rel="stylesheet" href="./dist/css/plugins/magnific-popup.css">
<link rel="stylesheet" href="./dist/css/plugins/jquery-ui.css">
<link rel="stylesheet" href="./dist/css/style.css">
<link rel="stylesheet" href="./dist/css/fontawesome.all.min.css">
<link rel="stylesheet" href="./dist/css/fontawesome.min.css">
<title>project</title> <title>project</title>
</head> </head>
@@ -608,13 +632,38 @@
<script src="libs/owlcarousel/dist/owl.carousel.min.js"></script> <script src="libs/owlcarousel/dist/owl.carousel.min.js"></script>
<script src="dist/Js/navbar.js"></script> <script src="dist/js/navbar.js"></script>
<script src="dist/Js/footer.js"></script> <script src="dist/js/footer.js"></script>
<script src="dist/Js/allInOne.js"></script> <script src="dist/js/allInOne.js"></script>
<script src="dist/Js/navbar.js"></script> <script src="dist/js/navbar.js"></script>
<script src="dist/Js/footer.js"></script> <script src="dist/js/footer.js"></script>
<script src="dist/Js/laptopmuti.js"></script> <script src="dist/js/laptopmuti.js"></script>
<script src="./libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="./dist/js/jquery.min.js"></script>
<script src="./libs/owlcarousel/js/owl.carousel.min.js"></script>
<script src="./dist/js/navbar.js"></script>
<script src="./libs/axios.min.js"></script>
<script src="./dist/js/footer.js"></script>
<script src="./libs/cookies.min.js"></script>
<script src="./dist/js/fontawesome.all.js"></script>
<script src="./dist/js/fontawesome.min.js"></script>
<script src="./dist/js/vendor/modernizr-3.11.7.min.js"></script>
<script src="./dist/js/vendor/jquery-v3.6.0.min.js"></script>
<script src="./dist/js/vendor/jquery-migrate-v3.3.2.min.js"></script>
<script src="./dist/js/vendor/bootstrap.min.js"></script>
<script src="./dist/js/plugins/slick.js"></script>
<script src="./dist/js/plugins/wow.js"></script>
<script src="./dist/js/plugins/svg-injector.min.js"></script>
<script src="./dist/js/plugins/jquery.nice-select.min.js"></script>
<script src="./dist/js/plugins/mouse-parallax.js"></script>
<script src="./dist/js/plugins/images-loaded.js"></script>
<script src="./dist/js/plugins/isotope.js"></script>
<script src="./dist/js/plugins/jquery-ui.js"></script>
<script src="./dist/js/plugins/magnific-popup.js"></script>
<!-- Main JS -->
<script src="./dist/js/main.js"></script>
<script> <script>
$('#navbar-head').css("background", "rgba( 255, 255, 255, 0.25 )") $('#navbar-head').css("background", "rgba( 255, 255, 255, 0.25 )")
+64 -25
View File
@@ -15,33 +15,72 @@
if(ele_page == true){ if(ele_page == true){
} }
function naChanges(){ function naChanges(){
$("body.product_pg").find(".header-large-device").find(".header-action-wrap").find(".same-style").find("svg").find("path").attr("fill","#000");
}
setTimeout(naChanges, 1000);
win.on('scroll', function() {
var scroll = win.scrollTop();
if (scroll < 100) {
header.removeClass('stick');
$(".header-bottom.sticky-bar.stick").removeClass("sticky-bar stick");
let img_src = `./dist/assets/imgs/anwi-logo-2.png`;
$(".logo-menu-wrap").find("a img").attr("src",img_src);
$(".main-menu").find("nav ul li a").addClass("text-white");
$("body.product_pg").find(".header-large-device").find(".header-action-wrap").find(".same-style").find("svg").find("path").attr("fill","#fff"); $("body.product_pg").find(".header-large-device").find(".header-action-wrap").find(".same-style").find("svg").find("path").attr("fill","#fff");
$('.header-bottom-flex').find('svg path').attr('fill','#fff') }
} else { setTimeout(naChanges, 1000);
header.addClass('stick'); let $body_pg = $("body").hasClass("services_page");
if ($body_pg == true) {
$(".header-bottom").addClass("sticky-bar stick"); $(".main-menu").find("nav ul li a").addClass("text-dark");
let src = `./dist/assets/imgs/anwi-logo-1.png`; let img_src = `../dist/assets/imgs/anwi-logo-1.png`;
$(".logo-menu-wrap").find("a img").attr("src",src); $(".logo-menu-wrap").find("a img").attr("src",img_src);
$(".main-menu").find("nav ul li a").removeClass("text-white"); $(".header-bottom").addClass("sticky-bar stick");
$("body.product_pg").find(".header-large-device").find(".header-action-wrap").find(".same-style").find("svg").find("path").attr("fill","#000"); $("body.services_page").find(".header-large-device").find(".header-action-wrap").find(".same-style").find("svg").find("path").attr("fill","#000");
$('.header-bottom-flex').find('svg path').attr('fill','#000')
} }
}); win.on('scroll', function() {
var scroll = win.scrollTop();
if (scroll < 100) {
header.removeClass('stick');
$("body.about_page").find(".header-large-device").find(".header-action-wrap").find(".same-style").find("svg").find("path").attr("fill","#000");
$("body.product_pg").find(".header-large-device").find(".header-action-wrap").find(".same-style").find("svg").find("path").attr("fill","#fff");
$("body.services_page").find(".header-large-device").find(".header-action-wrap").find(".same-style").find("svg").find("path").attr("fill","#000");
// $('.header-bottom-flex').find('svg path').attr('fill','#fff');
if ($body_pg == true) {
$(".main-menu").find("nav ul li a").addClass("text-dark");
let img_src = `../dist/assets/imgs/anwi-logo-1.png`;
$(".logo-menu-wrap").find("a img").attr("src",img_src);
$(".header-bottom").addClass("sticky-bar stick");
}else{
let $about_pg = $("body").hasClass("about_page");
if($about_pg == true){
$(".main-menu").find("nav ul li a").addClass("text-dark");
let img_src = `../dist/assets/imgs/anwi-logo-1.png`;
$(".logo-menu-wrap").find("a img").attr("src",img_src);
$(".header-bottom").addClass("sticky-bar stick");
$("body.about_page").find(".header-large-device").find(".header-action-wrap").find(".same-style").find("svg").find("path").attr("fill","#000");
}else{
let img_src = `./dist/assets/imgs/anwi-logo-2.png`;
$(".logo-menu-wrap").find("a img").attr("src",img_src);
$(".main-menu").find("nav ul li a").addClass("text-white");
$(".header-bottom.sticky-bar.stick").removeClass("sticky-bar stick");
}
}
} else {
header.addClass('stick');
$(".header-bottom").addClass("sticky-bar stick");
let src = `./dist/assets/imgs/anwi-logo-1.png`;
$(".logo-menu-wrap").find("a img").attr("src",src);
$(".main-menu").find("nav ul li a").removeClass("text-white");
$("body.product_pg").find(".header-large-device").find(".header-action-wrap").find(".same-style").find("svg").find("path").attr("fill","#000");
$('.header-bottom-flex').find('svg path').attr('fill','#000')
let $body_pg = $("body").hasClass("services_page");
if ($body_pg == true) {
let src = `../dist/assets/imgs/anwi-logo-1.png`;
$(".logo-menu-wrap").find("a img").attr("src",src);
$(".main-menu").find("nav ul li a").removeClass("text-white");
}
let $about_pg = $("body").hasClass("about_page");
if($about_pg == true){
$(".main-menu").find("nav ul li a").addClass("text-dark");
let img_src = `../dist/assets/imgs/anwi-logo-1.png`;
$(".logo-menu-wrap").find("a img").attr("src",img_src);
$(".header-bottom").addClass("sticky-bar stick");
}
}
});
/*-------------------------------- /*--------------------------------
Slider active 1 Slider active 1
+166 -20
View File
@@ -61,8 +61,134 @@ function navINIT() {
<div class="main-menu menu-lh-1 main-menu-padding-1"> <div class="main-menu menu-lh-1 main-menu-padding-1">
<nav> <nav>
<ul class="mb-0 p-0"> <ul class="mb-0 p-0">
<li><a href="./storageproducts.html" class="satoshi_font">STORAGE</a></li> <li class="hover_tab_1"><a href="./storageproducts.html" class="satoshi_font">STORAGE</a>
<li><a href="./ramproducts.html" class="satoshi_font">MEMORY</a></li> <ul class="py-3 px-3 rounded-bottom shadow">
<li class="d-flex">
<ul class="nav nav-pills flex-column w-200 border-end" id="experienceTab" role="tablist">
<li class="nav-item">
<a class="nav-link active text-dark" data-bs-toggle="tab" href="#ora3">ORA 3</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" data-bs-toggle="tab" href="#ora4">ORA 4</a>
</li>
</ul>
<ul class="nav w-500">
<li>
<div class="tab-content">
<div id="ora3" class="container tab-pane active">
<div class="row">
<div class="col-4">
<div class="bg-gray-4 rounded-3 cursor-pointer">
<img src="./dist/assets/imgs/Navbar/ora3_ram.png" alt="ora img" class=""/>
<p class="fs-7 fw-600 mb-0 text-a-color text-center pb-1">Ora3 M.2 NVMe 512GB</p>
</div>
</div>
<div class="col-4">
<div class="bg-gray-4 rounded-3 cursor-pointer">
<img src="./dist/assets/imgs/Navbar/ora3_ram.png" alt="ora img" class=""/>
<p class="fs-7 fw-600 mb-0 text-a-color text-center pb-1">Ora3 M.2 NVMe 1TB</p>
</div>
</div>
<div class="col-4">
<div class="bg-gray-4 rounded-3 cursor-pointer">
<img src="./dist/assets/imgs/Navbar/ora3_ram.png" alt="ora img" class=""/>
<p class="fs-7 fw-600 mb-0 text-a-color text-center pb-1">Ora3 M.2 NVMe 2TB</p>
</div>
</div>
</div>
</div>
<div id="ora4" class="container tab-pane fade">
<div class="row">
<div class="col-4">
<div class="bg-gray-4 rounded-3 cursor-pointer">
<img src="./dist/assets/imgs/Navbar/ora3_ram.png" alt="ora img" class=""/>
<p class="fs-7 fw-600 mb-0 text-a-color text-center pb-1">Ora4 M.2 NVMe 512GB</p>
</div>
</div>
<div class="col-4">
<div class="bg-gray-4 rounded-3 cursor-pointer">
<img src="./dist/assets/imgs/Navbar/ora3_ram.png" alt="ora img" class=""/>
<p class="fs-7 fw-600 mb-0 text-a-color text-center pb-1">Ora4 M.2 NVMe 1TB</p>
</div>
</div>
<div class="col-4">
<div class="bg-gray-4 rounded-3 cursor-pointer">
<img src="./dist/assets/imgs/Navbar/ora3_ram.png" alt="ora img" class=""/>
<p class="fs-7 fw-600 mb-0 text-a-color text-center pb-1">Ora4 M.2 NVMe 2TB</p>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="hover_tab_2"><a href="./ramproducts.html" class="satoshi_font">MEMORY</a>
<ul class="py-3 px-3 rounded-bottom shadow">
<li class="d-flex">
<ul class="nav nav-pills flex-column w-200 border-end" id="experienceTab" role="tablist">
<li class="nav-item">
<a class="nav-link active text-dark" data-bs-toggle="tab" href="#laptop">Laptop</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" data-bs-toggle="tab" href="#desktop">Desktop</a>
</li>
</ul>
<ul class="nav w-500">
<li>
<div class="tab-content">
<div id="laptop" class="container tab-pane active">
<div class="row">
<div class="col-4">
<div class="bg-gray-4 rounded-3 cursor-pointer">
<img src="./dist/assets/imgs/Navbar/ora_ddr4_laptop.png" alt="ora img" class=""/>
<p class="fs-7 fw-600 mb-0 text-a-color text-center pb-1">Ora 8GB DDR5</p>
</div>
</div>
<div class="col-4">
<div class="bg-gray-4 rounded-3 cursor-pointer">
<img src="./dist/assets/imgs/Navbar/ora_ddr5_laptop.png" alt="ora img" class=""/>
<p class="fs-7 fw-600 mb-0 text-a-color text-center pb-1">Ora 16GB DDR5</p>
</div>
</div>
<div class="col-4 ">
<div class="bg-gray-4 rounded-3 cursor-pointer">
<img src="./dist/assets/imgs/Navbar/ora_ddr5_laptop.png" alt="ora img" class=""/>
<p class="fs-7 fw-600 mb-0 text-a-color text-center pb-1">Ora 32GB DDR5</p>
</div>
</div>
</div>
</div>
<div id="desktop" class="container tab-pane fade">
<div class="row">
<div class="col-4">
<div class="bg-gray-4 rounded-3 cursor-pointer">
<img src="./dist/assets/imgs/Navbar/ora_ddr4_desktop.png" alt="ora img" class=""/>
<p class="fs-7 fw-600 mb-0 text-a-color text-center pb-1">Ora 8GB DDR4</p>
</div>
</div>
<div class="col-4">
<div class="bg-gray-4 rounded-3 cursor-pointer">
<img src="./dist/assets/imgs/Navbar/ora_ddr4_desktop.png" alt="ora img" class=""/>
<p class="fs-7 fw-600 mb-0 text-a-color text-center pb-1">Ora 16GB DDR4</p>
</div>
</div>
<div class="col-4">
<div class="bg-gray-4 rounded-3 cursor-pointer">
<img src="./dist/assets/imgs/Navbar/ora_ddr4_desktop.png" alt="ora img" class=""/>
<p class="fs-7 fw-600 mb-0 text-a-color text-center pb-1">Ora 32GB DDR4</p>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="./support.html" class="satoshi_font">SUPPORT</a></li> <li><a href="./support.html" class="satoshi_font">SUPPORT</a></li>
<li><a href="./press.html" class="satoshi_font">PRESS</a></li> <li><a href="./press.html" class="satoshi_font">PRESS</a></li>
<li><a href="./index1.html" class="satoshi_font">COMING SOON</a></li> <li><a href="./index1.html" class="satoshi_font">COMING SOON</a></li>
@@ -236,16 +362,16 @@ function navINIT() {
}) })
$(".main-menu nav ul").find("li").each(function () { // $(".main-menu nav ul").find("li").each(function () {
var current = window.location.pathname; // var current = window.location.pathname;
var $this = $(this).find("a"); // var $this = $(this).find("a");
if (current != "/") { // if (current != "/") {
if ($this.attr('href').indexOf(current) !== -1) { // if ($this.attr('href').indexOf(current) !== -1) {
$(this).addClass('active_nav'); // $(this).addClass('active_nav');
} // }
} // }
}) // })
// destroy localstorage data // destroy localstorage data
let loc_path = '/productdetails.html'; let loc_path = '/productdetails.html';
@@ -265,27 +391,47 @@ function navINIT() {
let $nav_img = "../dist/assets/imgs/anwi-logo-1.png"; let $nav_img = "../dist/assets/imgs/anwi-logo-1.png";
let $footer_img = "../dist/assets/imgs/anwi-logo-2.png"; let $footer_img = "../dist/assets/imgs/anwi-logo-2.png";
let $scrool_top_img = "../dist/assets/imgs/Home/rocket-footer.png"; let $scrool_top_img = "../dist/assets/imgs/Home/rocket-footer.png";
let $about_pg = $("body").hasClass("about_page");
if($about_pg == true){
debugger
$(".main-menu").find("nav ul li a").addClass("text-dark");
let img_src = `./dist/assets/imgs/anwi-logo-1.png`;
$(".logo-menu-wrap").find("a img").attr("src",img_src);
$(".header-bottom").addClass("sticky-bar stick");
$("body.about_page").find(".header-large-device").find(".header-action-wrap").find(".same-style").find("svg").find("path").attr("fill","#000");
}
if ($body_pg == true) { if ($body_pg == true) {
$(".header-large-device").find(".logo-menu-wrap .logo").find("a").attr("href", $hm_pg); $(".header-large-device").find(".logo-menu-wrap .logo").find("a").attr("href", $hm_pg);
$(".header-large-device").find(".logo-menu-wrap .logo").find("a img").attr("src", $nav_img); $(".header-large-device").find(".logo-menu-wrap .logo").find("a img").attr("src", $nav_img);
$(".mobile-logo").find("a").attr("href", $hm_pg); $(".mobile-logo").find("a").attr("href", $hm_pg);
$(".mobile-logo").find("a img").attr("src", $nav_img); $(".mobile-logo").find("a img").attr("src", $nav_img);
$("body.services_page").find(".header-large-device").find(".header-action-wrap").find(".same-style").find("svg").find("path").attr("fill","#000");
$(".main-menu").find("nav ul").find("li a").each(function () { $(".main-menu").find("nav ul").find("li a").each(function () {
$(this).addClass("text-dark")
$(".header-bottom").addClass("sticky-bar stick");
let $arc = $(this).attr("href"); let $arc = $(this).attr("href");
let $spcial_char = $arc.includes("./"); let $spcial_char = $arc.includes("./");
if ($spcial_char === true) { if ($spcial_char === true) {
let $refarence = `.${$arc}` let $refarence = `.${$arc}`
$(this).attr("href", $refarence); $(this).attr("href", $refarence);
} }
$(".same-style").find("a").each(function () {
let $arc1 = $(this).attr("href"); });
let $spcial_char1 = $arc1.includes("./"); $(".same-style").find("a").each(function () {
if ($spcial_char1 === true) { let $arc1 = $(this).attr("href");
let $refarence1 = `.${$arc1}` let $spcial_char1 = $arc1.includes("./");
$(this).attr("href", $refarence1); if ($spcial_char1 === true) {
} let $refarence1 = `.${$arc1}`
}) $(this).attr("href", $refarence1);
}
})
$(".tab-content").find("img").each(function(){
let $img_src = $(this).attr("src");
let $img_src1 = $img_src.includes("./");
if ($img_src1 === true) {
let $refarenceimg1 = `.${$img_src}`;
$(this).attr("src", $refarenceimg1);
}
}); });
$(".clickable-mainmenu-wrap").find("nav ul").find("li a").each(function () { $(".clickable-mainmenu-wrap").find("nav ul").find("li a").each(function () {
let $arc_mbil = $(this).attr("href"); let $arc_mbil = $(this).attr("href");
+39
View File
@@ -1927,4 +1927,43 @@ background: linear-gradient(75deg, rgb(56 89 118) 51%, rgb(107 18 111) 89%)
} }
.product_card_section .col-sm-4{ .product_card_section .col-sm-4{
margin-top:100px; margin-top:100px;
}
/* SECTION VERTICAL TABS */
#experienceTab.nav-pills .nav-link.active {
color: rgb(3, 41, 90) !important;
background-color: transparent;
border-radius: 0px;
border-left: 3px solid #191e71;
}
#experienceTab.nav-pills .nav-link {
border-radius: 0px;
line-height: 10px;
color: rgb(3, 41, 90) !important;
border-left: 3px solid rgb(222, 222, 222);
}
.date-range {
letter-spacing: 0.01em;
color: var(--theme-gray);
}
/* STUB LINKS */
a {
color: var(--theme-gray);
transition: 0.3s eas-in-out;
}
a:hover {
color: var(--theme-yellow);
}
.tab-content img{
width: 100%;
min-width:120px;
}
.w-250{
width: 250px;
}
.w-500{
width: 500px;
} }
+1 -1
View File
@@ -347,7 +347,7 @@
<div class="card h-100 mx-1 text-center bg-gray-4 border-0 top_sell"> <div class="card h-100 mx-1 text-center bg-gray-4 border-0 top_sell">
<div class="card-body"> <div class="card-body">
<img src="./dist/assets/imgs/allin_imgs/32gb_laptop.png" class="w-100"/> <img src="./dist/assets/imgs/allin_imgs/32gb_laptop.png" class="w-100"/>
<p class="mb-0 fs-7 py-2">oooooooooooooooooooDDR4 <br> 3200MHz Laptop Memory</p> <p class="mb-0 fs-7 py-2">ORA DDR4 <br> 3200MHz Laptop Memory</p>
<p class="fw-600 text-primary mb-0">Buy Now</p> <p class="fw-600 text-primary mb-0">Buy Now</p>
<p class="selling_product d-none" <p class="selling_product d-none"
data_name="ORA 32GB DDR4 3200MHz Laptop RAM " data_name="ORA 32GB DDR4 3200MHz Laptop RAM "