Skip to content

README.md

Latest commit

 

History

History
126 lines (91 loc) · 2.86 KB

README.md

File metadata and controls

126 lines (91 loc) · 2.86 KB

📚 Documentation Website

This repository contains a clean, lightweight, and fully static documentation website built with HTML, CSS, and vanilla JavaScript. It features a responsive sidebar navigation system with collapsible menus, smooth scrolling, and automatic submenu activation for deeper documentation pages.

The project is ideal for:

  • Technical documentation
  • Tutorials and programming guides
  • Course materials
  • Project wikis
  • Internal documentation systems

🗂️ Project Structure

.
├── index.html
├── exemplo1.html
└── add-ins/
    ├── style.css
    └── script.js
  • index.html — Main homepage
  • exemplo1.html — Subpage with documentation sections
  • style.css — Styling for layout, sidebar, containers, etc.
  • script.js — Sidebar behavior, dropdown logic, and smooth scrolling

✨ Features

🔹 Responsive Sidebar Navigation

  • Expand/collapse sidebar
  • Multi-level dropdown menus
  • Auto‑expanding menu for active pages
  • SVG icons with rotation effects

🔹 Smooth Scrolling

All anchor links linking to documentation sections scroll smoothly for better UX.

🔹 Automatic Menu Activation

When a page such as exemplo1.html loads, the JS automatically expands the relevant sidebar section so the user clearly sees where they are.

🔹 Lightweight and Dependency-Free

No frameworks and no libraries — everything runs on pure HTML, CSS, and JavaScript.

🚀 Running the Project

✔ Option 1: Open Directly

You can open the site by simply clicking:

index.html

✔ Option 2: Run a Local Server

Recommended if using images or advanced paths.

python -m http.server 5500

Then open:

http://localhost:5500

📄 Pages

index.html

Simple homepage with placeholder content.

exemplo1.html

Documentation page featuring:

  • Introduction
  • Getting Started
  • Syntax Overview
  • Code Examples
  • Best Practices

Each section is linked to sidebar anchors.

🧠 JavaScript Behavior (script.js)

Sidebar Toggle

Expands or collapses the entire sidebar.

Dropdown Menus

  • Only one submenu stays open at a time.
  • Nested menus expand on click.

Auto‑Activation

Detects if exemplo1.html contains nested menus and expands them automatically.

Smooth Scrolling

Any link starting with # will scroll smoothly to its target.

🎨 Customization

You can easily modify:

  • Colors / spacing / typography → style.css
  • Sidebar items → index.html / exemplo1.html
  • Icon SVGs → replace inside HTML
  • Animation timings → CSS transitions

💡 Ideal Use Cases

  • Static documentation pages
  • Internal company documentation
  • Classroom notes & guides
  • Project wikis
  • API or coding tutorials

📜 License

Free to use, modify, and distribute for personal or educational projects.