PDA

View Full Version : Sencha Touch 2 Menu



sailei1
23 Jan 2013, 1:35 AM
41465


/**
* @Author sai
*/
Ext.define("Sencha.view.Main", {
extend : 'Ext.tab.Panel',
xtype : 'Main',
//requires: ['Sencha.view.MenuButton','Sencha.view.MenuItemButton'],
config : {
tabBar : {
docked : 'bottom'
},
scrollable :{
direction : 'horizontal'
},
items:[{
title : '??',
iconCls : 'home',
loadMask : true,
html: ' Screen 1'
}, {
title : '????',
iconCls : 'user',
loadMask : true,
html: 'Screen 2'
}],
listeners : {


initialize : function(panel) {

debugger;
var b=panel.getTabBar().element.down('div[class^="x-tab-normal x-tab x-iconalign-center"]:nth-child(2)').dom;
var el = document.createElement("div");
el.setAttribute("class","x-tab-normal x-tab x-iconalign-center x-tab-icon x-layout-box-item x-stretched");
b.parentNode.insertBefore(el,b);
var button=Ext.create('Sencha.view.MenuButton',{left:10,bottom:0}).element.dom;
el.appendChild(button);
var div = document.createElement("div");
var style="position:absolute; padding: 10px; height: 62px !important;bottom:-20px !important; width: 62px !important; background:url(resources/images/roB.png) 0 0 no-repeat;background-size:100% 100%;"
div.setAttribute("style",style);
div.setAttribute("id","radius");
el.appendChild(div);
var items=[
{xtype: 'menuitembutton',iconCls:'user',route:'contact',id:'test01',t:'test01'},
{xtype: 'menuitembutton',iconCls:'user',route:'mail',id:'test02',t:'test02'},
{xtype: 'menuitembutton',iconCls:'user',route:'app',id:'test03',t:'test03'},
{xtype: 'menuitembutton',iconCls:'user',route:'app',id:'test04',t:'test04'},
{xtype: 'menuitembutton',iconCls:'user',route:'app',id:'test05',t:'test05'}
];
Ext.Viewport.add(items);


}
}
}
})


/**
* ???????
* @Author sai
*/
Ext.define('Sencha.controller.Menu', {
extend: 'Ext.app.Controller',
requires: [
'Sencha.view.MenuItemButton',
'Sencha.view.MenuButton',
'Ext.util.DelayedTask'
],


config: {
before: {
showContact: 'authenticate'
},
routes: {
'mail':'showMail',
'contact': 'showContact',
'main':'showMain'
},


refs: {
menubutton: 'menubutton',
menuitembutton: 'menuitembutton'
},


control: {
menubutton: {
tap: 'onMenuButtonTap'
},
menuitembutton: {
tap: 'onMenuItemButtonTap'
}
}
},










/**
*
* @param {} button
*/
onMenuItemButtonTap: function(button) {
var menuButton = Ext.ComponentQuery.query('menubutton')[0];
button.addCls('tapped');
button.setZIndex(0);
this.closeMenu(menuButton);
//var h= this.getApplication().getHistory();
this.redirectTo(button.getRoute());
},


/**
*
* @param {} menuButton
*/
onMenuButtonTap: function(menuButton) {
if (!menuButton.getIsOpen()) {
// open menu
this.openMenu(menuButton);
} else {
// close Menu
this.closeMenu(menuButton);
}
},




openMenu: function(menuButton) {


Ext.Viewport.setMasked(true);
var masks= Ext.ComponentQuery.query('mask');
for(var i=0, max=0; i<masks.length; i++){
max = Math.max( max,masks[i].getZIndex() || 0 );
if(!masks[i].isDisabled()){
masks[i].addListener('tap',function(){
Ext.Viewport.setMasked(false);
var items = Ext.ComponentQuery.query('menuitembutton'),menuButton=Ext.ComponentQuery.query('menubutton')[0];
menuButton.replaceCls('open', 'close');
if(Ext.get("bg")){
Ext.get("bg").destroy();}

var left= document.body.clientWidth*0.5;
var bottom= 12;
Ext.each(items, function(item, index) {
if (item.getCls().indexOf('tapped') === -1) {
item.replaceCls('open', 'close');
item.setLeft(left);
item.setBottom(bottom);
item.setZIndex(0);
item.fireEvent('hide');
} else {

var task = Ext.create(
'Ext.util.DelayedTask',
function() {
item.removeCls('menuitembutton');
item.setLeft(left);
item.setBottom(bottom);
item.removeCls('tapped');
}
);
item.fireEvent('hide');
task.delay(900);

}
});
menuButton.setIsOpen(false);





});
}
}
var el = document.createElement("div");
el.setAttribute("class","s-bbox");
el.setAttribute("id","bg");
Ext.Viewport.element.appendChild(el);

var items = Ext.ComponentQuery.query('menuitembutton'),
bottom = menuButton.getBottom(),
left = menuButton.getLeft(),
radius = 150,
abschnitte = items.length - 1,
winkel = 130 / abschnitte;


menuButton.replaceCls('close', 'open');
//debugger;
// if(items.length=='0'){return;}
if(items.length=='1'){
items[0].addCls('menuitembutton');
items[0].replaceCls('close', 'open');
var left= document.body.clientWidth*0.5;
var bottom= 160;
items[0].setLeft(left);
items[0].setBottom(bottom);
items[0].setZIndex(max+1);
items[0].fireEvent('show');

}
else{

Ext.each(items, function(item, index) {
item.addCls('menuitembutton');
item.replaceCls('close', 'open');


var currentAngle = (155 - (winkel * (abschnitte - index))),
radiant = Math.PI / 180,
currnetRadiant = radiant * currentAngle,
x = Math.round(Math.cos(currnetRadiant) * radius),
y = Math.round(Math.sin(currnetRadiant) * radius);


item.setLeft(document.body.clientWidth*0.5 + x);
item.setBottom(bottom + y);
item.setZIndex(max+1);
item.fireEvent('show');
});}


menuButton.setIsOpen(true);
},


closeMenu: function(menuButton) {



Ext.Viewport.setMasked(false);

var items = Ext.ComponentQuery.query('menuitembutton');
menuButton.replaceCls('open', 'close');
if(Ext.get("bg")){
Ext.get("bg").destroy();}

var left= document.body.clientWidth*0.5;
var bottom= 12;
Ext.each(items, function(item, index) {
if (item.getCls().indexOf('tapped') === -1) {
item.replaceCls('open', 'close');
item.setLeft(left);
item.setBottom(bottom);
item.setZIndex(0);
item.fireEvent('hide');
} else {


var task = Ext.create(
'Ext.util.DelayedTask',
function() {
item.removeCls('menuitembutton');
item.setLeft(left);
item.setBottom(bottom);
item.removeCls('tapped');
}
);
item.fireEvent('hide');
task.delay(900);


}
});
menuButton.setIsOpen(false);
},
showContact:function(){
debugger;




},
showMain:function(){
debugger;

},
showMail:function(){
debugger;
},
authenticate:function(action){
debugger;
action.resume();
// var usercode= window.localStorage.getItem("usercode")
// if(usercode){
// action.resume();}else{
//
// }
}
});



/**
* @Author sai
*/
Ext.define('Sencha.view.MenuButton', {
extend: 'Ext.Button',
requires: ['Ext.Button'],
alias: 'widget.menubutton',
xtype: 'menubutton',


config: {
//iconCls: 'add',
ui : 'pathmenu',
iconMask: true,

height: 50,
width: 50,
zIndex:'10',
cls: 'menubutton',
listeners:{
'hide':function(){
var div = document.getElementById("radius");
var style="display:none";
div.setAttribute("style",style);
},
'show':function(){
//var left=parseInt(this.getLeft())-parseInt(5);
var left=3;
var div = document.getElementById("radius");
var style="position:absolute; padding: 10px; height: 62px !important; width: 62px !important; left: "+left+"px !important; bottom: 5px !important; background:url(images/roB.png) 0 0 no-repeat;background-size:100% 100%;"
div.setAttribute("style",style);
}
},
isOpen: false
}
});



