Question

我有一个动画汉堡菜单位于屏幕左侧。当您单击汉堡时，菜单会向右展开。但是我希望菜单位于右侧。当我使用浮动向右时，菜单移动到右上方，但它仍然向右扩展，所以它移出屏幕，有没有办法我可以翻转菜单，使其向左扩展。如果有人不知道我在说什么，这就是我使用的代码https://codepen.io/woodwoerk/pen/BoEGYZ

.menu {
margin: 0 20px 0 0;
padding-left: 1.25em;
cursor: pointer;
position: relative;
width: 30px;
height: 50px;
text-align: right;
float: right;
}

expand {
 box-shadow: rgba(0, 0, 0, 0.1) -2.5px 5px 7.5px, rgba(0, 0, 0, 0.1) 2.5px 5px 7.5px;
width: 200px;
height: 50px;

-webkit-backface-visibility: hidden;
      backface-visibility: hidden;
}

.menu-top-expand {
 top: 50px;
 background: #FFF8E1;

-webkit-transition: all 0.5s 0.2s, left 0.1s;
      transition: all 0.5s 0.2s, left 0.1s;
}

.menu-middle-expand {
top: 100px;
background: #FFECB3;

-webkit-transition: all 0.5s 0.1s, left 0.1s;
      transition: all 0.5s 0.1s, left 0.1s;
 }
.menu-bottom2-expand {
top: 200px;
background: #FFECB3;

-webkit-transition: all 0.5s 0.1s, left 0.1s;
      transition: all 0.5s 0.1s, left 0.1s;
}
.menu-bottom-expand {
top: 150px;
height: 100px;
background: #FFE082;

-webkit-transition: all 0.5s, left 0.1s;
      transition: all 0.5s, left 0.1s;
}

.menu-text-expand{
 color: #000000;
 opacity: 0.8;
 padding: 10px;
 font-size: 1.3em;
  -webkit-transition: all 0.2s 0.7s, font-size 0.1s;
      transition: all 0.2s 0.7s, font-size 0.1s;
}

提前致谢

Answer 1

所以在float: right;到.menu之后，.menu-global将left更改为left: auto并添加right: 0;

Answer 2

与@pavger相同的变化，只需添加：on .menu-global：hover，更改左：10px;到右10px;获得正确的效果：

https://codepen.io/anon/pen/jZrVvg

.menu-global:hover {
     right: 10px;
     -webkit-transition: all 0.2s;
     transition: all 0.2s;
 }

@pavger对不起，我没有足够的声誉评论你的帖子:(

将汉堡菜单对齐到屏幕右侧

2 个答案: