# mynav
> Navigationbuilder for Menus
Latest version **1.1.8** (published 2019-12-03) · MIT license · 0 weekly downloads
## Install
```sh
npm install mynav
pnpm add mynav
yarn add mynav
bun add mynav
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.1.8 |
| Published | 2019-12-03 |
| First published | 2019-08-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 102.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jürgen Torsten Lehmann |
| Maintainers | tlehmann |
| Keywords | nav, navigation, navbar |
## Links
- npm: https://www.npmjs.com/package/mynav
- npm.io page: https://npm.io/package/mynav
## Alternatives
- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads
## Recent versions
- 1.1.8 (latest) — 2019-12-03
- 1.1.7 — 2019-12-03
- 1.1.6 — 2019-09-23
- 1.1.5 — 2019-09-23
- 1.1.4 — 2019-09-23
- 1.1.3 — 2019-09-23
- 1.1.2 — 2019-09-23
- 1.1.1 — 2019-09-23
- 1.1.0 — 2019-09-23
- 1.0.18 — 2019-09-22
- 1.0.17 — 2019-09-20
- 1.0.16 — 2019-09-16
- 1.0.15 — 2019-09-16
- 1.0.14 — 2019-09-16
- 1.0.13 — 2019-09-03
- … 13 more at https://npm.io/package/mynav/versions
## README
[Deutsche Beschreibung ist unten!](#deutsch)
[Video deutsch ](https://youtu.be/b9hgLoklm14)
# 1. What is myNav?
The library _mynav_ provides the possibility to create a __complete vertical navbar (menu)__ with a __one object__. From the individual entries of the menu, a corresponding function is called directly after clicking.
see [example](https://jsfiddle.net/tlehmann/y12p9d5o/) below:
Picture 1: [For Example](https://jsfiddle.net/tlehmann/y12p9d5o/)
# 2. Installation Guide
If you just want to take a look at the library _mynav_, go straight to the point [__2.1.1__](#2.1.1-for-testing-purposes-without-performing-the-installation-listed-in-chapter-2)
1. First install [nodejs](https://nodejs.org/en/)
2. Create a _package.json_ file in your working directory!
`npm init -y` or `npm init`
4. Install the package _mynav_
`npm i mynav`
# 2.1 integrate
There are several ways to include _mynav_ in your code.
## 2.1.1 For testing purposes, without performing the installation listed in Chapter 2
Create an HTML file _index.html_ and write the following lines in the _head_ tag:
...
...
Include the tag _mynav_ (` `) in the _body-tag_ and create a script with the following content, which you can insert below in _body-tag_ or enter in a separate script:
...
...
Start your website!
If you did everything right, it should look like this:
Picture 2: example [ jsfiddle.net](https://jsfiddle.net/tlehmann/37ouepzm/) [github](https://github.com/InnoGuide/mynav_link)
## 2.1.2 Local Installation
Perform the installation as in __2. Installation Guide__ described. Create an HTML file ___index.html___ and write the following lines in the _head_ tag:
...
...
...
...
Include the tag _mynav_ (``) in the _body-tag_ and create a script with the following content, which you can insert below in _body-tag_ or enter in a separate script:
...
...
Start your website!
If you did everything right, it should look like Picture 2.
Examplel [github](https://github.com/InnoGuide/mynav_local)
## 2.1.3 Webpack 4 installation
Please visit the following link [gitub](https://github.com/InnoGuide/mynav_for_webpack_4)
# 3. Configuration
When calling the constructor function, you can pass an object as an argument and thus initialize the entire navigation.
In the program flow, each individual property (for example, background, font family, menu items, etc.) can be changed later. If you pass the constructor function __no__ Object argument, the following default object works:
{
items:
[
[
{ item: 'Item 1'},
{ item: 'Item 1 1', func: () => {console.log('Item 1 1')}},
{ item: '--'},
{ item: 'Item 1 2', func: () => {console.log('Item 1 2')}}
],
{ item: 'Item 2', func: () => {console.log('Item 2')}}
],
trigger: 'click',
popupWidth:'150px',
fontFamily: 'monospace, sans-serif',
fontSize: '18px',
position: 'absolute',
top: '0',
offsetXpx: '0',
offsetYpx: '0',
navWidth: '90%',
navHeight: '50px',
color: 'white',
background: 'black',
colorHover:'white',
backgroundHover: 'gray',
colorActive: 'white',
backgroundActive: 'blue',
colorDisabled: 'gray',
backgroundDisabled: 'black',
borderColor: 'gray',
border: true,
logoImage: '',
logoText: 'LOGO
',
buttonText: 'login',
buttonVisible: true,
buttonFunction: () => {console.log('button pressed') },
searchButtonText: 'search',
searchButtonFunction: (inputValue) => {console.log('This is my text:', inputValue) },
searchVisible: true
}
## 3.1 Items
All navigation and control is described in the property ___items___ of the object.
The property ___items___ consists of an array, which consists of objects or other arrays (submenus). The topmost array describes the top horizontal menu structure. Here, each entry consists of an object, which is a string property ___item___ (menu identifier) and functions property ___func___, which is executed when the menu identifier is clicked.
__Example:__ [__items__](https://jsfiddle.net/tlehmann/4abngtuc/)
```
const HomeFunc = function(){window.open( 'https://www.w3schools.com','_blank')}
const ContactFunc = ()=>{document.body.style='margin: 0; background-color: green';
document.getElementById('myID').textContent='Home in Berlin'}
const MENU =
{
items:
[
{item: 'w3School', func: HomeFunc},
{item: 'About', func: ()=>document.getElementById('myID').textContent = 'Exapmle for Item'},
{item: 'kontakt', func: ContactFunc}
]
}
const navbar = new MyNavEntryPoint.MyNavBar(MENU);
```
Picture 3 [__Example__](https://jsfiddle.net/tlehmann/4abngtuc/)
## 3.2 Submenues
If a submenu is to be embedded in one place, then another __Array__ is inserted here instead of an object with the property types _item_ and _func_. Here, the first entry of the __Array__ is the entry point of the submenu and is located in the parent of the submenu. In the first entry, the _func_ property is ignored because this entry represents only the entry point of the submenu.
__Example:__ [submenues](https://jsfiddle.net/tlehmann/4qxmuktg/)
```
...
const MENU = {
items:
[
{item: 'w3School', func: HomeFunc},
{item: 'About', func: ()=>h1.textContent = 'Exapmle for Item'},
[ {item: 'Contact'},
{item:'kontakt Dresden', func:()=>h1.textContent='Büro Dresden'},
[ {item:'Contact Berlin' },
{item:'Pankow', func:()=>h1.textContent='Office Berlin Pankow' },
{item:'Treptow', func:()=>h1.textContent='Office Berlin Treptow' },
{item:'Mitte', func:()=>h1.textContent='Office Berlin Mitte' }
]
]
]
}
const navbar = new MyNavEntryPoint.MyNavBar(MENU);
...
```
Picture 4 [submenues](https://jsfiddle.net/tlehmann/4qxmuktg/)
## 3.3 Further properties of the property _Items_
### 3.3.1 Separator
By assigning a string __'--'__ `{item: '--'}` a separator is inserted at this point.
__Example:__ [Seperator](https://jsfiddle.net/tlehmann/upytz6r0/)
```
...
[ {item:'Contact Berlin' },
{item:'Pankow', func:()=>h1.textContent='Office Berlin Pankow' },
{item: '--'},
{item:'Treptow', func:()=>h1.textContent='Office Berlin Treptow' },
{item:'Mitte', func:()=>h1.textContent='Office Berlin Mitte' }
]
...
```
Picture 5 [Seperator](https://jsfiddle.net/tlehmann/upytz6r0/)
### 3.3.2 disabled
If an entry of the menu should not respond. For example, if you expand a submenu or execute the assigned _func_ function, the __true__ property can be assigned to the ___disabled___ property.
__Example:__ [disabled](https://jsfiddle.net/tlehmann/o9hu6qr4/)
```
...
[ {item: 'w3School', func: HomeFunc},
{item: 'About', disabled: true, func: ()=>h1.textContent = 'Exapmle for Item'},
[ {item: 'Contact'},
{item:'Contakt Dresden', func:()=>h1.textContent='Büro Dresden'},
[ {item:'Contact Berlin' },
{item:'Pankow', func:()=>h1.textContent='Office Berlin Pankow' },
{item: '--'},
{item:'Treptow', disabled: true, func:()=>h1.textContent='Office Berlin Treptow' },
{item:'Mitte', func:()=>h1.textContent='Office Berlin Mitte' }
]
]
]
...
```
Picture 6 [disabled](https://jsfiddle.net/tlehmann/o9hu6qr4/)
## 3.4 Assign and change the configuration in the program run
As in paragraph ___3. Configuration___ mentioned, you can also after calling the constructor method
`const mynav = new MyNavEntryPoint.MyNavBar(MENU);`
bzw. (_webpack_)
```
import { MyNavBar } from 'mynav';
const mynav = new MyNavBar();
```
all _Property's_ changed. To do this, simply access the _new constructor-method_ initialized variable (in the example _mynav_) and change the named property.
__Example:__ [changes after initialization](https://jsfiddle.net/tlehmann/mdwyehgL/)
```
...
const navbar = new MyNavEntryPoint.MyNavBar(MENU);
//Changes after initialization
//eaxample for singlechanges
navbar.background = 'magenta';
const items = navbar.items;
items[1].item = 'About news';
items[1].func=()=>{h1.textContent='About news'};
items[1].disabled = false;
navbar.items = items;
//example for multichanges
navbar.myNavObj={
color: 'lightblue',
backgroundHover: 'darkblue',
searchVisible: false,
buttonVisible: false,
logoText: 'myLogo
'
};
```
Picture 8 [changes after initialization](https://jsfiddle.net/tlehmann/mdwyehgL/)
# 4 Properties at a glance
## Scroll to the right to see the __example__ button.
| name | default | Values / Unit | Description | Example |jsfiddle
|:--|:--|:--|--|--|--|
|___items:___
__{item:__ textValue\|array,
__func:__ function,
__disabled:__ true\|false __}__||array|*see section 3.1*||
|___trigger:___| 'click'|'click'|call submenu by clicking|trigger: 'click'
| | |'hover'|call submenu by hovering|trigger: 'hover'|[Example](https://jsfiddle.net/tlehmann/stakryfg/)
|___popupWidth:___|'150px'|px|minimum width of dropdown menus (submenus)|popupWidth: '300px'|[Example](https://jsfiddle.net/tlehmann/pj35z7qd/)
|___fontFamily:___|'monospace, sans-serif'|alle font-family's|font family|fontFamily:' "Times New Roman", Times, serif'|[Example](https://jsfiddle.net/tlehmann/bh19ejwt/)
|___fontSize:___|'18px'|em, px, % _Units CSS-font-size_ |font size|fontSize:'2em'|[Example](https://jsfiddle.net/tlehmann/bh19ejwt/)
|___position:___|'absolute'|'absolute'
'fixed'
'sticky'
'relative'
'static'|Positional behavior as described in CSS3. Can be used in conjunction with the ___top___ property - except _static_ (has no effect).|position:'sticky'
position:'fixed'|[Example](https://jsfiddle.net/tlehmann/u6pe4hvo/)
|___top:___|'0px'|px|upper distance|top: '20px'|[Example](https://jsfiddle.net/tlehmann/u6pe4hvo/)
|___offsetXpx:___|'0px'|px|left relative distance of the dropdown menu|offsetXpx:'-20px'|[Example](https://jsfiddle.net/tlehmann/oc18qdyj/)
|___offsetYpx:___|'0px'|px|upper relative distance of the dropdown menu|offsetXpx:'10px'|[Example](https://jsfiddle.net/tlehmann/oc18qdyj/)
|___navWidth:___|'90%'|px, %|Centered width of the displayed elements of the horizontal NavBar|navWidth: 700px
navWidth: 80%|[Example](https://jsfiddle.net/tlehmann/fk6te289/)
|___navHeight:___|'50px'|px|Height of the menu items|navHeight: '40px'|[Example](https://jsfiddle.net/tlehmann/6k2e01pb/)
|___color:___|'white'|color|font Color|color: 'rgba(33,55,66,0.6)'
color: 'red'
color: '#66ffaa'|[Example](https://jsfiddle.net/tlehmann/d2sa5uz9/)
|___background:___|'black'|color|background color|color: 'rgba(33,55,66,0.6)'
color: 'red'
color: '#66ffaa'|[Example](https://jsfiddle.net/tlehmann/d2sa5uz9/)
|___colorHover:___|'white'|color|Font color at hover|color: 'rgba(33,55,66,0.6)'
color: 'red'
color: '#66ffaa'|[Example](https://jsfiddle.net/tlehmann/d2sa5uz9/)
|___backgroundHover:___|'darkgray'|color|Background color at hover|color: 'rgba(33,55,66,0.6)'
color: 'red'
color: '#66ffaa'|[Example](https://jsfiddle.net/tlehmann/d2sa5uz9/)
|___colorActive:___|'white'|color|Font color Active|color: 'rgba(33,55,66,0.6)'
color: 'red'
color: '#66ffaa'|[Example](https://jsfiddle.net/tlehmann/d2sa5uz9/)
|___backgroundActive:___|'blue'|color|Background color Active|color: 'rgba(33,55,66,0.6)'
color: 'red'
color: '#66ffaa'|[Example](https://jsfiddle.net/tlehmann/d2sa5uz9/)
|___colorDisabled:___|'gray'|color|Font color in Disabled|color: 'rgba(33,55,66,0.6)'
color: 'red'
color: '#66ffaa'|[Example](https://jsfiddle.net/tlehmann/d2sa5uz9/)
|___backgroundDisabled:___|'black'|color|Background color for Disabled|color: 'rgba(33,55,66,0.6)'
color: 'red'
color: '#66ffaa'|[Example](https://jsfiddle.net/tlehmann/d2sa5uz9/)
|___borderColor:___|'white'|color|Frame/Seperator color|color: 'rgba(33,55,66,0.6)'
color: 'red'
color: '#66ffaa'|[Example](https://jsfiddle.net/tlehmann/d2sa5uz9/)
|___border:___|true|boolean|Frame visible|border: false|[Example](https://jsfiddle.net/tlehmann/vzp9hq7e/)
|___logoImage:___|' '|string|Source path and name of the image file (png, jpg ... etc.) If a value is specified here, logoText is ignored!|logoImage:
'/img/picture.png'|[Example](https://jsfiddle.net/tlehmann/ak9epfg1/)
|___logoText:___|'\
LOGO\
'|string/innerHTML|Ignored when ___logoImage___ is specified!|logoText: \myLogo\|[Example](https://jsfiddle.net/tlehmann/p5he4xrd/)
|___buttonText:___|'login'|string|label button|buttonText: 'logout'|[Example](https://jsfiddle.net/tlehmann/bky0gvun/)
|___buttonVisible:___|True|boolean|visiblity button|buttonVisible: false|[Example](https://jsfiddle.net/tlehmann/bky0gvun/)
|___buttonFunction:___|() => {console.log('button pressed') }|function|Function that is executed by clicking.|buttonFunction: myFunction|[Example](https://jsfiddle.net/tlehmann/bky0gvun/)
|___searchButtonText:___|'search'|string|label button|searchButtonText: 'find'|[Example](https://jsfiddle.net/tlehmann/4yu75nkf/)
|___searchVisible:___|True|string|Visibility Input & Button|searchVisible: false|[Example](https://jsfiddle.net/tlehmann/4yu75nkf/)
|___searchButtonFunction:___|(inputValue) => {console.log('This is my text:', inputValue) }|function|Function that is executed by clicking. In ___InputValue___ is the search string|searchButtonFunction: mySearchFunction|[Example](https://jsfiddle.net/tlehmann/4yu75nkf/)
|___myNavObj:___|aktuelles myNav-Object|myNav-Object|To easily change multiple _properties_|myNav.myNavObj={color: 'blue', background:'#fff'}|[Example](https://jsfiddle.net/tlehmann/1d6rab93/)
# Deutsch
# 1. Was ist myNav?
Die Bibliothek _mynav_ stellt die Möglichkeit bereit, mit einem __einzigen Objekt__ eine __komplette vertikale Navbar (Menue)__ zu erstellen. Aus den einzelnen Einträgen des Menues wird nach dem anklicken direkt eine dazugehörige Funktion aufgerufen.
siehe folgendes [Beispiel](https://jsfiddle.net/tlehmann/y12p9d5o/):
Bild 1: [Hier gehts zum Beispiel:](https://jsfiddle.net/tlehmann/y12p9d5o/)
# 2. Installation
Falls Sie nur kurz reinschauen wollen um die Bibliothek _mynav_ zu testen, gehen Sie gleich zu Punkt [2.1.1](#2.1.1-zu-testzwecken-ohne-die-in-punkt-2-aufgeführte-installation-durchzuführen)
1. Installieren Sie zuerst [nodejs](https://nodejs.org/en/)
2. Erstellen Sie eine Datei _package.json_ in ihrem Arbeitsverzeichnis!
`npm init -y` oder `npm init`
4. Installieren Sie das package _mynav_
`npm i mynav`
# 2.1 Einbinden
Es gibt mehrere möglichkeiten _mynav_ in Ihren Code einzubinden.
## 2.1.1 Zu Testzwecken, ohne die in Punkt 2 aufgeführte Installation durchzuführen
Erstellen Sie eine HTML-Datei _index.html_ und geben in den _head_-Tag folgende Zeilen ein:
...
...
binden Sie in den _body-tag_ den Tag _mynav_ (``) ein und erstellen ein Script mit folgendem Inhalt, den sie unten im _body-tag_ einfügen oder in einem eigenem Script erfassen:
...
...
Starten Sie ihre Webseite!
Wenn Sie alles richtig gemacht haben, sollte es so aussehen:
Bild 2: Beispiel [ jsfiddle.net](https://jsfiddle.net/tlehmann/37ouepzm/) [github](https://github.com/InnoGuide/mynav_link)
## 2.1.2 Lokale Installation
Führen sie die Installtion, wie in Punkt __2. Installation__ beschrieben durch. Erstellen Sie eine HTML-Datei ___index.html___ und geben in den _head_-Tag folgende Zeilen ein:
...
...
...
...
binden Sie in den _body-tag_ den Tag _mynav_ (``) ein und erstellen ein Script mit folgendem Inhalt, den sie unten im _body-tag_ einfügen oder in einem eigenem Script erfassen:
...
...
Starten Sie ihre Webseite!
Wenn Sie alles richtig gemacht haben, sollte es so aussehen wie auf Bild 2.
Beispiel [github](https://github.com/InnoGuide/mynav_local)
## 2.1.3 Webpack 4 Installation
Besuchen Sie hierzu folgenden Link [gitub](https://github.com/InnoGuide/mynav_for_webpack_4)
# 3. Konfiguration
Sie können beim Aufruf der Konstruktor-Funktion ein Objekt als Argument übergeben und damit die gesammte Navigation initialisieren.
Im Programmablauf, kann jede einzelne Eigenschaft (z.B. Background, Font-Family, Menue-Items etc.) später geändert werden. Wenn Sie der Konstruktorfunktion __kein__ Objekt-Argument übergeben, wirkt das folgende Default-Object:
{
items:
[
[
{ item: 'Item 1'},
{ item: 'Item 1 1', func: () => {console.log('Item 1 1')}},
{ item: '--'},
{ item: 'Item 1 2', func: () => {console.log('Item 1 2')}}
],
{ item: 'Item 2', func: () => {console.log('Item 2')}}
],
trigger: 'click',
popupWidth:'150px',
fontFamily: 'monospace, sans-serif',
fontSize: '18px',
position: 'absolute',
top: '0',
offsetXpx: '0',
offsetYpx: '0',
navWidth: '90%',
navHeight: '50px',
color: 'white',
background: 'black',
colorHover:'white',
backgroundHover: 'gray',
colorActive: 'white',
backgroundActive: 'blue',
colorDisabled: 'gray',
backgroundDisabled: 'black',
borderColor: 'gray',
border: true,
logoImage: '',
logoText: 'LOGO
',
buttonText: 'login',
buttonVisible: true,
buttonFunction: () => {console.log('button pressed') },
searchButtonText: 'search',
searchButtonFunction: (inputValue) => {console.log('This is my text:', inputValue) },
searchVisible: true
}
## 3.1 items
Die gesamte Navigation und Steuerung wird in der Property ___items___ des Objektes beschrieben.
Die Property ___items___ besteht aus einem Array, welches aus Objekten bzw. weiteren Arrays (Untermenue's) aufgebaut ist. Im obersten Array wird die oberste horizontale Menue-Struktur beschrieben. Hier besteht jeder Eintrag aus einem Objekt, welches eine String-Property ___item___ (Menue-Bezeichner) und Functions-Property ___func___, welche Ausgeführt wird, wenn der Menue-Bezeichner angeklickt wurde.
__Beispiel:__ [__items__](https://jsfiddle.net/tlehmann/4abngtuc/)
```
const HomeFunc = function(){window.open( 'https://www.w3schools.com','_blank')}
const ContactFunc = ()=>{document.body.style='margin: 0; background-color: green';
document.getElementById('myID').textContent='Home in Berlin'}
const MENU =
{
items:
[
{item: 'w3School', func: HomeFunc},
{item: 'About', func: ()=>document.getElementById('myID').textContent = 'Exapmle for Item'},
{item: 'kontakt', func: ContactFunc}
]
}
const navbar = new MyNavEntryPoint.MyNavBar(MENU);
```
Bild 3 [__Beispiel__](https://jsfiddle.net/tlehmann/4abngtuc/)
## 3.2 Untermenues
Soll an einer Stelle ein Untermenue eingebettet werden, wird hier, anstatt eines Objektes mit den Propertypen _item_ und _func_ ein weiteres __Array__ eingefügt. Hierbei ist der erste Eintrag des __Array__ der Einstiegspunkt des Submenues und befindet sich im Elternteil des Submenues. Im ersten Eintrag wird die Property _func_ nicht beachtet, da dieser Eintrag nur den EInstiegspunkt des Submenues darstellt.
__Beispiel:__ [submenues](https://jsfiddle.net/tlehmann/4qxmuktg/)
```
...
const MENU = {
items:
[
{item: 'w3School', func: HomeFunc},
{item: 'About', func: ()=>h1.textContent = 'Exapmle for Item'},
[ {item: 'Contact'},
{item:'kontakt Dresden', func:()=>h1.textContent='Büro Dresden'},
[ {item:'Contact Berlin' },
{item:'Pankow', func:()=>h1.textContent='Office Berlin Pankow' },
{item:'Treptow', func:()=>h1.textContent='Office Berlin Treptow' },
{item:'Mitte', func:()=>h1.textContent='Office Berlin Mitte' }
]
]
]
}
const navbar = new MyNavEntryPoint.MyNavBar(MENU);
...
```
Bild 4 [submenues](https://jsfiddle.net/tlehmann/4qxmuktg/)
## 3.3 Weitere Eigenschaften der Property _Items_
### 3.3.1 Seperator
Durch das zuweisen eines String __' - - '__ `{item: '--'} ` wird an dieser stelle eine Trennmarkierung (Seperator) eingefügt.
__Beispiel:__ [Seperator](https://jsfiddle.net/tlehmann/upytz6r0/)
```
...
[ {item:'Contact Berlin' },
{item:'Pankow', func:()=>h1.textContent='Office Berlin Pankow' },
{item: '--'},
{item:'Treptow', func:()=>h1.textContent='Office Berlin Treptow' },
{item:'Mitte', func:()=>h1.textContent='Office Berlin Mitte' }
]
...
```
Bild 5 [Seperator](https://jsfiddle.net/tlehmann/upytz6r0/)
### 3.3.2 disabled
Wenn ein Eintrag des Menues keine Reaktionen ausführen soll, z. B. aufklappen eines Untermenues oder Ausführen der zugewiesenen Funktion _func_, kann der Eigenschaft ___disabled___ der Wert __true__ zugewiesen werden.
__Beispiel:__ [disabled](https://jsfiddle.net/tlehmann/o9hu6qr4/)
```
...
[ {item: 'w3School', func: HomeFunc},
{item: 'About', disabled: true, func: ()=>h1.textContent = 'Exapmle for Item'},
[ {item: 'Contact'},
{item:'Contakt Dresden', func:()=>h1.textContent='Büro Dresden'},
[ {item:'Contact Berlin' },
{item:'Pankow', func:()=>h1.textContent='Office Berlin Pankow' },
{item: '--'},
{item:'Treptow', disabled: true, func:()=>h1.textContent='Office Berlin Treptow' },
{item:'Mitte', func:()=>h1.textContent='Office Berlin Mitte' }
]
]
]
...
```
Bild 6 [disabled](https://jsfiddle.net/tlehmann/o9hu6qr4/)
## 3.4 Zuweisen und Ändern der Konfiguration im Programmlauf
Wie in Absatz ___3. Konfiguration___ erwähnt, können Sie auch nach dem Aufruf der Konstruktormethode
`const mynav = new MyNavEntryPoint.MyNavBar(MENU);`
bzw. (_webpack_)
```
import { MyNavBar } from 'mynav';
const mynav = new MyNavBar();
```
alle _Property's_ veränder. Hierzu greifen Sie einfach auf die durch _new konstruktor-methode_ initialisierte Variable zu (im Beispiel _mynav_) und verändern die benannte Property.
__Beispiel:__ [changes after initialization](https://jsfiddle.net/tlehmann/mdwyehgL/)
```
...
const navbar = new MyNavEntryPoint.MyNavBar(MENU);
//Changes after initialization
//eaxample for singlechanges
navbar.background = 'magenta';
const items = navbar.items;
items[1].item = 'About news';
items[1].func=()=>{h1.textContent='About news'};
items[1].disabled = false;
navbar.items = items;
//example for multichanges
navbar.myNavObj={
color: 'lightblue',
backgroundHover: 'darkblue',
searchVisible: false,
buttonVisible: false,
logoText: 'myLogo
'
};
```
Bild 8 [changes after initialization](https://jsfiddle.net/tlehmann/mdwyehgL/)
# 4 Eigenschaften auf einen Blick
## Scrool nach rechts, um den Example-button zu sehen.
| Name| Standard |Werte/Einheit| Beschreibung|Beispiel|jsfiddle
|:--|:--|:--|--|--|--|
|___items:___
__{item:__ textValue\|array,
__func:__ function,
__disabled:__ true\|false __}__||array|*siehe Abschnitt 3.1*||
|___trigger:___| 'click'|'click'|Aufruf des Untermenues
durch klicken|trigger: 'click'
| | |'hover'|Aufruf des Untermenues
durch hovern|trigger: 'hover'|[Beispiel](https://jsfiddle.net/tlehmann/stakryfg/)
|___popupWidth:___|'150px'|px|minimale Breite der DropDownMenues (Untermenues)|popupWidth: '300px'|[Beispiel](https://jsfiddle.net/tlehmann/pj35z7qd/)
|___fontFamily:___|'monospace, sans-serif'|alle font-family's|Fontfamily|fontFamily:' "Times New Roman", Times, serif'|[Beispiel](https://jsfiddle.net/tlehmann/bh19ejwt/)
|___fontSize:___|'18px'|em, px, % _Einheiten für CSS-font-size_ |Schriftgröße|fontSize:'2em'|[Beispiel](https://jsfiddle.net/tlehmann/bh19ejwt/)
|___position:___|'absolute'|'absolute'
'fixed'
'sticky'
'relative'
'static'|Positionsverhalten wie in CSS3 beschrieben. Kann im Zusammenhang mit der Eigenschaft ___top___ verwendet werden - außer _static_ (hat keine Wirkung). |position:'sticky'
position:'fixed'|[Beispiel](https://jsfiddle.net/tlehmann/u6pe4hvo/)
|___top:___|'0px'|px|oberer Abstand|top: '20px'|[Beispiel](https://jsfiddle.net/tlehmann/u6pe4hvo/)
|___offsetXpx:___|'0px'|px|linker relativer Abstand des DropdownMenues|offsetXpx:'-20px'|[Beispiel](https://jsfiddle.net/tlehmann/oc18qdyj/)
|___offsetYpx:___|'0px'|px|oberer relativer Abstand des DropdownMenues|offsetXpx:'10px'|[Beispiel](https://jsfiddle.net/tlehmann/oc18qdyj/)
|___navWidth:___|'90%'|px, %|zentrierte Breite der angezeigten Elemente/Items der horizontalen NavBar|navWidth: 700px
navWidth: 80%|[Beispiel](https://jsfiddle.net/tlehmann/fk6te289/)
|___navHeight:___|'50px'|px|Höhe der MenueItems|navHeight: '40px'|[Beispiel](https://jsfiddle.net/tlehmann/6k2e01pb/)
|___color:___|'white'|color|Schriftfarbe|color: 'rgba(33,55,66,0.6)'
color: 'red'
color: '#66ffaa'|[Beispiel](https://jsfiddle.net/tlehmann/d2sa5uz9/)
|___background:___|'black'|color|Hintergrundfarbe|color: 'rgba(33,55,66,0.6)'
color: 'red'
color: '#66ffaa'|[Beispiel](hhttps://jsfiddle.net/tlehmann/d2sa5uz9/)
|___colorHover:___|'white'|color|Schriftfarbe bei Hover|color: 'rgba(33,55,66,0.6)'
color: 'red'
color: '#66ffaa'|[Beispiel](https://jsfiddle.net/tlehmann/d2sa5uz9/)
|___backgroundHover:___|'darkgray'|color|Hintergrundfarbe bei Hover|color: 'rgba(33,55,66,0.6)'
color: 'red'
color: '#66ffaa'|[Beispiel](hhttps://jsfiddle.net/tlehmann/d2sa5uz9/)
|___colorActive:___|'white'|color|Schriftfarbe bei Aktiv|color: 'rgba(33,55,66,0.6)'
color: 'red'
color: '#66ffaa'|[Beispiel](https://jsfiddle.net/tlehmann/d2sa5uz9/)
|___backgroundActive:___|'blue'|color|Hintergrundfarbe bei Aktiv|color: 'rgba(33,55,66,0.6)'
color: 'red'
color: '#66ffaa'|[Beispiel](https://jsfiddle.net/tlehmann/d2sa5uz9/)
|___colorDisabled:___|'gray'|color|Schriftfarbe bei Disabled|color: 'rgba(33,55,66,0.6)'
color: 'red'
color: '#66ffaa'|[Beispiel](https://jsfiddle.net/tlehmann/d2sa5uz9/)
|___backgroundDisabled:___|'black'|color|Hintergrundfarbe bei Disabled|color: 'rgba(33,55,66,0.6)'
color: 'red'
color: '#66ffaa'|[Beispiel](https://jsfiddle.net/tlehmann/d2sa5uz9/)
|___borderColor:___|'white'|color|Rahmen-/Seperatorfarbe|color: 'rgba(33,55,66,0.6)'
color: 'red'
color: '#66ffaa'|[Beispiel](https://jsfiddle.net/tlehmann/d2sa5uz9/)
|___border:___|true|true
false|Rahmen sichtbar|border: false|[Beispiel](https://jsfiddle.net/tlehmann/vzp9hq7e/)
|___logoImage:___|' '|string|Quellpfad und Name der Bilddatei (png, jpg ... etc.) Wird hier ein Wert angegeben wird ___logoText___ ignoriert!|logoImage:
'/img/picture.png'|[Beispiel](https://jsfiddle.net/tlehmann/ak9epfg1/)
|___logoText:___|'\
LOGO\
'|string/innerHTML|Wird ignoriert, wenn ___logoImage___ angegeben wird!|logoText: \myLogo\|[Beispiel](https://jsfiddle.net/tlehmann/p5he4xrd/)
|___buttonText:___|'login'|string|Textlabel Button|buttonText: 'logout'|[Beispiel](https://jsfiddle.net/tlehmann/bky0gvun/)
|___buttonVisible:___|True|string|Sichbarkeit Button|buttonVisible: false|[Beispiel](https://jsfiddle.net/tlehmann/bky0gvun/)
|___buttonFunction:___|() => {console.log('button pressed') }|function|Funktion die durch klicken ausgeführt wird.|buttonFunction: myFunction|[Beispiel](https://jsfiddle.net/tlehmann/bky0gvun/)
|___searchButtonText:___|'search'|string|Textlabel Button|searchButtonText: 'find'|[Beispiel](https://jsfiddle.net/tlehmann/4yu75nkf/)
|___searchVisible:___|True|string|Sichbarkeit Input/Button|searchVisible: false|[Beispiel](https://jsfiddle.net/tlehmann/4yu75nkf/)
|___searchButtonFunction:___|(inputValue) => {console.log('This is my text:', inputValue) }|function|Funktion die durch klicken ausgeführt wird. In ___InputValue___ befindet sich der Suchstring|searchButtonFunction: mySearchFunction|[Beispiel](https://jsfiddle.net/tlehmann/4yu75nkf/)
|___myNavObj:___|aktuelles myNav-Object|myNav-Object|Zur einfachen Änderung mehrerer _Eigenschaften_|myNav.myNavObj={color: 'blue', background:'#fff'}|[Beispiel](https://jsfiddle.net/tlehmann/1d6rab93/)
---
_Source: https://npm.io/package/mynav · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._