Esto también se ha pedido y herehere, así que decidí escribir una plantilla CSS para las barras de menús estilo.
El uso de esta plantilla CSS es una forma muy fácil de peinar un MenuBar
, su alto nivel MenuButton
entradas, y cada MenuButton
's MenuItem
los niños, es decir, 'la totalidad barra de menús'.
Lo único que tiene que hacer es ajustar cuatro variables de acuerdo a las necesidades de uno:
-fx-my-menu-color
: color de fondo por defecto de la barra de menú (es decir, cuando el artículo no se asoma/seleccionados)
-fx-my-menu-color-highlighted
: el color de fondo de un elemento si está suspendido/seleccionado.
-fx-my-menu-font-color
: default color de fuente de la barra de menú (es decir, cuando el artículo no se asoma/seleccionado)
-fx-my-menu-font-color-highlighted
: color de la fuente de un artículo si se asoma/seleccionado.
El archivo CSS completa se comenta para explicar cada regla definida:
/* VARIABLE DEFINITIONS: Only these 4 variables have to be adjusted, the rest is copy-paste */
* {
-fx-my-menu-color: #263238; /* Change according to your needs */
-fx-my-menu-color-highlighted: #455a64; /* Change according to your needs */
-fx-my-menu-font-color: #FFFFFF; /* Change according to your needs */
-fx-my-menu-font-color-highlighted: #FFFFFF; /* Change according to your needs */
}
/* MENU BAR + Top-level MENU BUTTONS */
/*** The menu bar itself ***/
.menu-bar {
-fx-background-color: -fx-my-menu-color;
}
/*** Top-level menu itself (not selected/hovered) ***/
.menu-bar > .container > .menu-button {
-fx-background-color: -fx-my-menu-color;
}
/*** Top-level menu's label (not selected/hovered) ***/
.menu-bar > .container > .menu-button > .label {
-fx-text-fill: -fx-my-menu-font-color;
}
/*** Top-level menu's label (disabled) ***/
.menu-bar > .container > .menu-button > .label:disabled {
-fx-opacity: 1.0;
}
/*** Top-level menu itself (selected/hovered) ***/
.menu-bar > .container > .menu-button:hover,
.menu-bar > .container > .menu-button:focused,
.menu-bar > .container > .menu-button:showing {
-fx-background-color: -fx-my-menu-color-highlighted;
}
/*** Top-level menu's label (selected/hovered) ***/
.menu-bar > .container > .menu-button:hover > .label,
.menu-bar > .container > .menu-button:focused > .label,
.menu-bar > .container > .menu-button:showing > .label {
-fx-text-fill: -fx-my-menu-font-color-highlighted;
}
/* MENU ITEM (children of a MENU BUTTON) */
/*** The item itself (not hovered/focused) ***/
.menu-item {
-fx-background-color: -fx-my-menu-color;
}
/*** The item's label (not hovered/focused) ***/
.menu-item .label {
-fx-text-fill: -fx-my-menu-font-color;
}
/*** The item's label (disabled) ***/
.menu-item .label:disabled {
-fx-opacity: 1.0;
}
/*** The item itself (hovered/focused) ***/
.menu-item:focused, .menu-item:hovered {
-fx-background-color: -fx-my-menu-color-highlighted;
}
/*** The item's label (hovered/focused) ***/
.menu-item:focused .label, .menu-item:hovered .label {
-fx-text-fill: -fx-my-menu-font-color-highlighted;
}
/* CONTEXT MENU */
/*** The context menu that contains a menu's menu items ***/
.context-menu {
-fx-background-color: -fx-my-menu-color;
}