https://github.com/yakedev/ek-responsive-menu

https://github.com/yakedev/ek-responsive-menu

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/yakedev/ek-responsive-menu
• Owner: YakeDev
• Created: 2024-09-09T10:09:12.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-09-09T10:27:11.000Z (4 months ago)
• Last Synced: 2024-09-09T12:30:27.151Z (4 months ago)
• Size: 1.95 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Responsive Menu

A simple responsive menu toggle component for web applications.

## Installation

Install the package via NPM:

```bash

npm install responsive-menu

```

## Usage

### Importing the Module

First, import the `toggleMenu` function from the module in your JavaScript file:

```javascript

import { toggleMenu } from "responsive-menu";

```

### HTML Structure

Ensure that your HTML contains the necessary structure for the menu:

```html

  


  


    
About

    
Services

    
Contact

  


```

### Initialize the Menu

Once the DOM is loaded, you can initialize the responsive menu by calling the `toggleMenu` function:

```javascript

document.addEventListener("DOMContentLoaded", () => {

  toggleMenu();

});

```

### Example CSS (Optional)

Here’s an example of some basic CSS you can use to style your menu:

```css

nav {

  display: flex;

  flex-direction: row-reverse;

  background-color: rgb(0, 0, 0);

  padding: 20px;

  height: 100px;

  z-index: 10;

  overflow: hidden;

  transition: all 1s ease 0s;

}

.menu {

  visibility: hidden;

  display: flex;

  flex-direction: column;

}

.menu.visible {

  visibility: visible;

}

.menu_toggle {

  height: 50px;

  width: 50px;

  cursor: pointer;

  position: relative;

}

```

## License

This project is licensed under the ISC License.

```

```

```

```