Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Bouncing Menu using Qt Quick

From Wiki
Jump to: navigation, search

This article demonstrates how to create a drop-down menu with gravitational feel using Qt Quick.

Article Metadata
Code Example
Installation file: Media: BouncingMenuQML.sis
Tested with
Devices(s): N8 (Nokia Belle)
Platform(s): Symbian^3
Platform Security
Signing Required: Self-Signed
Keywords: Menu
Created: somnathbanik (02 Apr 2012)
Last edited: hamishwillee (11 Oct 2012)



In this article we will see how to create a drop-down menu with gravitational feel. To complete this example we need QML Easing effect. We will create five Rectangles and will drop them from top to bottom with OutBounce easing effect.

Note.pngNote: This image isn't animated. Try the example to see it working!


Let’s create an empty QML project. We create a Rectangle on the top of the screen which we call the menu bar and five different Rectangles with same state.

border.color: "White";
border.width: 2
height: 50
width: 300
radius: 5
anchors.horizontalCenter: parent.horizontalCenter
gradient: Gradient {
id: idleColor
GradientStop { position: 0.0; color: "#434343" }
GradientStop { position: 0.4; color: "#343434" }
GradientStop { position: 0.6; color: "#202020" }
GradientStop { position: 1.0; color: "#191919" }
opacity: mouseAreaMenu.pressed ? 0.5 : 1.0
anchors.fill: parent
anchors.margins: -5
height: parent.height+20
width: parent.width +20
onClicked: {
if (rectMenu1.state == '') rectMenu1.state = "right"; else rectMenu1.state = ''
if (rectMenu2.state == '') rectMenu2.state = "right"; else rectMenu2.state = ''
if (rectMenu3.state == '') rectMenu3.state = "right"; else rectMenu3.state = ''
if (rectMenu4.state == '') rectMenu4.state = "right"; else rectMenu4.state = ''
if (rectMenu5.state == '') rectMenu5.state = "right"; else rectMenu5.state = ''
console.log("Menu Clicked");
Text {
id: textMenu
text: qsTr("Click Me!")
color: "white"
anchors.verticalCenter: rectMenuBar.verticalCenter
anchors.horizontalCenter: rectMenuBar.horizontalCenter
font.pixelSize: 21
} // end of menu

When user clicks on the menu bar it changes the current state of the Rectangles to a new state with the PropertyChanges of its y value and also change its position with an OutBounce easing effect.

states : State {
name: "right"
PropertyChanges { target: rectMenu5; y: window.height - 390; }
transitions: Transition {
NumberAnimation { properties: "y"; easing.type: Easing.OutBounce; duration: 1000 }

Each menu item has a MouseArea event, which displays a Dialog when clicked.

titleText: "Menu Dialog"
onClickedOutside: close();
content: Item {
id: itemDialog
Text {
id: textDialog
font.pixelSize: 21
color: "white"
anchors.topMargin: 10
anchors.left: parent.left
anchors.leftMargin: 20


This article shows is a very basic use of QML Easing effect to create an animated menu item which has a gravitational/bouncing feel.

Source Code


This page was last modified on 11 October 2012, at 01:20.
56 page views in the last 30 days.