Merge pull request #1001 from MaragathaMeenakshi/dev_branch

Changes made in category list dropdown
arghadipmanna101 · Jun 11, 2024 · 7c7fbc6 · 7c7fbc6
2 parents c58fe54 + b11d53f
commit 7c7fbc6
Show file tree

Hide file tree

Showing 4 changed files with 674 additions and 502 deletions.
diff --git a/css/index.css b/css/index.css
@@ -27,6 +27,7 @@ body {
 
 #categorylist-wrapper {
   margin-top: 8px;
+  width: -webkit-fill-available;
 }
 
 @media screen and (max-width: 770px) {
@@ -60,10 +61,9 @@ body {
   width: 100%;
   min-width: 1000px;
   box-shadow: 0 0 10px rgb(87, 110, 172);
-
 }
 
-.categories>li {
+ .categories>li {
   position: static;
   display: inline-block;
   padding: 20px 15px;
@@ -72,6 +72,8 @@ body {
 
 .categories li a {
   text-decoration: none;
+  color: black;
+  font-weight: 500;
 }
 
 .categories>li>ul {
@@ -91,33 +93,6 @@ body {
   z-index: 500;
 }
 
-.categories>li:hover>ul {
-  display: flex;
-  justify-content: left;
-  align-items: stretch;
-}
-
-.categories>li:hover {
-  background-color: #bac8f6;
-  transition: all 0.5s;
-  border-radius: 20px;
-}
-
-.categories>li:hover>ul>li {
-  margin: 15px 0;
-  flex: 1 1 200px;
-  list-style-type: none;
-}
-
-.categories>li:hover>ul>li li {
-  list-style-type: none;
-  margin: 15px 0;
-  color: rgb(88, 116, 194);
-}
-
-.categories>li:hover>ul li li:hover {
-  color: rgb(112, 112, 166);
-}
 .categories li ul li img{
   display: none;
 }
@@ -149,6 +124,105 @@ body {
   color: #333333;
 }
 
+.dropdownbox {
+  /* left:20%; */
+  display: none;
+  position: absolute;
+  top:30%;
+  width:240px;
+  /* height:528px; */
+  box-shadow: 0 8px 8px 1px rgba(0, 0, 0, .3);
+  border-radius: 8px;
+  background-color: #fff;
+  color: rgb(43, 42, 42);
+  line-height: 20px;
+  font-size: 12px;
+  z-index: 1000;
+}
+.grocery{
+  left:5%;
+}
+.Mobiles{
+  left: 10%;
+}
+.Fashion{
+  left:20%;
+}
+.electronics{
+  left:30%;
+}
+.home-furniture{
+  left:40%;
+}
+.appliances{
+  left: 50%;
+}
+.travel{
+  left:65%;
+}
+.beauty{
+  left:70%;
+}
+.twowheelers{
+  left:80%;
+}
+
+.dropdownbox > div > div + div{
+  display: none;
+  position: absolute;
+  top:0%;
+  width:240px;
+  left: 100%;
+  box-shadow: 0 8px 8px 1px rgba(0, 0, 0, .3);
+  border-radius: 8px;
+  background-color: #fff;
+  line-height: 20px;
+}
+
+.dropdownbox > div:hover > div + div{
+  display: block;
+}
+
+.sidearrow{
+  display: none;
+  position: absolute;
+  right: 30px;
+  height: 6px;
+  width: 6px;
+  margin: 15px 0 15px 0;
+  border-color: #111112;
+  border-style: solid;
+  border-width: 0 1px 1px 0;
+  transform-origin: 50% 50%;
+  transform: translateY(75%) rotate(-45deg);
+}
+.dropdownbox > div{
+  display: flex;
+}
+.dropdownbox > div > div:not(.subdropdown){
+  padding: 12px 16px;
+}
+.dropdownbox > div:hover > div:not(.subdropdown){
+  font-weight:bold;
+}
+.dropdownbox > div:hover{
+  background-color:#cbdcf7;
+}
+.dropdownbox > div:hover >.sidearrow{
+  display: block;
+}
+.subdropdown > div:first-child {
+  font-weight: bold;
+}
+.dropdownbox > div > div > div{
+  padding: 12px 16px;
+  font-size: 12px;
+}
+
+.subdropdown > div:hover{
+  font-weight: bold;
+}
+
 /*adding transition property to the images of the cateogory-grid section*/
 #category-grid img {
   transition: transform 0.3s ease-in-out;
@@ -239,12 +313,12 @@ body {
   width: 100%;
   height: auto;
   transition: transform 0.3s ease-in-out;
-}
+} 
 
 #img-box img:hover {
   transform: scale(1.2);
   opacity: 0.82;
-}
+} */
 
 /* product best for you */
 #s1-product .products {