/**
* ??????
* @Author sai
*/
Ext.define('Sencha.view.MenuItemButton', {
extend: 'Ext.Button',
alias: 'widget.menuitembutton',
xtype: 'menuitembutton',


config: {
iconMask: true,
ui : 'pathmenu',
t:'',
height: 40,
width: 40,
zIndex:'0',
cls: 'menuitembutton',
isActive: false,
listeners:{'initialize':function(){
this.setLeft(document.body.clientWidth*0.5);
this.setBottom(15);
this.setStyle('margin-left:-20px');
var el = document.createElement("div");
el.id=this.getId()+'-field';
el.innerHTML=this.getT();
el.setAttribute("class", "s-text");
el.setAttribute("style","display:none;");
Ext.Viewport.element.appendChild(el);
},
'resize':function(){
// debugger;
this.setLeft(document.body.clientWidth*0.5);
this.setBottom(15);
},
'show':function(){
//debugger;
var id=this.getId()+'-field';
var el=document.getElementById(id);
var b=this.getBottom()-20;
var style='left:'+this.getLeft()+'px !important; bottom:'+b+'px !important; margin-left:-20px; z-index: '+this.getZIndex()+'!important;';
el.setAttribute("style",style);
},
'hide':function(){
//debugger;
var id=this.getId()+'-field';
var el=document.getElementById(id);
el.setAttribute("style","display:none;");

}
},
route: ''
}
});








css




.x-button.x-button-pathmenu{background:url(../images/ro.png) 0 0 no-repeat;background-size:100% 100%;/*background-color:#f7f7f7;background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dedede), color-stop(10%, #ebebeb), color-stop(65%, #f7f7f7), color-stop(100%, #f9f9f9));background-image:-webkit-linear-gradient(top, #dedede,#ebebeb 10%,#f7f7f7 65%,#f9f9f9);background-image:linear-gradient(top, #dedede,#ebebeb 10%,#f7f7f7 65%,#f9f9f9);border:3px solid #fff;*/border-radius:1.75em;padding:0.5em;border:0;}
.x-button.x-button-pathmenu.menubutton{background:url(../images/roa.png) 0 0 no-repeat;background-size:100% 100%;}
.x-button.x-button-pathmenu.open{-webkit-transform:rotate(360deg) translateZ(0)}
.x-button.x-button-pathmenu.close{-webkit-transform:rotate(-360deg) translateZ(0)}
.x-button.x-button-pathmenu.menubutton{-webkit-transition:all 300ms}
.x-button.x-button-pathmenu.menubutton.open{-webkit-transform:rotate(45deg) translateZ(0);
background:url(../images/roa.png) 0 0 no-repeat #1E93E4;
background-size:100% 100%;
}
.x-button.x-button-pathmenu.menubutton.close{-webkit-transform:rotate(0deg) translateZ(0)}
.x-button.x-button-pathmenu.menuitembutton{-webkit-transition-duration:300ms;-webkit-transition-property:opacity, left, bottom, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.68, -0.55, 0.265, 1.55);opacity:1}
.x-button.x-button-pathmenu.menuitembutton.tapped{-webkit-transform:rotate(180deg) scale(4) translatez(0);opacity:0}


.s-bbox{height:135px;width:270px;
background:none;
background:-webkit-gradient(radial,bottom center,0,bottom center,100,from(rgba(0,0,0,0.4)),color-stop(80%,rgba(0,0,0,0.6)),to(rgba(0,0,0,0.2)));
background:-webkit-radial-gradient(bottom center,135px 135px,rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.6) 80%,rgba(0,0,0,0.2) 100%);
background-image: radial-gradient(bottom center, circle, rgba(50,50,50,1) 0%, rgba(68,68,68,1) 100%);
border-radius:135px 135px 0 0;position:absolute;left:50%;margin-left:-135px;bottom:3em;}
.s-text{
position:absolute; height: 14px !important; width: 40px !important; text-align:center; font-size:12px; color:#fff; font-weight:bold;
-webkit-transition-duration: 300ms;-webkit-transition-property: opacity, left, bottom, -webkit-transform;-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);}

mitchellsimoens
25 Jan 2013, 8:49 AM
Thanks for the contribution

digeridoo
5 Feb 2013, 3:03 AM
Thanks for sharing....I think it is missing some files when I test it. This is what I see, it says missing: roB.png, roa.png and ro.png.

Is there a live example we can see online?

sailei1
14 Feb 2013, 5:43 AM
418354183641837

anilvardhan.p
18 Aug 2014, 5:50 PM
Hi Sai,
After adding the code i am getting this error. I am using sencha touch 2.3.
Could you please help me on fixing this.

