javafx实现左侧导航栏

左侧是通过Hbox和按钮实现，可以设置背景颜色和按钮相同。

点击按钮可以实现右侧界面的切换

右边使用了一个Hbox作为容器，将fxml文件加载到容器中，代码如下：

public class MainMenuController {
    public HBox right;
    //切换人员管理界面
    @FXML
    void PeopleManage(ActionEvent event) throws IOException {
        Node people_management = FXMLLoader.load(Objects.requireNonNull(getClass().getResource("../views/PeopleManagement.fxml")));
        //先清除掉原来的界面
        right.getChildren().clear();
        right.getChildren().add(people_management);
    }
}

左侧的导航栏按钮等可以用css样式实现，具体如下，注意要设置stylesheet以及styleClass：

      <HBox prefHeight="1198.0" prefWidth="255.0" stylesheets="@../style/MenuButton.css">
         <children>
            <Pane prefHeight="1198.0" prefWidth="256.0" styleClass="MenuBackground">
               <children>
                  <Button contentDisplay="CENTER" graphicTextGap="0.0" layoutY="223.0" mnemonicParsing="false" onAction="#PeopleManage" prefHeight="77.0" prefWidth="256.0" styleClass="MenuButton" text="人员管理" textAlignment="CENTER" textFill="WHITE" />
                  <Button contentDisplay="CENTER" graphicTextGap="0.0" layoutY="146.0" mnemonicParsing="false"  prefHeight="77.0" prefWidth="256.0" styleClass="MenuButton" text="摄像头管理" textAlignment="CENTER" textFill="WHITE" />
                  <Button contentDisplay="CENTER" graphicTextGap="0.0" layoutY="300.0" mnemonicParsing="false" prefHeight="77.0" prefWidth="256.0" styleClass="MenuButton" text="轨迹追踪" textAlignment="CENTER" textFill="WHITE" />
                  <Button contentDisplay="CENTER" graphicTextGap="0.0" layoutY="377.0" mnemonicParsing="false" onAction="#MonitorDisplay" prefHeight="77.0" prefWidth="256.0" styleClass="MenuButton" text="实时监控" textAlignment="CENTER" textFill="WHITE" />
               </children>
            </Pane>
         </children>
      </HBox>

css代码如下：

.MenuButton {
    -fx-text-fill: white;
    -fx-background-color: #222D32;
    -fx-font-size: 23;
}
.MenuButton:hover{
    -fx-background-color: #044474;
}
.MenuBackground{
    -fx-background-color: #222D32;
}