旋转Gooey菜单

时间:2017-02-16 08:45:23

标签: css twitter-bootstrap-3 sass codepen

我在codepen上找到了这个很棒的菜单。现在我想使用它,但我的问题是我想把它放在我的网站上。不幸的是,此菜单也正确。但我希望它向左倾斜。那么我怎么能解决这个问题呢。 (改变开启角度是不是有效?) 谢谢你的帮助。

http://codepen.io/lbebber/pen/pvwZJp

$opening-angle:$pi*2;

1 个答案:

答案 0 :(得分:1)

transform选择器

处更改.menu-open:checked~.menu-item属性

transform:translate3d(110px*$i,0,0);transform:translate3d(-110px*$i,0,0);

并在left

中将right属性更改为.menu

更新了.menu

.menu{
  @extend %goo;
  $width:650px;
  $height:150px;
  position:absolute;
  right:50%; /*Changed*/
  margin-left:-80px;
  padding-top:20px;
  padding-left:80px;
  width:$width;
  height:$height;
  box-sizing:border-box;
  font-size:20px;
  text-align:right; /*Changed*/
}

Codepen