可切换的侧边栏导航

Question

我正在开发一个需要切换侧边栏导航的网站，它需要像这样工作：

目前，我将左侧导航栏设置为“position：fixed”，然后内容的导航栏宽度为“padding-left”值。 然后我使用此代码创建转换：

.navbar {
    width: 95px;
    -webkit-transition: width 500ms ease;
    -moz-transition: width 500ms ease;
    -o-transition: width 500ms ease;
    transition: width 500ms ease;
}

.toggle-navbar {
    width: 250px;
}

.content {
    padding-left: 95px;
    -webkit-transition: padding-left 500ms ease;
    -moz-transition: padding-left 500ms ease;
    -o-transition: padding-left 500ms ease;
    transition: padding-left 500ms ease;
}

.toggle-content {
    padding-left: 250px;
}

然后使用$(elem).toggleClass('toggle-class')

添加'toggle-'类

有更好的方法吗？也可以使用css3过渡来实现这一点，这些过渡使用硬件加速（在iOS设备上保持动画流畅）？