I am trying to do something like this
Image to what I mean
I have tried following this question Text on java fx menu but nothing is working, I end up with this my version. I am also not sure how to make it responsive so if it's in a larger size it will change to suit that screen size. (New to JavaFX)
Here is the code
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.layout.AnchorPane?>
<!--<AnchorPane id="menu-bar-container" stylesheets="@TestCSS.css" xmlns="http://javafx.com/javafx/8.0.111">-->
<AnchorPane xmlns:fx="http://javafx.com/fxml/1" styleClass="menu-bar" id="menu-bar-container" stylesheets="@TestCSS.css">
<MenuBar id="menu-bar" AnchorPane.leftAnchor="0" AnchorPane.topAnchor="0">
<Menu text="File">
<items>
<MenuItem text="Close" />
</items>
</Menu>
<Menu text="Help">
<items>
<MenuItem text="About" />
</items>
</Menu>
</MenuBar>
<Label style="-fx-font-weight: bold; -fx-text-fill: black; " text="Some text" AnchorPane.bottomAnchor="0" AnchorPane.rightAnchor="0" AnchorPane.topAnchor="0" />
</AnchorPane>
My style code
#menu-bar {
-fx-padding: 0 ;
-fx-background-color: transparent ;
-fx-background-insets: 0 ;
-fx-background-radius: 0 ;
}
#menu-bar-container {
-fx-padding: 0.0em 0.666667em 0.0em 0.666667em; /* 0 8 0 8 */
-fx-background-color:
linear-gradient(to bottom, derive(-fx-base,75%) 0%, -fx-outer-border 90%),
linear-gradient(to bottom, derive(-fx-base,46.9%) 2%, derive(-fx-base,-2.1%) 95%);
-fx-background-insets: 0 0 0 0, 1 0 1 0;
-fx-background-radius: 0, 0 ;
-fx-background-color: red ;
}