Added new features like JavaScript interactions

css/leon.css

@@ -1,4 +1,11 @@
+
+
+
+
+
+
 /* Start Variables */
+
 :root {
   --main-color: #10cab7;
   --secondary-color: #2c4755;
@@ -83,9 +90,9 @@ body {
 .header .links {
   position: relative;
 }
-.header .links:hover .icon span:nth-child(2) {
+/* .header .links:hover .icon span:nth-child(2) {
   width: 100%;
-}
+} */
 .header .links .icon {
   width: 30px;
   display: flex;
@@ -128,9 +135,9 @@ body {
   right: 5px;
   top: -20px;
 }
-.header .links:hover ul {
+/* .header .links:hover ul {
   display: block;
-}
+} */
 .header .links ul li a {
   display: block;
   padding: 15px;
@@ -419,3 +426,43 @@ body {
   color: var(--main-color);
 }
 /* End Footer */
+
+
+
+
+.links ul {
+  display: none; /* مخفي بشكل افتراضي */
+  background: #fff;
+  position: absolute;
+  top: 50px; /* حسب مكان الأيقونة عندك */
+  right: 20px;
+  padding: 10px;
+  list-style: none;
+  box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
+}
+
+.links ul.show {
+  display: block;
+}
+.header .icon span:nth-child(2).show {
+  width: 100%;
+} 
+#backToTop {
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  background-color: var(--main-color);
+  color: white;
+  border: none;
+  padding: 12px 15px;
+  border-radius: 50%;
+  font-size: 20px;
+  cursor: pointer;
+  display: none; /* مخفي في البداية */
+  transition: opacity 0.5s ease;
+  z-index: 999;
+}
+
+#backToTop:hover {
+  background-color: #555;
+}

index.html

@@ -24,12 +24,12 @@
       <div class="container">
         <img class="logo" src="images/logo.png" alt="" />
         <div class="links">
-          <span class="icon">
+          <span class="icon" id="menuToggle">
             <span></span>
             <span></span>
             <span></span>
           </span>
-          <ul>
+          <ul id="menuList" >
             <li><a href="#services">Services</a></li>
             <li><a href="#portfolio">Portfolio</a></li>
             <li><a href="#about">About</a></li>
@@ -208,5 +208,9 @@ <h2 class="special-heading">Contact</h2>
     <!-- Start Footer -->
     <div class="footer">&copy; 2021 <span>Leon</span> All Right Reserved</div>
     <!-- End Footer -->
+<button id="backToTop" title="Go to top">↑</button>
+
+
+    <script src="js/main.js"></script>
   </body>
 </html>

js/main.js

@@ -0,0 +1,42 @@
+
+  const menuToggle = document.getElementById('menuToggle');
+const menuList = document.getElementById('menuList');
+const menuChild = document.querySelector('.icon span:nth-child(2)')
+
+  // عند الضغط على الأيقونة، يظهر أو يختفي
+  menuToggle.addEventListener('click', (e) => {
+    e.stopPropagation(); // يمنع غلق القائمة فوراً عند الضغط على الأيقونة
+    menuList.classList.toggle('show');
+    menuChild.classList.toggle('show');
+  });
+
+  // إذا ضغط المستخدم في أي مكان آخر، نخفي القائمة
+  document.addEventListener('click', (e) => {
+    if (!menuList.contains(e.target) && !menuToggle.contains(e.target)) {
+        menuList.classList.remove('show');
+         menuChild.classList.toggle('show');
+    }
+  });
+
+//   
+// زر الرجوع للأعلى
+const backToTopBtn = document.getElementById("backToTop");
+
+// عند التمرير لأسفل 700px نظهر الزر
+window.addEventListener("scroll", () => {
+  if (window.scrollY > 700) {
+    backToTopBtn.style.display = "block";
+  } else {
+    backToTopBtn.style.display = "none";
+  }
+});
+
+// عند الضغط على الزر نصعد لأعلى بسلاسة
+backToTopBtn.addEventListener("click", () => {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth"
+  });
+});
+
+