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 below:

Bild1 Picture 1: For Example

2. Installation Guide

If you just want to take a look at the library mynav, go straight to the point 2.1.1

First install nodejs
Create a package.json file in your working directory! npm init -y or npm init
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:

...
<head>
    <script src="https://cdn.jsdelivr.net/npm/mynav@1.0.18/mynav.js"></script>
</head>
...

Include the tag mynav (<mynav> </ 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:

...
<body>
    <mynav></mynav>
    <script>
	new MyNavEntryPoint.MyNavBar()
    </script>
</body> 
...

Start your website! If you did everything right, it should look like this: Bild2 Picture 2: example jsfiddle.net github

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:

...
<head>
  ... 
  <script  src="node_modules/mynav/mynav.js"></script>
  ...
</head>   
...

Include the tag mynav (<mynav></ 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:

...
<body>
    <mynav></mynav>
    <script>
	    const mynav = new MyNavEntryPoint.MyNavBar();
    </script>
</body> 
...

Start your website! If you did everything right, it should look like Picture 2. Examplel github

2.1.3 Webpack 4 installation

Please visit the following link gitub

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: '<div style="font-weight: bold; font-size: x-large">LOGO</div>',  
    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

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);

Bild3 Picture 3 Example

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

...
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 Picture 4 submenues

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

...
[	{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 Picture 5 Seperator

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

...
 [	   {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' }
              ]
           ]     
 ]
 ...

Bild6 Picture 6 disabled

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

...
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: '<h1 style="background:#000; color: blue; padding: 0 5px">myLogo</h1>'
  };

Bild8 Picture 8 changes after initialization

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
popupWidth:	'150px'	px	minimum width of dropdown menus (submenus)	popupWidth: '300px'	Example
fontFamily:	'monospace, sans-serif'	alle font-family's	font family	fontFamily:' "Times New Roman", Times, serif'	Example
fontSize:	'18px'	em, px, % Units CSS-font-size	font size	fontSize:'2em'	Example
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
top:	'0px'	px	upper distance	top: '20px'	Example
offsetXpx:	'0px'	px	left relative distance of the dropdown menu	offsetXpx:'-20px'	Example
offsetYpx:	'0px'	px	upper relative distance of the dropdown menu	offsetXpx:'10px'	Example
navWidth:	'90%'	px, %	Centered width of the displayed elements of the horizontal NavBar	navWidth: 700px navWidth: 80%	Example
navHeight:	'50px'	px	Height of the menu items	navHeight: '40px'	Example
color:	'white'	color	font Color	color: 'rgba(33,55,66,0.6)' color: 'red' color: '#66ffaa'	Example
background:	'black'	color	background color	color: 'rgba(33,55,66,0.6)' color: 'red' color: '#66ffaa'	Example
colorHover:	'white'	color	Font color at hover	color: 'rgba(33,55,66,0.6)' color: 'red' color: '#66ffaa'	Example
backgroundHover:	'darkgray'	color	Background color at hover	color: 'rgba(33,55,66,0.6)' color: 'red' color: '#66ffaa'	Example
colorActive:	'white'	color	Font color Active	color: 'rgba(33,55,66,0.6)' color: 'red' color: '#66ffaa'	Example
backgroundActive:	'blue'	color	Background color Active	color: 'rgba(33,55,66,0.6)' color: 'red' color: '#66ffaa'	Example
colorDisabled:	'gray'	color	Font color in Disabled	color: 'rgba(33,55,66,0.6)' color: 'red' color: '#66ffaa'	Example
backgroundDisabled:	'black'	color	Background color for Disabled	color: 'rgba(33,55,66,0.6)' color: 'red' color: '#66ffaa'	Example
borderColor:	'white'	color	Frame/Seperator color	color: 'rgba(33,55,66,0.6)' color: 'red' color: '#66ffaa'	Example
border:	true	boolean	Frame visible	border: false	Example
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
logoText:	'<div style="font-weight: bold; font-size: x-large"> LOGO</div>'	string/innerHTML	Ignored when logoImage is specified!	logoText: <i>myLogo</i>	Example
buttonText:	'login'	string	label button	buttonText: 'logout'	Example
buttonVisible:	True	boolean	visiblity button	buttonVisible: false	Example
buttonFunction:	() => {console.log('button pressed') }	function	Function that is executed by clicking.	buttonFunction: myFunction	Example
searchButtonText:	'search'	string	label button	searchButtonText: 'find'	Example
searchVisible:	True	string	Visibility Input & Button	searchVisible: false	Example
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
myNavObj:	aktuelles myNav-Object	myNav-Object	To easily change multiple properties	myNav.myNavObj={color: 'blue', background:'#fff'}	Example

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:

Bild1 Bild 1: Hier gehts zum Beispiel:

2. Installation

Falls Sie nur kurz reinschauen wollen um die Bibliothek mynav zu testen, gehen Sie gleich zu Punkt 2.1.1

Installieren Sie zuerst nodejs
Erstellen Sie eine Datei package.json in ihrem Arbeitsverzeichnis! npm init -y oder npm init
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:

...
<head>
    <script src="https://cdn.jsdelivr.net/npm/mynav@1.0.18/mynav.js"></script>
</head>
...

binden Sie in den body-tag den Tag mynav (<mynav></mynav>) ein und erstellen ein Script mit folgendem Inhalt, den sie unten im body-tag einfügen oder in einem eigenem Script erfassen:

...
<body>
    <mynav></mynav>
    <script>
	new MyNavEntryPoint.MyNavBar()
    </script>
</body> 
...

Starten Sie ihre Webseite! Wenn Sie alles richtig gemacht haben, sollte es so aussehen: Bild2 Bild 2: Beispiel jsfiddle.net github

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:

...
<head>
  ... 
  <script  src="node_modules/mynav/mynav.js"></script>
  ...
</head>   
...

binden Sie in den body-tag den Tag mynav (<mynav></mynav>) ein und erstellen ein Script mit folgendem Inhalt, den sie unten im body-tag einfügen oder in einem eigenem Script erfassen:

...
<body>
    <mynav></mynav>
    <script>
	    const mynav = new MyNavEntryPoint.MyNavBar();
    </script>
</body> 
...

Starten Sie ihre Webseite! Wenn Sie alles richtig gemacht haben, sollte es so aussehen wie auf Bild 2. Beispiel github

2.1.3 Webpack 4 Installation

Besuchen Sie hierzu folgenden Link gitub

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: '<div style="font-weight: bold; font-size: x-large">LOGO</div>',  
    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

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);

