Hugging Face's logo

Spaces:
usergit
/
hoverific-delight
Running

App Files Community
usergit commited on
Commit
a82c9d3
·
verified ·
1 Parent(s): 471b7bd

crexte this expanding hover menu from image refernce

Browse files
Files changed (1) hide show
  1. index.html +85 -35
index.html CHANGED
@@ -8,47 +8,71 @@
8
  <script src="https://unpkg.com/feather-icons"></script>
9
  <style>
10
  body {
11
- font-family: Arial, sans-serif;
12
  display: flex;
13
  justify-content: center;
14
  align-items: center;
15
  height: 100vh;
16
  margin: 0;
17
- background-color: #f5f5f5;
18
- background-image: url('https://huggingface.co/spaces/usergit/hoverific-delight/resolve/main/images/photo_2025-10-03_17-49-57.jpg');
19
- background-size: cover;
20
- background-position: center;
21
  }
22
- .menu-container {
23
  display: flex;
24
  flex-direction: column;
25
- gap: 15px;
26
- width: 300px;
27
  }
28
 
29
  .menu-item {
 
30
  display: flex;
31
  align-items: center;
32
- padding: 12px;
33
- background-color: white;
34
- border-radius: 8px;
35
- box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 
36
  cursor: pointer;
 
 
 
 
 
 
 
 
37
  }
38
 
39
  .menu-item i {
40
- margin-right: 10px;
41
- color: #6b46c1;
 
 
42
  }
43
 
44
  .submenu {
 
 
 
 
45
  display: none;
46
- margin-top: 5px;
47
- margin-left: 30px;
48
- background-color: white;
49
- border-radius: 8px;
50
- box-shadow: 0 2px 5px rgba(0,0,0,0.1);
51
  overflow: hidden;
 
 
 
 
 
 
 
 
 
 
 
 
 
52
  }
53
 
54
  .menu-item:hover .submenu {
@@ -56,39 +80,65 @@
56
  }
57
 
58
  .submenu a {
59
- display: block;
60
- padding: 10px 15px;
 
61
  color: #333;
62
  text-decoration: none;
63
- transition: background-color 0.2s;
 
64
  }
65
 
66
  .submenu a:hover {
67
- background-color: #f0f0f0;
 
 
 
 
 
 
68
  }
69
- </style>
70
  </head>
71
  <body>
72
  <div class="menu-container">
73
  <div class="menu-item">
74
- <i data-feather="star"></i>
75
- <span>Featured Items</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
76
  <div class="submenu">
77
- <a href="#"><i data-feather="gift"></i> Special Offers</a>
78
- <a href="#"><i data-feather="trending-up"></i> Trending Now</a>
79
- <a href="#"><i data-feather="award"></i> Staff Picks</a>
80
  </div>
81
  </div>
82
  <div class="menu-item">
83
- <i data-feather="image"></i>
84
- <span>Gallery</span>
85
  <div class="submenu">
86
- <a href="#"><i data-feather="camera"></i> Photos</a>
87
- <a href="#"><i data-feather="video"></i> Videos</a>
88
- <a href="#"><i data-feather="grid"></i> Collections</a>
89
  </div>
90
  </div>
91
- </div>
92
  <script>
93
  feather.replace();
94
  </script>
 
8
  <script src="https://unpkg.com/feather-icons"></script>
9
  <style>
10
  body {
11
+ font-family: 'Segoe UI', sans-serif;
12
  display: flex;
13
  justify-content: center;
14
  align-items: center;
15
  height: 100vh;
16
  margin: 0;
17
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
 
 
18
  }
19
+ .menu-container {
20
  display: flex;
21
  flex-direction: column;
22
+ gap: 20px;
23
+ width: 280px;
24
  }
25
 
