Magic Navigation Tabs Menu
A small modal example with HTML, CSS, JS, and a navigation bar.
htmlcssjavascript
index.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Simple Modal Example</title>
6 <link rel="stylesheet" href="./style.css">
7</head>
8<body>
9
10 <!-- Navigation -->
11 <ul class="navigation">
12 <li class="active">
13 <a href="#">
14 <span class="icon">🏠</span>
15 <span class="text">Home</span>
16 </a>
17 </li>
18 <li>
19 <a href="#">
20 <span class="icon">👤</span>
21 <span class="text">Profile</span>
22 </a>
23 </li>
24 <li>
25 <a href="#">
26 <span class="icon">💬</span>
27 <span class="text">Messages</span>
28 </a>
29 </li>
30 <li>
31 <a href="#">
32 <span class="icon">📷</span>
33 <span class="text">Photos</span>
34 </a>
35 </li>
36 <li>
37 <a href="#">
38 <span class="icon">⚙️</span>
39 <span class="text">Settings</span>
40 </a>
41 </li>
42 </ul>
43
44 <!-- Modal Trigger -->
45 <button id="openModal">Open Modal</button>
46
47 <!-- Modal -->
48 <div id="modal" class="modal">
49 <div class="modal-content">
50 <span id="closeModal" class="close">×</span>
51 <h2>Hello Modal</h2>
52 <p>This is a simple modal example.</p>
53 </div>
54 </div>
55
56 <script src="./script.js"></script>
57</body>
58</html>