inside intialize fucntion:
var b=panel.getTabBar().element.down('div[class^="x-tab-normal x-tab x-iconalign-center"]:nth-child(2)').dom;

here its showing the error.
Uncaught TypeError: Cannot read property 'dom' of null.


Advance thanks.

sailei1
25 Aug 2014, 5:14 AM
I used version is 2.0.1

djougue
26 May 2015, 5:51 AM
41465


/**
* @Author sai
*/
Ext.define("Sencha.view.Main", {
extend : 'Ext.tab.Panel',
xtype : 'Main',
//requires: ['Sencha.view.MenuButton','Sencha.view.MenuItemButton'],
config : {
tabBar : {
docked : 'bottom'
},
scrollable :{
direction : 'horizontal'
},
items:[{
title : '??',
iconCls : 'home',
loadMask : true,
html: ' Screen 1'
}, {
title : '????',
iconCls : 'user',
loadMask : true,
html: 'Screen 2'
}],
listeners : {


initialize : function(panel) {

debugger;
var b=panel.getTabBar().element.down('div[class^="x-tab-normal x-tab x-iconalign-center"]:nth-child(2)').dom;
var el = document.createElement("div");
el.setAttribute("class","x-tab-normal x-tab x-iconalign-center x-tab-icon x-layout-box-item x-stretched");
b.parentNode.insertBefore(el,b);
var button=Ext.create('Sencha.view.MenuButton',{left:10,bottom:0}).element.dom;
el.appendChild(button);
var div = document.createElement("div");
var style="position:absolute; padding: 10px; height: 62px !important;bottom:-20px !important; width: 62px !important; background:url(resources/images/roB.png) 0 0 no-repeat;background-size:100% 100%;"
div.setAttribute("style",style);
div.setAttribute("id","radius");
el.appendChild(div);
var items=[
{xtype: 'menuitembutton',iconCls:'user',route:'contact',id:'test01',t:'test01'},
{xtype: 'menuitembutton',iconCls:'user',route:'mail',id:'test02',t:'test02'},
{xtype: 'menuitembutton',iconCls:'user',route:'app',id:'test03',t:'test03'},
{xtype: 'menuitembutton',iconCls:'user',route:'app',id:'test04',t:'test04'},
{xtype: 'menuitembutton',iconCls:'user',route:'app',id:'test05',t:'test05'}
];
Ext.Viewport.add(items);


}
}
}
})


