good

iganna · Oct 10, 2024 · 9dd35b5 · 9dd35b5
1 parent 7f7bdd3
commit 9dd35b5
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 8 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -7,5 +7,35 @@
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
-    <!-- Кнопка для открытия меню на мобильных устройствах -->
-    <div class="
+    <div class="container">
+        <nav class="sidebar">
+            <ul>
+                <li><a href="#home">Home</a></li>
+                <li>
+                    <a href="javascript:void(0)" class="dropdown-btn">Alignment</a>
+                    <ul class="dropdown-container">
+                        <li><a href="#msa">MSA</a></li>
+                        <li><a href="#snp">SNP calling</a></li>
+                        <li><a href="#sv">SV calling</a></li>
+                    </ul>
+                </li>
+                <li>
+                    <a href="javascript:void(0)" class="dropdown-btn">Visualisation</a>
+                    <ul class="dropdown-container">
+                        <li><a href="#dotplot">dotplot</a></li>
+                        <li><a href="#msaplot">msaplot</a></li>
+                        <li><a href="#orfFinder">orfFinder</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </nav>
+
+        <div class="content">
+            <h1>Welcome to the Content Section</h1>
+            <p>Here, content will appear based on your navigation selection.</p>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/docs/script.js b/docs/script.js
@@ -3,4 +3,9 @@ document.querySelectorAll('.dropdown-btn').forEach(button => {
         this.classList.toggle('active');  // Добавляем или убираем класс active для поворота галочки
         let dropdownContent = this.nextElementSibling;
         if (dropdownContent.style.display === "block") {
-            dropdownContent.style.display 
+            dropdownContent.style.display = "none"; // Скрываем подменю
+        } else {
+            dropdownContent.style.display = "block"; // Показываем подменю
+        }
+    });
+});
diff --git a/docs/style.css b/docs/style.css
@@ -2,7 +2,7 @@
     --main-bg-color: #243642;    /* Основной цвет фона */
     --submenu-bg-color: #135D66; /* Цвет фона подменю */
     --text-color: white;         /* Основной цвет текста */
-    --hover-text-color: #FF9EAA; /* Цвет текста при наведении */
+    --hover-text-color: #FEAE6F; /* Цвет текста при наведении */
 }
 
 * {
@@ -25,9 +25,67 @@ body {
     padding-top: 20px;
     height: 100vh;
     position: fixed;
-    transition: transform 0.3s ease; /* Плавный переход для боковой панели */
-    transform: translateX(0); /* По умолчанию панель видна */
 }
 
-.sidebar.hidden {
-    transform: translateX(-100%); /* Скрываем панель п�
+.sidebar ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.sidebar ul li {
+    text-align: left;
+}
+
+.sidebar ul li a {
+    padding: 10px;
+    text-decoration: none;
+    color: var(--text-color);
+    display: flex;
+    align-items: center;
+    transition: color 0.3s ease;
+    position: relative;  /* Добавляем относительное позиционирование */
+}
+
+.sidebar ul li a:hover {
+    color: var(--hover-text-color);
+}
+
+.dropdown-container {
+    display: none;
+    background-color: var(--submenu-bg-color);
+    padding-left: 10px; /* Отступ для всего контейнера */
+}
+
+.dropdown-container a {
+    padding: 10px 20px; /* Внутренний отступ для элементов подменю */
+    color: var(--text-color);
+    text-decoration: none;
+    display: block;
+}
+
+.dropdown-container a:hover {
+    background-color: var(--hover-bg-color); /* Можно задать hover фон для наглядности */
+    color: var(--hover-text-color); 
+}
+
+
+/* Галочка для заголовков меню рядом с текстом */
+.dropdown-btn:after {
+    content: '\25B6'; /* Символ треугольника (галочка) */
+    font-size: 12px;
+    margin-left: 10px; /* Отступ слева от текста */
+    transition: transform 0.3s;
+}
+
+.dropdown-btn.active:after {
+    transform: rotate(90deg); /* Поворачиваем треугольник при раскрытии */
+}
+
+.content {
+    margin-left: 260px;
+    padding: 20px;
+}
+
+h1 {
+    color: #333;
+}