搜公众号
推荐 原创 视频 Java开发 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库
Lambda在线 > Drupal每周推荐 > 【第367期】How to Create Responsive Off-canvas Menu in Drupal 8

【第367期】How to Create Responsive Off-canvas Menu in Drupal 8

Drupal每周推荐 2018-03-01
举报

An off-canvas menu is the best way to offer a pleasant experience to those visiting your site from mobile devices. It is rapidly becoming a web design industry standard for any website.

In this tutorial, you will learn how to create and configure an off-canvas menu with the "Responsive and off canvas menu" Drupal 8 module.

This module relies on a couple of dependency libraries. They include the functionality of swipe gestures to open and close the menu on mobile screens.

They also provide the Superfish functionality when your site visitor hovers over the menu items.

In this tutorial, you will learn how to hide the default Drupal main menu and use an off-canvas menu instead.

Let’s start!

Step #1. Download the Module and Its Dependencies

  • Use your preferred method to download the module.

  • Download the dependencies to the /libraries folder inside your root folder (if you don’t have the /libraries folder yet, create it manually). Download the required libraries by clicking these links:

  • mmenu

  • superfish

  • hammerjs

  • Unzip and rename the /libraries folder. You should have the following directory structure now:

【第367期】How to Create Responsive Off-canvas Menu in Drupal 8

  • Enable the module.


【第367期】How to Create Responsive Off-canvas Menu in Drupal 8

Step #2. Configure the Menu Module

  • Click Configuration > User interface > Responsive menu.

  • You’ll be presented with following configuration options: 

  1. The menu that will be rendered by the module.

  2. The number of levels (depth) of the menu. I’ll leave the default 9.

  3. The machine name of the menu which will be rendered in the off-canvas menu. To find out the machine name of the main navigation menu, for example, click Structure > Menus > Main Navigation. You’ll see the machine name next to the title.

  4. The type of wrapper which will contain the menu block. You can choose between nav or div.

  5. Use a breakpoint. Uncheck this option, since we want our off-canvas menu to apply to all screen sizes.

  6. Use the default module’s CSS, i.e. you can apply your own styles if you uncheck this option.

  7. Keyboard accessibility navigation.

  8. Add the off-canvas menu on the admin theme (leave unchecked).

  9. THEME COMPATIBILITY. this option is not required when working with Bartik (for example), but you will need to click this checkbox if you’re working with a Bootstrap based theme.

  10. Menu swipe and appearance options.

  11. Superfish options.

  12. Ad swipe gestures (for cell phones and tablets).

  • Choose your preferred options.

  • Click Save configuration.

【第367期】How to Create Responsive Off-canvas Menu in Drupal 8

Step #3. Clear the Site Cache

  • Click Configuration > Development > Performance.

  • Press the Clear all caches button.

  • Click Save configuration.

【第367期】How to Create Responsive Off-canvas Menu in Drupal 8

Step #4. Check the Menu Structure

  • Click Structure > Menus > Main navigation.

  • Review the structure of the main navigation menu. Notice in this example, menu Item 3 has a depth of 3, while menu Item 1 has a depth of 2.

  • Add/edit the links to your menu if necessary.

【第367期】How to Create Responsive Off-canvas Menu in Drupal 8

Step #5. Place the “Hamburger" Icon

It’s time to place the “hamburger” menu icon (preferably) into the “menu” section of the site. At the same time, we will be disabling the default Main navigation block so that we don’t have the same menu twice.

  • Click Structure > Block layout.

  • Go to the Primary menu region.

  • Click the drop-down arrow beside the Configure.

  • Select Disable

【第367期】How to Create Responsive Off-canvas Menu in Drupal 8

  • Click the Place block button.

  • Type the word “menu” in the search box.

  • Choose Responsive menu mobile icon by clicking the Place block button next to it.

  • Notice that there’s another block called Horizontal menu. This is the module’s default menu for larger screen sizes. Remember, we deactivated this option in Step #2 (numeral 5), because we only want an off-canvas menu for all screen sizes. Feel free to play with these options!

【第367期】How to Create Responsive Off-canvas Menu in Drupal 8

【第367期】How to Create Responsive Off-canvas Menu in Drupal 8

  • Uncheck Display title.

  • Click Save block.

【第367期】How to Create Responsive Off-canvas Menu in Drupal 8

  • Go to your Home page and you should see your newly added menu.

【第367期】How to Create Responsive Off-canvas Menu in Drupal 8

  • Click on the "hamburger" icon.

  • Navigate through the whole menu structure with the arrows next to each menu item to check everything works as desired.

Congratulations! You just learned how to add an off-canvas menu to your Drupal 8 site. No doubt, those visiting your site from their mobile devices will enjoy and appreciate it. 

Thanks for reading!

关于本文

文章来源:www.ostraining.com

上期内容:  

Drupal每日推荐群:361323428

合作伙伴:水滴之声

要求自己,影响别人。

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《【第367期】How to Create Responsive Off-canvas Menu in Drupal 8》的版权归原作者「Drupal每日推荐」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

举报