Bild3 Bild 3 Beispiel

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

...
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 Bild 4 submenues

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

...
[	{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 Bild 5 Seperator

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

...
 [	   {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' }
              ]
           ]     
 ]
 ...

Bild6 Bild 6 disabled

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

...
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: '<h1 style="background:#000; color: blue; padding: 0 5px">myLogo</h1>'
  };

Bild8 Bild 8 changes after initialization

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
popupWidth:	'150px'	px	minimale Breite der DropDownMenues (Untermenues)	popupWidth: '300px'	Beispiel
fontFamily:	'monospace, sans-serif'	alle font-family's	Fontfamily	fontFamily:' "Times New Roman", Times, serif'	Beispiel
fontSize:	'18px'	em, px, % Einheiten für CSS-font-size	Schriftgröße	fontSize:'2em'	Beispiel
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
top:	'0px'	px	oberer Abstand	top: '20px'	Beispiel
offsetXpx:	'0px'	px	linker relativer Abstand des DropdownMenues	offsetXpx:'-20px'	Beispiel
offsetYpx:	'0px'	px	oberer relativer Abstand des DropdownMenues	offsetXpx:'10px'	Beispiel
navWidth:	'90%'	px, %	zentrierte Breite der angezeigten Elemente/Items der horizontalen NavBar	navWidth: 700px navWidth: 80%	Beispiel
navHeight:	'50px'	px	Höhe der MenueItems	navHeight: '40px'	Beispiel
color:	'white'	color	Schriftfarbe	color: 'rgba(33,55,66,0.6)' color: 'red' color: '#66ffaa'	Beispiel
background:	'black'	color	Hintergrundfarbe	color: 'rgba(33,55,66,0.6)' color: 'red' color: '#66ffaa'	Beispiel
colorHover:	'white'	color	Schriftfarbe bei Hover	color: 'rgba(33,55,66,0.6)' color: 'red' color: '#66ffaa'	Beispiel
backgroundHover:	'darkgray'	color	Hintergrundfarbe bei Hover	color: 'rgba(33,55,66,0.6)' color: 'red' color: '#66ffaa'	Beispiel
colorActive:	'white'	color	Schriftfarbe bei Aktiv	color: 'rgba(33,55,66,0.6)' color: 'red' color: '#66ffaa'	Beispiel
backgroundActive:	'blue'	color	Hintergrundfarbe bei Aktiv	color: 'rgba(33,55,66,0.6)' color: 'red' color: '#66ffaa'	Beispiel
colorDisabled:	'gray'	color	Schriftfarbe bei Disabled	color: 'rgba(33,55,66,0.6)' color: 'red' color: '#66ffaa'	Beispiel
backgroundDisabled:	'black'	color	Hintergrundfarbe bei Disabled	color: 'rgba(33,55,66,0.6)' color: 'red' color: '#66ffaa'	Beispiel
borderColor:	'white'	color	Rahmen-/Seperatorfarbe	color: 'rgba(33,55,66,0.6)' color: 'red' color: '#66ffaa'	Beispiel
border:	true	true false	Rahmen sichtbar	border: false	Beispiel
logoImage:	' '	string	Quellpfad und Name der Bilddatei (png, jpg ... etc.) Wird hier ein Wert angegeben wird logoText ignoriert!	logoImage: '/img/picture.png'	Beispiel
logoText:	'<div style="font-weight: bold; font-size: x-large"> LOGO</div>'	string/innerHTML	Wird ignoriert, wenn logoImage angegeben wird!	logoText: <i>myLogo</i>	Beispiel
buttonText:	'login'	string	Textlabel Button	buttonText: 'logout'	Beispiel
buttonVisible:	True	string	Sichbarkeit Button	buttonVisible: false	Beispiel
buttonFunction:	() => {console.log('button pressed') }	function	Funktion die durch klicken ausgeführt wird.	buttonFunction: myFunction	Beispiel
searchButtonText:	'search'	string	Textlabel Button	searchButtonText: 'find'	Beispiel
searchVisible:	True	string	Sichbarkeit Input/Button	searchVisible: false	Beispiel
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
myNavObj:	aktuelles myNav-Object	myNav-Object	Zur einfachen Änderung mehrerer Eigenschaften	myNav.myNavObj={color: 'blue', background:'#fff'}	Beispiel

mynav

1. What is myNav?

2. Installation Guide

2.1 integrate

2.1.1 For testing purposes, without performing the installation listed in Chapter 2

2.1.2 Local Installation

2.1.3 Webpack 4 installation

3. Configuration

3.1 Items

3.2 Submenues

3.3 Further properties of the property Items

3.3.1 Separator

3.3.2 disabled

3.4 Assign and change the configuration in the program run

4 Properties at a glance

Scroll to the right to see the example button.

Deutsch

1. Was ist myNav?

2. Installation

2.1 Einbinden

2.1.1 Zu Testzwecken, ohne die in Punkt 2 aufgeführte Installation durchzuführen

2.1.2 Lokale Installation

2.1.3 Webpack 4 Installation

3. Konfiguration

3.1 items

3.2 Untermenues

3.3 Weitere Eigenschaften der Property Items

3.3.1 Seperator

3.3.2 disabled

3.4 Zuweisen und Ändern der Konfiguration im Programmlauf

4 Eigenschaften auf einen Blick

Scrool nach rechts, um den Example-button zu sehen.

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads