JavaFX Slide out menu | 易学教程

问题

I'm working on a project that needs a slide out menu, preferably on hover it slides out, how would I go about doing this? I want to program the slide out menu in a FXML file.

Is there anyway to do this? What would I use(Split Pane, Separators)? Thanks!

回答1:

Use a TranslateTransition to move the menu. Use a Pane to place the menu above the normal content.

The following example doesn't use fxml for simplicity, but of course you can create the nodes from fxml too:

@Override
public void start(Stage primaryStage) {
    Pane root = new Pane();
    root.setPrefSize(400, 300);
    Text text = new Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit."
            + " Nullam vehicula justo et sem venenatis mattis non ut quam. "
            + "Aliquam erat volutpat. Etiam maximus magna quis tortor "
            + "pellentesque, in sollicitudin odio ullamcorper. Phasellus "
            + "a quam nisl. Fusce at urna dapibus, elementum quam "
            + "ultricies, posuere ipsum. Etiam varius orci a tortor "
            + "vestibulum fringilla. Sed consectetur nunc rhoncus diam "
            + "volutpat, vitae finibus eros cursus. Praesent quam mauris, "
            + "lacinia nec metus vitae, blandit faucibus tortor.");

    text.setWrappingWidth(385);
    text.setLayoutX(15);
    text.setLayoutY(20);

    VBox menu = new VBox();
    menu.setId("menu");
    menu.prefHeightProperty().bind(root.heightProperty());
    menu.setPrefWidth(200);

    menu.getChildren().addAll(new Button("Something"), new Button("Something else"), new Button("Something different"));

    menu.getStylesheets().add(getClass().getResource("menustyle.css").toExternalForm());
    menu.setTranslateX(-190);
    TranslateTransition menuTranslation = new TranslateTransition(Duration.millis(500), menu);

    menuTranslation.setFromX(-190);
    menuTranslation.setToX(0);

    menu.setOnMouseEntered(evt -> {
        menuTranslation.setRate(1);
        menuTranslation.play();
    });
    menu.setOnMouseExited(evt -> {
        menuTranslation.setRate(-1);
        menuTranslation.play();
    });

    root.getChildren().addAll(text, menu);

    Scene scene = new Scene(root);

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

menustyle.css

#menu {
    -fx-background-color: #88F;
    -fx-spacing: 5;
}

#menu .button {
    -fx-pref-height: 30;
    -fx-pref-width: 200;
    -fx-background-color: #66F;
}

#menu .button:hover {
    -fx-background-color: #F6F;
}

来源：https://stackoverflow.com/questions/37234729/javafx-slide-out-menu

标签

java

javafx

fxml