/**
* ???????
* @Author sai
*/
Ext.define('Sencha.controller.Menu', {
extend: 'Ext.app.Controller',
requires: [
'Sencha.view.MenuItemButton',
'Sencha.view.MenuButton',
'Ext.util.DelayedTask'
],


config: {
before: {
showContact: 'authenticate'
},
routes: {
'mail':'showMail',
'contact': 'showContact',
'main':'showMain'
},


refs: {
menubutton: 'menubutton',
menuitembutton: 'menuitembutton'
},


control: {
menubutton: {
tap: 'onMenuButtonTap'
},
menuitembutton: {
tap: 'onMenuItemButtonTap'
}
}
},










/**
*
* @param {} button
*/
onMenuItemButtonTap: function(button) {
var menuButton = Ext.ComponentQuery.query('menubutton')[0];
button.addCls('tapped');
button.setZIndex(0);
this.closeMenu(menuButton);
//var h= this.getApplication().getHistory();
this.redirectTo(button.getRoute());
},


/**
*
* @param {} menuButton
*/
onMenuButtonTap: function(menuButton) {
if (!menuButton.getIsOpen()) {
// open menu
this.openMenu(menuButton);
} else {
// close Menu
this.closeMenu(menuButton);
}
},




openMenu: function(menuButton) {


Ext.Viewport.setMasked(true);
var masks= Ext.ComponentQuery.query('mask');
for(var i=0, max=0; i<masks.length; i++){
max = Math.max( max,masks[i].getZIndex() || 0 );
if(!masks[i].isDisabled()){
masks[i].addListener('tap',function(){
Ext.Viewport.setMasked(false);
var items = Ext.ComponentQuery.query('menuitembutton'),menuButton=Ext.ComponentQuery.query('menubutton')[0];
menuButton.replaceCls('open', 'close');
if(Ext.get("bg")){
Ext.get("bg").destroy();}

var left= document.body.clientWidth*0.5;
var bottom= 12;
Ext.each(items, function(item, index) {
if (item.getCls().indexOf('tapped') === -1) {
item.replaceCls('open', 'close');
item.setLeft(left);
item.setBottom(bottom);
item.setZIndex(0);
item.fireEvent('hide');
} else {

var task = Ext.create(
'Ext.util.DelayedTask',
function() {
item.removeCls('menuitembutton');
item.setLeft(left);
item.setBottom(bottom);
item.removeCls('tapped');
}
);
item.fireEvent('hide');
task.delay(900);

}
});
menuButton.setIsOpen(false);





});
}
}
var el = document.createElement("div");
el.setAttribute("class","s-bbox");
el.setAttribute("id","bg");
Ext.Viewport.element.appendChild(el);

var items = Ext.ComponentQuery.query('menuitembutton'),
bottom = menuButton.getBottom(),
left = menuButton.getLeft(),
radius = 150,
abschnitte = items.length - 1,
winkel = 130 / abschnitte;


menuButton.replaceCls('close', 'open');
//debugger;
// if(items.length=='0'){return;}
if(items.length=='1'){
items[0].addCls('menuitembutton');
items[0].replaceCls('close', 'open');
var left= document.body.clientWidth*0.5;
var bottom= 160;
items[0].setLeft(left);
items[0].setBottom(bottom);
items[0].setZIndex(max+1);
items[0].fireEvent('show');

}
else{

Ext.each(items, function(item, index) {
item.addCls('menuitembutton');
item.replaceCls('close', 'open');


var currentAngle = (155 - (winkel * (abschnitte - index))),
radiant = Math.PI / 180,
currnetRadiant = radiant * currentAngle,
x = Math.round(Math.cos(currnetRadiant) * radius),
y = Math.round(Math.sin(currnetRadiant) * radius);


item.setLeft(document.body.clientWidth*0.5 + x);
item.setBottom(bottom + y);
item.setZIndex(max+1);
item.fireEvent('show');
});}


menuButton.setIsOpen(true);
},


closeMenu: function(menuButton) {



Ext.Viewport.setMasked(false);

var items = Ext.ComponentQuery.query('menuitembutton');
menuButton.replaceCls('open', 'close');
if(Ext.get("bg")){
Ext.get("bg").destroy();}

var left= document.body.clientWidth*0.5;
var bottom= 12;
Ext.each(items, function(item, index) {
if (item.getCls().indexOf('tapped') === -1) {
item.replaceCls('open', 'close');
item.setLeft(left);
item.setBottom(bottom);
item.setZIndex(0);
item.fireEvent('hide');
} else {


var task = Ext.create(
'Ext.util.DelayedTask',
function() {
item.removeCls('menuitembutton');
item.setLeft(left);
item.setBottom(bottom);
item.removeCls('tapped');
}
);
item.fireEvent('hide');
task.delay(900);


}
});
menuButton.setIsOpen(false);
},
showContact:function(){
debugger;




},
showMain:function(){
debugger;

},
showMail:function(){
debugger;
},
authenticate:function(action){
debugger;
action.resume();
// var usercode= window.localStorage.getItem("usercode")
// if(usercode){
// action.resume();}else{
//
// }
}
});



/**
* @Author sai
*/
Ext.define('Sencha.view.MenuButton', {
extend: 'Ext.Button',
requires: ['Ext.Button'],
alias: 'widget.menubutton',
xtype: 'menubutton',


config: {
//iconCls: 'add',
ui : 'pathmenu',
iconMask: true,

height: 50,
width: 50,
zIndex:'10',
cls: 'menubutton',
listeners:{
'hide':function(){
var div = document.getElementById("radius");
var style="display:none";
div.setAttribute("style",style);
},
'show':function(){
//var left=parseInt(this.getLeft())-parseInt(5);
var left=3;
var div = document.getElementById("radius");
var style="position:absolute; padding: 10px; height: 62px !important; width: 62px !important; left: "+left+"px !important; bottom: 5px !important; background:url(images/roB.png) 0 0 no-repeat;background-size:100% 100%;"
div.setAttribute("style",style);
}
},
isOpen: false
}
});



