CODEWITHSUNDEEP
cssjavafxmenuhover
Owayl
Owayl

Reputation: 43

Java JavaFX how to make a left hover menu such as this one

Here is the kind of left hover menu i try to replicate in my JavaFx ERP, at first i thought it would be fine with MenuButton, unfortunately i can't get the menu folding/unfolding nor the sub-menus that way, i also tried Accordion but it doesnt behave the same. Does anyone have an idea on how i should proceed and which javafx components I should use to get there?

Menu folded on hover (hover shows full name and sub-menu):

enter image description here

Menu unfolded:

enter image description here

Upvotes: 2

Views: 2505

Answers (1)

SedJ601
SedJ601

Reputation: 13859

Main:

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

/**
 *
 * @author Sedrick
 */
public class SideView extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));

        Scene scene = new Scene(root);

        stage.setScene(scene);
        stage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }

}

Controller: 

import java.net.URL;
import java.util.ResourceBundle;
import javafx.fxml.Initializable;

/**
 *
 * @author Sedrick
 */
public class FXMLDocumentController implements Initializable {

    @Override
    public void initialize(URL location, ResourceBundle resources) {

    }    
}

FXML:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.SplitMenuButton?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.VBox?>

<AnchorPane id="AnchorPane" prefHeight="554.0" prefWidth="897.0" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sideview.FXMLDocumentController">
   <children>
      <VBox layoutX="7.0" prefHeight="200.0" prefWidth="162.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="0.0">
         <children>
            <SplitMenuButton mnemonicParsing="false" popupSide="RIGHT" text="SplitMenuButton">
              <items>
                <MenuItem mnemonicParsing="false" text="Action 1" />
                <MenuItem mnemonicParsing="false" text="Action 2" />
              </items>
            </SplitMenuButton>
            <SplitMenuButton mnemonicParsing="false" popupSide="RIGHT" text="SplitMenuButton">
              <items>
                <MenuItem mnemonicParsing="false" text="Action 1" />
                <MenuItem mnemonicParsing="false" text="Action 2" />
              </items>
            </SplitMenuButton>
         </children>
      </VBox>
   </children>
</AnchorPane>

You will need to add the jar "controlsFx" to your library and make sure you have the last Java JRE and JDK

Replace the words with images and you will also have to use css to make it look the way you want it to appear.

enter image description here

Upvotes: 0

Related Questions