在materializecss中,如何从右边打开滑出菜单而不是默认左边?

时间:2022-08-22 11:29:02

In materialize CSS, the hamburger menu is on left by default. I changed the CSS and achieved it to right.But on clicking, the side-nav still slides out from left. I referred the documentation but found no class for toggle menu right. I tried edge: right but it did not work.

在物化CSS中,汉堡包菜单默认为左侧。我改变了CSS并实现了它。但是点击时,侧导航器仍然从左侧滑出。我参考了文档,但没有找到切换菜单的类。我试过边缘:对,但它不起作用。

I want the menu to slide out from right on clicking hamburger icon.Thank you in advance

我希望菜单在点击汉堡包图标时从右侧滑出。谢谢你提前

2 个解决方案

#1


2  

I've made you a fiddle here http://jsfiddle.net/8tw2u80q/3/. Hope this helps you.

我在这里骗你了http://jsfiddle.net/8tw2u80q/3/。希望这对你有所帮助。

  $('.button-collapse').sideNav({      menuWidth: 300, // Default is 240      edge: 'right', // Choose the horizontal origin      closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor    }  );

You need to set edge: right.

你需要设置边缘:右边。

#2


1  

Here is what i meant in the comment below your question, after you initialize the menu, you can specify the correct options you want wit jquery and have the menu pop out on the right other than the left.

这是我在你的问题下面的评论中的意思,在你初始化菜单之后,你可以指定你想要的正确选项jquery并让菜单弹出右边而不是左边。

<script type="text/javascript">      $('.button-collapse').sideNav({      menuWidth: 300, // Default is 240      edge: 'right', // Choose the horizontal origin      closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor    }  );</script>

This will move the menu to pop open on the right once you are in the correct screen size for the mobile menu to be displayed

一旦您处于正确的屏幕尺寸以便显示移动菜单,这将移动菜单在右侧弹出

#1


2  

I've made you a fiddle here http://jsfiddle.net/8tw2u80q/3/. Hope this helps you.

我在这里骗你了http://jsfiddle.net/8tw2u80q/3/。希望这对你有所帮助。

  $('.button-collapse').sideNav({      menuWidth: 300, // Default is 240      edge: 'right', // Choose the horizontal origin      closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor    }  );

You need to set edge: right.

你需要设置边缘:右边。

#2


1  

Here is what i meant in the comment below your question, after you initialize the menu, you can specify the correct options you want wit jquery and have the menu pop out on the right other than the left.

这是我在你的问题下面的评论中的意思,在你初始化菜单之后,你可以指定你想要的正确选项jquery并让菜单弹出右边而不是左边。

<script type="text/javascript">      $('.button-collapse').sideNav({      menuWidth: 300, // Default is 240      edge: 'right', // Choose the horizontal origin      closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor    }  );</script>

This will move the menu to pop open on the right once you are in the correct screen size for the mobile menu to be displayed

一旦您处于正确的屏幕尺寸以便显示移动菜单,这将移动菜单在右侧弹出