26
  .menu-item {
27
+ position: relative;
28
  display: flex;
29
  align-items: center;
30
+ padding: 15px 20px;
31
+ background: rgba(255, 255, 255, 0.1);
32
+ backdrop-filter: blur(10px);
33
+ border-radius: 12px;
34
+ box-shadow: 0 4px 15px rgba(0,0,0,0.1);
35
  cursor: pointer;
36
+ transition: all 0.3s ease;
37
+ color: white;
38
+ border: 1px solid rgba(255,255,255,0.2);
39
+ }
40
+
41
+ .menu-item:hover {
42
+ background: rgba(255, 255, 255, 0.2);
43
+ transform: translateY(-3px);
44
  }
45
 
46
  .menu-item i {
47
+ margin-right: 15px;
48
+ color: white;
49
+ width: 24px;
50
+ text-align: center;
51
  }
52
 
53
  .submenu {
54
+ position: absolute;
55
+ left: 100%;
56
+ top: 0;
57
+ width: 200px;
58
  display: none;
59
+ background: rgba(255, 255, 255, 0.9);
60
+ border-radius: 12px;
61
+ box-shadow: 0 10px 25px rgba(0,0,0,0.15);
 
 
62
  overflow: hidden;
63
+ transform-origin: left center;
64
+ animation: scaleIn 0.2s ease-out forwards;
65
+ }
66
+
67
+ @keyframes scaleIn {
68
+ 0% {
69
+ transform: scaleX(0.8);
70
+ opacity: 0;
71
+ }
72
+ 100% {
73
+ transform: scaleX(1);
74
+ opacity: 1;
75
+ }
76
  }
77
 
78
  .menu-item:hover .submenu {
 
80
  }
81
 
82
  .submenu a {
83
+ display: flex;
84
+ align-items: center;
85
+ padding: 12px 15px;
86
  color: #333;
87
  text-decoration: none;
88
+ transition: all 0.2s ease;
89
+ border-bottom: 1px solid rgba(0,0,0,0.05);
90
  }
91
 
92
  .submenu a:hover {
93
+ background: #f8f9fa;
94
+ padding-left: 20px;
95
+ }
96
+
97
+ .submenu a i {
98
+ color: #667eea;
99
+ font-size: 14px;
100
  }
101
+ </style>
102
  </head>
103
  <body>
104
  <div class="menu-container">
105
  <div class="menu-item">
106
+ <i data-feather="home"></i>
107
+ <span>Dashboard</span>
108
+ <div class="submenu">
109
+ <a href="#"><i data-feather="bar-chart-2"></i> Analytics</a>
110
+ <a href="#"><i data-feather="activity"></i> Statistics</a>
111
+ <a href="#"><i data-feather="clock"></i> Recent</a>
112
+ </div>
113
+ </div>
114
+ <div class="menu-item">
115
+ <i data-feather="shopping-bag"></i>
116
+ <span>Products</span>
117
+ <div class="submenu">
118
+ <a href="#"><i data-feather="plus-circle"></i> Add New</a>
119
+ <a href="#"><i data-feather="list"></i> Inventory</a>
120
+ <a href="#"><i data-feather="tag"></i> Categories</a>
121
+ </div>
122
+ </div>
123
+ <div class="menu-item">
124
+ <i data-feather="users"></i>
125
+ <span>Customers</span>
126
  <div class="submenu">
127
+ <a href="#"><i data-feather="user-plus"></i> New Customers</a>
128
+ <a href="#"><i data-feather="user-check"></i> Loyalty</a>
129
+ <a href="#"><i data-feather="credit-card"></i> Payments</a>
130
  </div>
131
  </div>
132
  <div class="menu-item">
133
+ <i data-feather="settings"></i>
134
+ <span>Settings</span>
135
  <div class="submenu">
136
+ <a href="#"><i data-feather="lock"></i> Security</a>
137
+ <a href="#"><i data-feather="bell"></i> Notifications</a>
138
+ <a href="#"><i data-feather="database"></i> Backup</a>
139
  </div>
140
  </div>
141
+ </div>
142
  <script>
143
  feather.replace();
144
  </script>