🇬🇧 a simple menu bar at top of a div in javascript
🇫🇷 une simple barre de menu en haut d'une div en javascript
https://github.com/cmames/menubar.js
Just to have a menu bar at top of a DIV in your HTML pages
Juste pour avoir une barre de menu en haut d'une DIV dans vos pages HTML
just copy the javascript file
copiez juste le fichier javascript
just create a div with a class name "menubar" and an id of your choice
example :
<DIV class="menubar" id="first">
.
.
</DIV>
in a SCRIPT create a JSON for your menu. Its name must be your id choosen with two underscore before the name, like this :
<SCRIPT>
const __first = {
.
.
}
</SCRIPT>
detail of the JSON (elements between [] are optionnal):
{
[textColor,]
[backgroundColor,]
[fontFamily,]
[iconFontFamily,]
menu
}
select the color of the text in the menu. format like in CSS.
select the background color of the menu. format like in CSS.
select the CSS font-family for the menu.
select the font family for icons if you need it.
the description of the menu. it's an array of elements with these arguments :
- name : optional, the text in the menu
- icon : optional, the unicode of an icon (displayed defore the text)
- img : optional, an link to an image (displayed before the text)
- action :
- must be "link" for an URL when item is clicked. see dest
- or "event" for generating an event when item is clicked. see dest
- or "spacer" for insterting a spacer in the menu
- dest : an URL if action is "link" or the name of an event generated.
- sub : an array of elements acting as a sub-menu
example :
var __first =
{
textColor: "blue",
backgroundColor: "yellow",
fontFamily : "Arial",
iconFontFamily: "icon",
menu:
[
{
name: 'File', img: 'imgs/test.jpg', sub:
[
{ img: 'imgs/test.jpg', action: 'link', dest: 'http://website.com' },
{ name: 'Open', img: 'imgs/test.jpg', action: 'link', dest: 'http://website.com' },
{ name: 'Save', img: 'imgs/test.jpg', action: 'event', dest: 'saveEvent' },
{ action: 'spacer' },
{ name: 'Close', action: 'event', dest: 'closeEvent' }
]
},
{
name: 'Edit', sub:
[
{ icon: '☝', action: 'event', dest: 'doEvent' },
{ name: 'Copy', icon: '☝', action: 'event', dest: 'copyEvent' },
{ name: 'Cut', icon: '☝🏿', action: 'event', dest: 'cutEvent' },
{
name: 'Paste', icon: '☝🏾', sub:
[
{ name: 'normal', icon: '☝🏽', action: 'event', dest: 'pasteEvent' },
{ name: 'special', icon: '☝🏼', action: 'event', dest: 'spasteEvent' },
{ name: 'yet another long menu entry' }
]
},
{ name: 'A long menu entry', action: 'event', dest: 'longEvent' },
]
},
{ name: 'Help', action: 'link', dest: 'https://fr.wikipedia.org/wiki/RTFM_(expression)', sub: null }
]
}
you can add a listener for each event generated.
you can use one menu per DIV with "id" and "__id" JSON
import this script in your HTML (at the end of body) and let the magic happen
creez juste une DIV avec un nom de classe "menubar" et un id de votre choix exemple :
<DIV class="menubar" id="first"> . . </DIV>dans un SCRIPT créez un JSON pour votre menu. Son nom doit être votre id choisi avec deux underscore avant le nom, comme ceci :
<SCRIPT> const __first = { . . } </SCRIPT>detail du JSON (les éléments entre [] sont optionnels):
{ [textColor,] [backgroundColor,] [fontFamily,] [iconFontFamily,] menu }sélectionne la couleur du texte dans le menu. format comme en CSS.
sélectionne la couleur du fond du menu format comme en CSS.
sélectionne la font-family CSS pour le menu.
sélectionne la font-family pour les icones si vous en avez une.
la description du menu. C'est un tableau d'éléments avec les arguments suivants :
- name : facultatif, le texte du menu
- icon : optionnel, l'unicode d'une icône (affiché avant le texte)
- img : optionnel, un lien vers une image (affiché avant le texte)
- action :
- doit être "link" pour une URL lorsque l'élément est cliqué. voir dest
- ou "event" pour générer un événement lorsque l'élément est cliqué. voir dest
- ou "spacer" pour insérer un espaceur dans le menu.
- dest : une URL si l'action est "link" ou le nom d'un événement généré.
- sub : un tableau d'éléments agissant comme un sous-menu.
exemple :
var __first = { textColor: "blue", backgroundColor: "yellow", fontFamily : "Arial", iconFontFamily: "icon", menu: [ { name: 'File', img: 'imgs/test.jpg', sub: [ { img: 'imgs/test.jpg', action: 'link', dest: 'http://website.com' }, { name: 'Open', img: 'imgs/test.jpg', action: 'link', dest: 'http://website.com' }, { name: 'Save', img: 'imgs/test.jpg', action: 'event', dest: 'saveEvent' }, { action: 'spacer' }, { name: 'Close', action: 'event', dest: 'closeEvent' } ] }, { name: 'Edit', sub: [ { icon: '☝', action: 'event', dest: 'doEvent' }, { name: 'Copy', icon: '☝', action: 'event', dest: 'copyEvent' }, { name: 'Cut', icon: '☝🏿', action: 'event', dest: 'cutEvent' }, { name: 'Paste', icon: '☝🏾', sub: [ { name: 'normal', icon: '☝🏽', action: 'event', dest: 'pasteEvent' }, { name: 'special', icon: '☝🏼', action: 'event', dest: 'spasteEvent' }, { name: 'yet another long menu entry' } ] }, { name: 'A long menu entry', action: 'event', dest: 'longEvent' }, ] }, { name: 'Help', action: 'link', dest: 'https://fr.wikipedia.org/wiki/RTFM_(expression)', sub: null } ] }vous pouvez ajouter un écouteur d'événement pour chaque événement généré.
vous pouvez utiliser un menu par DIV avec "id" et le JSON "__id"
importez ce script dans votre HTML (à la fin du corps) et laissez la magie opérer