How to accomplish 3 horizontal line menu in fxml

Question

I want to create menu like "Firefox (Three horizontal line - top right side) Menu". I don't know how to create this line of overlay menu in FXML. Have anybody any idea about this?

Thank a lot.

Answer 1

Here an example to give you a hint, further improvements and modifications are up to you:

@Override
public void start( final Stage primaryStage )
{
    Line l1 = new Line( 0.5, 0, 15.5, 0 );
    l1.setStrokeWidth( 2 );
    Line l2 = new Line( 0.5, 5, 15.5, 5 );
    l2.setStrokeWidth( 2 );
    Line l3 = new Line( 0.5, 10, 15.5, 10 );
    l3.setStrokeWidth( 2 );

    MenuButton m = new MenuButton();
    m.setGraphic( new Group( l1, l2, l3 ) );
    m.getItems().addAll( new MenuItem( "Settings" ), new MenuItem( "About" ) );

    Platform.runLater(() ->
    {
        // hide the arrow of menuButton
        m.lookup( ".arrow" ).setStyle( "-fx-background-insets: 0; -fx-padding: 0; -fx-shape: null;" );
        // hide the arraw-button pane, to remove unnecessary padding
        m.lookup( ".arrow-button" ).setStyle( "-fx-padding: 0" );
    });

    final Scene scene = new Scene( new Group( m ), 400, 300 );
    primaryStage.setScene( scene );
    primaryStage.show();
}

The lines are put into MenuButton's graphic property. Since menubutton has an triangle arrow, we need to hide it by looking it up.

Alternatively, instead of using Line you can put a SVG image (String) to shape property of the button.