Side Menu

Illustrates how to create reusable components and an animated menu for applying effects.

"Side menu example application"

Side Menu displays a menu bar and a side menu that slides open when users click the menu icon. The appearance of the menu bar buttons changes when users hover the cursor over them or select them.

Each button opens an image file. The side menu can be used to apply graphical effects, such as hue, saturation, and blur, to the images.

Creating Reusable Buttons

We select File > New File or Project > Files and Classes > Qt Quick Controls > Custom Button to create a reusable menu bar button that we call CustomButton.

The button can have the following states: checked, hover, pressed, and normal. We construct the button using different images for the button background, frame, and front. We then add states in the States view for each of the button states. In each state, we turn the visibility of the appropriate images on or off in the button properties, to change the appearance of the button.

"CustomButton QML type states"

To change the button text when the button state changes, we bind the text property to the state of the button in the Properties view. When control is selected in the Navigator, we select the Settings menu for the Text property, and then select Set Binding. In the Binding Editor, we set the binding to control.state.

We want the buttons to be checkable, so we set the checkable property to true.

We now select Set when Condition in the Settings menu for the states to bind the properties to the states using when conditions. First, we specify that a button instance enters the checked state when the checked property is set to true. This is how the code will look in the Text Editor:

    states: [
        State {
            name: "checked"
            when: control.checked

We then bind the hover state to the hovered property being set to true, while the checked and pressed properties are set to false:

    ...
        State {
            name: "hover"
            when: control.hovered && !control.checked && !control.pressed

Finally, the button state is set to normal, when all the properties are set to false:

    ...
        State {
            name: "normal"
            when: !control.pressed && !control.checked &&!control.hovered

We can now use CustomButton instances to create a menu bar.

Constructing a Menu Bar

We construct the menu bar in the MainFile.ui.qml file using the Form Editor. The CustomButton type is listed in Library > QML Types > My QML Components. We drag and drop several instances of the type to the scene and enclose them in a RowLayout type to lay them out as a menu bar.

We can change the properties of each CustomButton instance separately in the Properties view. We want only one of the menu bar buttons to be checked at any time, so that checking another button automatically unchecks the previously checked one. Therefore, we set the autoExclusive property to true for all button instances.

In addition, we set the Checked property to true for the first button instance on the menu bar to make it appear selected.

We can now select the "Run button" (Run) button to run the application and test our menu bar.

Creating a Side Menu

We can now continue to create a side menu that slides open when users click the burger menu. In the Form Editor, we use the Text and Slider components to create separate submenus for each set of effects we want to apply to the images. We use a background image for the menu background and a BurgerMenu custom QML type for the burger menu icon.

"SliderMenu type"

We add states to the SideMenu.qml file in the Form Editor. When the application starts, the side menu is in the closed state, which means that it is hidden. When users click the burger menu, the onClicked signal handler triggers the transition to the opening state and runs an animation. When the animation finishes, the side menu state changes to open and the side menu is fully visible.

When users click the burger menu again, the state changes to closing and another animation is run that closes the side menu. When the animation finishes, the side menu returns to the closed state.

We select the (Add) button in the States view to add the states:

"Side menu states"

We then select the button in the Timeline view to add animation for transitions to the open and close states:

"Side menu timeline settings"

The closing animation is just the opening animation played backwards to hide the side menu. We want the opening animation to be slower than the closing animation, so we specify a shorter duration for the closing animation. This does not affect the duration of the timeline itself.

We want to change the position of the outline and background images. To start recording the transition from the closed state to the open state, we select imageOutline in Navigator. We check that the playhead is at frame 0, and then select the (Auto Key (K)) button (or press k).

At frame 0, we set the X coordinate to -423 in Properties > Geometry > Position. We then move the playhead to frame 1000 and set the X coordinate to 0.

When we deselect the record button to stop recording the timeline, the new timeline appears in the view.

"Timeline view"

We then record the transition of the imageBackground image. At frame 0, we set the X coordinate to -424 again. We then move the playhead to frame 400 and select Insert Keyframe in the Settings menu of the X coordinate. We keep the value of the X coordinate -424. We then move the playhead to frame 1000 and set the X coordinate to 0.

We select "Timeline Settings button" to open the Timeline Settings dialog. In the Transitions to states field, we select the state to switch to when the animation finishes. In the lower part of the dialog, we bind the states that don't have animations to fixed frames.

For more information about using the timeline, see Creating Animations.

Connecting the Burger Menu to Actions

In SideMenu.qml, we use connections to bind the action of clicking the burger menu to the signal handler for triggering the opening or closing animation, depending on the current state. We create the connections in the Connections view.

We use property changes to disable the burger menu until the animation finishes and to hide and show the side menu:

        State {
            name: "opening"

            PropertyChanges {
                target: timelineAnimation
                running: true
            }

            PropertyChanges {
                target: burger_menu
                enabled: false
            }

            PropertyChanges {
                target: slidermenu
                visible: false
            }
        },

The side menu is fully visible and accepts input only in the open state.

For more information about connecting objects to signals, see Connecting Objects to Signals.

Applying Effects

We nest the effects in an effects stack and bind them to the Slider type instances. The effects apply to all the images in the example application, not just the currently open one.

We use property bindings to connect the controls in the slider menu to graphical effects. To have access to the properties from all the slider type instances, we export them as aliases in SliderMenu.ui.qml. We select Export Property as Alias in the Settings menu of the Value property in Properties > Slider.

We use the Form Editor to create the effect stack in the EffectStack.qml file:

"Effects stack in the Navigator"

We use the Image type as the last item in the stack to display images that we apply the effects to. We export the image source property as an alias to be able to switch the image inside the stack.

For more information about the available Qt graphical effects, see Applying Visual Effects.

Example Files

Files:

Images:

Available under certain Qt licenses.
Find out more.