Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kenangundogan/javascript-navigation-tabs

Javascript navigation tabs - tiny and simple.
https://github.com/kenangundogan/javascript-navigation-tabs

javascript javascript-navigation-menu navigation navigation-tab navigation-tabs

Last synced: about 22 hours ago
JSON representation

Javascript navigation tabs - tiny and simple.

Host: GitHub
URL: https://github.com/kenangundogan/javascript-navigation-tabs
Owner: kenangundogan
License: mit
Created: 2021-04-06T15:56:55.000Z (almost 4 years ago)
Default Branch: main
Last Pushed: 2021-04-10T20:46:44.000Z (almost 4 years ago)
Last Synced: 2024-11-18T15:45:09.398Z (2 months ago)
Topics: javascript, javascript-navigation-menu, navigation, navigation-tab, navigation-tabs
Language: SCSS
Homepage:
Size: 703 KB
Stars: 1
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

        # Javascript Navigation Tabs

Javascript navigation tabs - tiny and simple.

## Status

[![JS gzip size](https://img.badgesize.io/kenangundogan/javascript-navigation-tabs/main/dist/script/script.js?compression=gzip&label=JS%20gzip%20size)](https://github.com/kenangundogan/javascript-navigation-tabs/blob/main/dist/script/script.js)

[![JS Brotli size](https://img.badgesize.io/kenangundogan/javascript-navigation-tabs/main/dist/script/script.js?compression=brotli&label=JS%20Brotli%20size)](https://github.com/kenangundogan/javascript-navigation-tabs/blob/main/dist/script/script.js)

[![CSS gzip size](https://img.badgesize.io/kenangundogan/javascript-navigation-tabs/main/dist/style/style.css?compression=gzip&label=CSS%20gzip%20size)](https://github.com/kenangundogan/javascript-navigation-tabs/blob/main/dist/style/style.css)

[![CSS Brotli size](https://img.badgesize.io/kenangundogan/javascript-navigation-tabs/main/dist/style/style.css?compression=brotli&label=CSS%20Brotli%20size)](https://github.com/kenangundogan/javascript-navigation-tabs/blob/main/dist/style/style.css)

![Javascript Navigation Tabs](https://raw.githubusercontent.com/kenangundogan/javascript-navigation-tabs/main/asset/javascript_navigation_tabs-cover.png)

## Options

Option | Type | Default | Description | Example

------ | ---- | ------- | ----------- | -----------

element | string or object |  | id or class DOM element | [Example](https://kenangundogan.github.io/javascript-navigation-tabs)

event | string | click | add event listener | [Example](https://kenangundogan.github.io/javascript-navigation-tabs)

direction | string | top | navigation position | [Example](https://kenangundogan.github.io/javascript-navigation-tabs)

activeTab | int |  | active item to be open at startup | [Example](https://kenangundogan.github.io/javascript-navigation-tabs)

## Usage example

### Script

```javascript

var navigationtabs = new NavigationTabs({

    element: "#top-position",

    event: "click",

    direction: "top",

    activeTab: 1

});

```

### View

```html



    

        ...

        ...

        

    

    

        ...

        ...

        

    



```

## Copyright and license

Designed and built by [Kenan Gündoğan](https://www.linkedin.com/in/kenangundogan/)




2021 Currently - Code released under the [MIT License](https://github.com/kenangundogan/javascript-navigation-tabs/blob/master/LICENSE)

Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/)