3.1. Site Menu | Elements

Build a desktop oriented menu for your Home Screen!

Step 3:

Alignment, and Orientation

3.

3. Video

2. GIF

3.1.New child Divs, inside "sitemenu":

Name 1: sitemenumap

Name 2: sitemenulogo

Name 3: sitemenuusers

3.1. Written steps

-Inside the Element Tree-

A. [Click] the Div Icon:

• The button is located at the top of the panel, below the Screens.

• The Icon will turn blue, and your pointer will change.

B. Drag your pointer and click "sitemenu":

• The new element will appear as a child of the Screen.

• The Div will be created with the default name "Layer #".

-Inside the Properties Panel-

C. [Click] the current name of the Div and [type] the new one:

• The new name should be lowercase, without any spaces or special characters.

• The name will be updated in the Element Tree after you have [clicked] away.

3.2. Set "sitemenu" Size:

Width: Fill

Height: Wrap

3.2. Written steps

-Inside the Properties Panel-

A. [Click] the Fill button, inside the Width section:

• The horizontal size of the Div will be the 100% of the screen.

• You cannot use Fill size in the case there is a parent element in Wrap size.

B. [Click] the Wrap button, inside the Height section:

• The vertical size of the Div will become its child's maximum combined size.

• You cannot use Wrap size in the case there is a child element in Fill size.

3.3. Set "sitemenu" Alignment:

Main: Axis center

Cross: Axis distribute

3.3. Written steps

-Inside the Properties Panel-

A. [Click] the Main Axis center button, inside the Alignment section:

• In the Top-Down first row of buttons, choose the Left-to-right second one.

• The items are packed to each other toward the center.

B. [Click] the Cross Axis distribute button, inside the Alignment section:

• In the Top-Down second row of buttons, choose the Left-to-right fourth one.

• The items are distributed with the first and last one flushed to the edges.

3.4. Set "sitemenu" Orientation:

Horizontal

3.4. Written steps

-Inside the Properties Panel-

[Click] the Horizontal button, inside the Orientation section:

• Will set the Div's flex-direction to row.

• Will maintain Div's Main and Cross axis Alignment.

Step 4:

Texts, Media, and Icon

4.

4. Video

3. GIF

4.1. New child Texts, inside "sitemenumap":

Name 1: sitemenutext1

Name 2: sitemenutext2

Name 3: sitemenutext3

4.1. Written steps

-Inside the Element Tree-

A. [Click] the Text Icon:

• The button is located at the top of the panel, below the Screens.

• The Icon will turn blue, and your pointer will change.

B. Drag your pointer and click "sitemenumap":

• The new element will appear as a child of the Screen.

• The Text will be created with the default name "Text #".

-Inside the Properties Panel-

C. [Click] the current name of the Text and [type] the new one:

• The new name should be lowercase, without any spaces or special characters.

• The name will be updated in the Element Tree after you have [clicked] away.

3.2. New child Media, inside "sitemenulogo":

Name: sitemenumedia1

4.2. Written steps

-Inside the Element Tree-

A. [Click] the Media Icon:

• The button is located at the top of the panel, below the Screens.

• The Icon will turn blue, and your pointer will change.

B. Drag your pointer and click "sitemenulogo":

• The new element will appear as a child of the Screen.

• The Media will be created with the default name "Image #".

-Inside the Properties Panel-

C. [Click] the current name of the Media and [type] the new one:

• The new name should be lowercase, without any spaces or special characters.

• The name will be updated in the Element Tree after you have [clicked] away.

3.3. New child Text, inside "sitemenuusers":

Name: sitemenutext4

4.3. Written steps

-Inside the Element Tree-

A. [Click] the Text Icon:

• The button is located at the top of the panel, below the Screens.

• The Icon will turn blue, and your pointer will change.

B. Drag your pointer and click "sitemenuusers":

• The new element will appear as a child of the Screen.

