title: How to create a JFXDrawer with sub Drawers That Slide From Inside Itself with JavaFX and SceneBuilder
body: <p>As this is my first post here I will try to be as specific as possible</p>
  
  <p>I want to create a sub drawer of the JFXDrawer but I keep seeing the how the drawer appears and slides in. Here is a gif of what I mean:</p>
  
  <p>The drawer must be inside the other drawer
  <a href="https://i.stack.imgur.com/MuttZ.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/MuttZ.gif" alt="enter image description here"></a></p>
  
  <p>Here is an example of what I want to acheave:</p>
  
  <p>The sub drawer is sliding from inside the other drawer
  <a href="https://i.stack.imgur.com/pS66z.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/pS66z.gif" alt="enter image description here"></a></p>
  
  <p>Here is the fxml structure:</p>
  
  <pre><code>&lt;BorderPane fx:id="root" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="350.0" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.unibul.controllers.MainController"&gt;
     &lt;top&gt;
        &lt;VBox&gt;
           &lt;children&gt;
              &lt;MenuBar style="-fx-background-color: #EDEDED;" BorderPane.alignment="CENTER"&gt;
                &lt;menus&gt;
                  &lt;Menu mnemonicParsing="false" text="File"&gt;
                    &lt;items&gt;
                      &lt;MenuItem mnemonicParsing="false" text="Close" /&gt;
                    &lt;/items&gt;
                  &lt;/Menu&gt;
                  &lt;Menu mnemonicParsing="false" text="Edit"&gt;
                    &lt;items&gt;
                      &lt;MenuItem mnemonicParsing="false" text="Delete" /&gt;
                    &lt;/items&gt;
                  &lt;/Menu&gt;
                  &lt;Menu mnemonicParsing="false" text="Help"&gt;
                    &lt;items&gt;
                      &lt;MenuItem mnemonicParsing="false" text="About" /&gt;
                    &lt;/items&gt;
                  &lt;/Menu&gt;
                &lt;/menus&gt;
              &lt;/MenuBar&gt;
              &lt;VBox&gt;
                 &lt;VBox.margin&gt;
                    &lt;Insets /&gt;
                 &lt;/VBox.margin&gt;
                 &lt;children&gt;
                    &lt;HBox spacing="10.0" style="-fx-background-color: white;" stylesheets="@../styles/style.css"&gt;
                       &lt;children&gt;
                          &lt;ImageView fx:id="btn_menu" fitHeight="25.0" fitWidth="25.0" pickOnBounds="true" preserveRatio="true"&gt;
                             &lt;image&gt;
                                &lt;Image url="@../images/buttons/menu.png" /&gt;
                             &lt;/image&gt;
                          &lt;/ImageView&gt;
                          &lt;Region HBox.hgrow="ALWAYS" /&gt;
                          &lt;Label fx:id="menuTitle" alignment="CENTER" contentDisplay="CENTER" graphicTextGap="25.0" maxWidth="900.0" minWidth="94.0" prefHeight="25.0" prefWidth="107.0" text="Personas" textAlignment="CENTER" textFill="#4d4d4d" wrapText="true"&gt;
                             &lt;font&gt;
                                &lt;Font name="Calibri Light" size="18.0" /&gt;
                             &lt;/font&gt;
                          &lt;/Label&gt;
                          &lt;Region minHeight="-Infinity" minWidth="-Infinity" HBox.hgrow="ALWAYS" /&gt;
                          &lt;ImageView fitHeight="25.0" fitWidth="25.0" pickOnBounds="true" preserveRatio="true"&gt;
                             &lt;image&gt;
                                &lt;Image url="@../images/buttons/info.png" /&gt;
                             &lt;/image&gt;
                             &lt;HBox.margin&gt;
                                &lt;Insets /&gt;
                             &lt;/HBox.margin&gt;
                          &lt;/ImageView&gt;
                       &lt;/children&gt;
                       &lt;effect&gt;
                          &lt;ColorAdjust /&gt;
                       &lt;/effect&gt;
                       &lt;padding&gt;
                          &lt;Insets bottom="8.0" left="8.0" right="8.0" top="8.0" /&gt;
                       &lt;/padding&gt;
                    &lt;/HBox&gt;
                 &lt;/children&gt;
              &lt;/VBox&gt;
           &lt;/children&gt;
        &lt;/VBox&gt;
     &lt;/top&gt;
     &lt;center&gt;
        &lt;AnchorPane prefHeight="300.0" prefWidth="208.0"&gt;
           &lt;children&gt;
              &lt;ScrollPane fitToWidth="true" hbarPolicy="NEVER" styleClass="scrollstyle" stylesheets="@../styles/style.css" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"&gt;
                 &lt;content&gt;
                  &lt;AnchorPane fx:id="root_pane" /&gt;
                 &lt;/content&gt;
              &lt;/ScrollPane&gt;
                &lt;JFXDrawer fx:id="drawer" alignment="TOP_LEFT" defaultDrawerSize="300.0" mouseTransparent="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="0.0"&gt;
                 &lt;children&gt;
                    &lt;JFXDrawer fx:id="sub_drawer" alignment="TOP_LEFT" defaultDrawerSize="250.0" direction="RIGHT" mouseTransparent="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" /&gt;
                 &lt;/children&gt;
              &lt;/JFXDrawer&gt;
           &lt;/children&gt;
        &lt;/AnchorPane&gt;
     &lt;/center&gt;
  &lt;/BorderPane&gt;
  </code></pre>
  
  <p>Here is the Controller:</p>
  
  <pre><code>VBox box = FXMLLoader.load(getClass().getResource("/layouts/SideMenu.fxml"));
          drawer.setSidePane(box);
          for (Node node : box.getChildren()) {
              System.out.println(node.getAccessibleText());
              if (node.getAccessibleText() != null) {
                  node.addEventHandler(MouseEvent.MOUSE_CLICKED, (e) -&gt; {
                      Stage appStage = (Stage) ((Node) e.getSource()).getScene().getWindow();
                      switch (node.getAccessibleText()) {
                          case "Settings":
                              VBox subSettings = null;
                              try {
                                  subSettings = FXMLLoader.load(getClass().getResource("/layouts/subMenus/SettingsSubMenu.fxml"));
                              } catch (IOException e1) {
                                  e1.printStackTrace();
                              }
                              sub_drawer.setSidePane(subSettings);
                              //Here I have to bring the drawer to front as it hides behind the other drawer
                              sub_drawer.toFront();
                              sub_drawer.open();
                              break;
                      }
                  });
              }
          }
  </code></pre>
  
  <p>So how can I make the drawer slide in from inside the other drawer? Thanks for the help in advance :)</p>