/**
* ??????
* @Author sai
*/
Ext.define('Sencha.view.MenuItemButton', {
extend: 'Ext.Button',
alias: 'widget.menuitembutton',
xtype: 'menuitembutton',


config: {
iconMask: true,
ui : 'pathmenu',
t:'',
height: 40,
width: 40,
zIndex:'0',
cls: 'menuitembutton',
isActive: false,
listeners:{'initialize':function(){
this.setLeft(document.body.clientWidth*0.5);
this.setBottom(15);
this.setStyle('margin-left:-20px');
var el = document.createElement("div");
el.id=this.getId()+'-field';
el.innerHTML=this.getT();
el.setAttribute("class", "s-text");
el.setAttribute("style","display:none;");
Ext.Viewport.element.appendChild(el);
},
'resize':function(){
// debugger;
this.setLeft(document.body.clientWidth*0.5);
this.setBottom(15);
},
'show':function(){
//debugger;
var id=this.getId()+'-field';
var el=document.getElementById(id);
var b=this.getBottom()-20;
var style='left:'+this.getLeft()+'px !important; bottom:'+b+'px !important; margin-left:-20px; z-index: '+this.getZIndex()+'!important;';
el.setAttribute("style",style);
},
'hide':function(){
//debugger;
var id=this.getId()+'-field';
var el=document.getElementById(id);
el.setAttribute("style","display:none;");

}
},
route: ''
}
});








css




.x-button.x-button-pathmenu{background:url(../images/ro.png) 0 0 no-repeat;background-size:100% 100%;/*background-color:#f7f7f7;background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dedede), color-stop(10%, #ebebeb), color-stop(65%, #f7f7f7), color-stop(100%, #f9f9f9));background-image:-webkit-linear-gradient(top, #dedede,#ebebeb 10%,#f7f7f7 65%,#f9f9f9);background-image:linear-gradient(top, #dedede,#ebebeb 10%,#f7f7f7 65%,#f9f9f9);border:3px solid #fff;*/border-radius:1.75em;padding:0.5em;border:0;}
.x-button.x-button-pathmenu.menubutton{background:url(../images/roa.png) 0 0 no-repeat;background-size:100% 100%;}
.x-button.x-button-pathmenu.open{-webkit-transform:rotate(360deg) translateZ(0)}
.x-button.x-button-pathmenu.close{-webkit-transform:rotate(-360deg) translateZ(0)}
.x-button.x-button-pathmenu.menubutton{-webkit-transition:all 300ms}
.x-button.x-button-pathmenu.menubutton.open{-webkit-transform:rotate(45deg) translateZ(0);
background:url(../images/roa.png) 0 0 no-repeat #1E93E4;
background-size:100% 100%;
}
.x-button.x-button-pathmenu.menubutton.close{-webkit-transform:rotate(0deg) translateZ(0)}
.x-button.x-button-pathmenu.menuitembutton{-webkit-transition-duration:300ms;-webkit-transition-property:opacity, left, bottom, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.68, -0.55, 0.265, 1.55);opacity:1}
.x-button.x-button-pathmenu.menuitembutton.tapped{-webkit-transform:rotate(180deg) scale(4) translatez(0);opacity:0}


.s-bbox{height:135px;width:270px;
background:none;
background:-webkit-gradient(radial,bottom center,0,bottom center,100,from(rgba(0,0,0,0.4)),color-stop(80%,rgba(0,0,0,0.6)),to(rgba(0,0,0,0.2)));
background:-webkit-radial-gradient(bottom center,135px 135px,rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.6) 80%,rgba(0,0,0,0.2) 100%);
background-image: radial-gradient(bottom center, circle, rgba(50,50,50,1) 0%, rgba(68,68,68,1) 100%);
border-radius:135px 135px 0 0;position:absolute;left:50%;margin-left:-135px;bottom:3em;}
.s-text{
position:absolute; height: 14px !important; width: 40px !important; text-align:center; font-size:12px; color:#fff; font-weight:bold;
-webkit-transition-duration: 300ms;-webkit-transition-property: opacity, left, bottom, -webkit-transform;-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);}






Thank. But what i would like to do isn't the round menu visible at the bouton of the menu but it is the menu having the 4 icons image (Market icon,Notification.... . Please can you that related menu code to me. I would like to design a menu exactly like that. Also i would like to badge the text into the notification icon as you did can you help me to?
can you send me by email (djouguae@yahoo.fr) the whole code of that Page, it will be very useful for me ?