• The Text will be created with the default name "Text #".

-Inside the Properties Panel-

C. [Click] the current name of the Text and [type] the new one:

• The new name should be lowercase, without any spaces or special characters.

• The name will be updated in the Element Tree after you have [clicked] away.

3.4. New child Icon, inside "sitemenuusers":

Name: sitemenuicon1

4.4. Written steps

-Inside the Element Tree-

A. [Click] the Icon Icon:

• The button is located at the top of the panel, below the Screens.

• The Icon will turn blue, and your pointer will change.

B. Drag your pointer and click "sitemenuusers":

• The new element will appear as a child of the Screen.

• The Icon will be created with the default name "Icon #".

-Inside the Properties Panel-

C. [Click] the current name of the Icon and [type] the new one:

• The new name should be lowercase, without any spaces or special characters.

• The name will be updated in the Element Tree after you have [clicked] away.

3.5. New child Div, inside "sitemenuusers":

Name: sitemenudiv1

4.5. Written steps

-Inside the Element Tree-

A. [Click] the Div Icon:

• The button is located at the top of the panel, below the Screens.

• The Icon will turn blue, and your pointer will change.

B. Drag your pointer and click "sitemenuusers":

• The new element will appear as a child of the Screen.

• The Div will be created with the default name "Layer #".

-Inside the Properties Panel-

C. [Click] the current name of the Div and [type] the new one:

• The new name should be lowercase, without any spaces or special characters.

• The name will be updated in the Element Tree after you have [clicked] away.

3.6. New child Icons, inside "sitemenudiv1":

Name 1: sitemenuicon2

Name 2: sitemenuicon3

4.6. Written steps

-Inside the Element Tree-

A. [Click] the Icon Icon:

• The button is located at the top of the panel, below the Screens.

• The Icon will turn blue, and your pointer will change.

B. Drag your pointer and click "sitemenudiv1":

• The new element will appear as a child of the Screen.

• The Icon will be created with the default name "Icon #".

-Inside the Properties Panel-

C. [Click] the current name of the Icon and [type] the new one:

• The new name should be lowercase, without any spaces or special characters.

• The name will be updated in the Element Tree after you have [clicked] away.

Step 5:

Size, Alignment, and Orientation

5.

5. Video

4. GIF

5.1. Set "sitemenumap" Size:

Width: Fill

Height: Fill

5.1. Written steps

-Inside the Properties Panel-

A. [Click] the Fill button, inside the Width section:

• The horizontal size of the Div will be the 100% of the screen.

• You cannot use Fill size in the case there is a parent element in Wrap size.

B. [Click] the Fill button, inside the Height section:

• The vertical size of the Div will be the 100% of the screen.

• You cannot use Fill size in the case there is a parent element in Wrap size.

5.2. Set "sitemenu" Alignment:

Main: Axis center

Cross: Axis center

5.2. Written steps

-Inside the Properties Panel-

A. [Click] the Main Axis center button, inside the Alignment section:

• In the Top-Down first row of buttons, choose the Left-to-right second one.

• The items are packed to each other toward the center.

B. [Click] the Cross Axis center button, inside the Alignment section:

• In the Top-Down second row of buttons, choose the Left-to-right second one.

• The items are packed to each other toward the center.

5.3. Set "sitemenulogo, sitemenuusers, and sitemenudiv1" Size:

Width: Wrap

Height: Wrap

5.3. Written steps

-Inside the Properties Panel-

A. [Click] the Wrap button, inside the Width section:

• The horizontal size of the Div will become its child's maximum combined size.

• You cannot use Wrap size in the case there is a child element in Fill size.

B. [Click] the Wrap button, inside the Height section:

• The vertical size of the Div will become its child's maximum combined size.

• You cannot use Wrap size in the case there is a child element in Fill size.

5.3. Set "sitemenumap, sitemenuusers, sitemenudiv1" Orientation:

Horizontal

5.4. Written steps

-Inside the Properties Panel-

[Click] the Horizontal button, inside the Orientation section:

• Set the Div's flex-direction to row.

• Maintain Div's Main and Cross axis Alignment.

Step 6:

Position, and z-index

6.

6. Video

5. GIF

6.1. Set "sitemenu" Position:

Relative

6.1. Written steps

-Inside the Properties Panel-

[Click] the Rel button, inside the Position section:

• In the row of buttons, choose the left-to-right third one.

• The Div is offset relative to itself with a new stacking context.

• Its child elements are positioned relative to the parent.

6.2. Set "sitemenumap" Position:

Absolute

6.2. Written steps

-Inside the Properties Panel-

[Click] the Abs button, inside the Position section:

• In the row of buttons, choose the left-to-right second one.

• The Div's final position is determined by the values of top, right, bottom, and left.

• It is positioned relative to its closest positioned ancestor or initial containing block.

6.3. Set "sitemenulogo, and sitemenuusers" z-index:

1

6.3. Written steps

-Inside the Properties Panel-

[Click] the z-index container and [type] the new value:

• You can also change the size value using the up and down arrows.

• You can only use positive values.

• It changes the default auto value into a particular stack level.

Step 7:

Image Source, Text, and Icon

7.

7. Video

7. GIF

7.1. Set "sitemenumedia1" Image Source:

Assets/Brand/Airbnb_logo.png

7.1. Written steps

-Inside the Properties Panel-

[Click] the Image Source dropdown and [click] the FilePath:

• The following media formats are allowed: JPG, JPEG, PNG and GIF.

• All the files need to be within the main projects folder.

• Files can be located in different subfolders.

7.2. Set "sitemenutext1" Text:

Stays

7.2. Written steps

-Inside the Properties Panel-

[Click] the Text container and [type]:

• You will have to erase the default text: Type...

• You can also copy and paste text from other sources.

• You can use any type of characters.

• You cannot create a line break with the [enter] key.

• You can create line breaks by adjusting the Text Width.

7.3. Set "sitemenutext2" Text:

Experiences

7.3. Written steps

-Inside the Properties Panel-

[Click] the Text container and [type]:

• You will have to erase the default text: Type...

• You can also copy and paste text from other sources.

• You can use any type of characters.

• You cannot create a line break with the [enter] key.

• You can create line breaks by adjusting the Text Width.

7.4. Set "sitemenutext3" Text:

Online Experiences

7.4. Written steps

-Inside the Properties Panel-

[Click] the Text container and [type]:

• You will have to erase the default text: Type...

• You can also copy and paste text from other sources.

• You can use any type of characters.

• You cannot create a line break with the [enter] key.

• You can create line breaks by adjusting the Text Width.

7.5. Set "sitemenutext4" Text:

Airbnb your home

7.5. Written steps

-Inside the Properties Panel-

[Click] the Text container and [type]:

• You will have to erase the default text: Type...

• You can also copy and paste text from other sources.

• You can use any type of characters.

• You cannot create a line break with the [enter] key.

• You can create line breaks by adjusting the Text Width.

7.6. Set "sitemenuicon1" Icon:

language

7.6. Written steps

-Inside the Properties Panel-

[Click] the Icon container and [click] the Icon:

• You can use the Icon name to find it through the SearchBar.

• You can also find it through each Material category's dropdown.

7.7. Set "sitemenuicon2" Icon:

menu

7.7. Written steps

-Inside the Properties Panel-

[Click] the Icon container and [click] the Icon:

• You can use the Icon name to find it through the SearchBar.

• You can also find it through each Material category's dropdown.

7.8. Set "sitemenuicon3" Icon:

person_outline

7.8. Written steps

-Inside the Properties Panel-

[Click] the Icon container and [click] the Icon:

• You can use the Icon name to find it through the SearchBar.

• You can also find it through each Material category's dropdown.

,