{"id":7987,"date":"2019-12-07T07:30:44","date_gmt":"2019-12-07T07:30:44","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=7987"},"modified":"2019-12-07T07:32:14","modified_gmt":"2019-12-07T07:32:14","slug":"how-to-add-menu-and-toolbar-plugin-in-reveal-js","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/how-to-add-menu-and-toolbar-plugin-in-reveal-js\/","title":{"rendered":"How to add menu and toolbar plugin in reveal js?"},"content":{"rendered":"\n<p><strong>Step 1<\/strong>.  Go through this URL: <a href=\"https:\/\/github.com\/hakimel\/reveal.js\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"https:\/\/github.com\/hakimel\/reveal.js\/ (opens in a new tab)\">https:\/\/github.com\/hakimel\/reveal.js\/<\/a><br><strong>Step 2<\/strong>.  Clone or download the zip folder.<br><strong>Step 3<\/strong>.   Unzip and replace the example contents in index.html.<br><strong>Step 4<\/strong>.   Open index.html in a browser to view it.<\/p>\n\n\n\n<p>Add menu in reveal js<\/p>\n\n\n\n<p><strong>Step 1<\/strong>.  Go through this URL: <a href=\"https:\/\/github.com\/denehyg\/reveal.js-menu\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">https:\/\/github.com\/denehyg\/reveal.js-menu<\/a><br><strong>Step 2<\/strong>.  Clone or download the zip folder.<br><strong>Step 3<\/strong>.   Unzip and replace the example contents in index.html.<br><strong>Step 4<\/strong>.   Copy this repository into the plugins folder.<br><strong>Step 5<\/strong>.   Add the plugin to the dependencies in your presentation.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/90707d17578f91df981b30ffefbd255f.js\"><\/script>\n\n\n\n<p><strong>Step 6<\/strong>.   If you are using the themes panel you need to ensure the theme stylesheet in the presentation uses the id=&#8221; theme&#8221; attribute. <\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/ffc40f161ded0e2ddb0d1d9b1329bdf0.js\"><\/script>\n\n\n\n<p><strong>Step 7<\/strong>.   The slide titles used in the menu can be supplied explicitly or are taken directly from the presentation.<\/p>\n\n\n\n<p>If the slide&#8217;s section element contains a data-menu-title attribute this will be used for the slide title in the menu. For example\u2026<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/0df8d6e9cbfed293935c4f44787ee240.js\"><\/script>\n\n\n\n<p><strong>Step 8. And then Open index.html in a browser to view it.<\/strong><\/p>\n\n\n\n<p><strong>Now add toolbar plugin:<\/strong><\/p>\n\n\n\n<p><strong>Note:<\/strong> This plugin is compatible with the reveal.js-menu plugin.<\/p>\n\n\n\n<p><strong>Step 1<\/strong>.   Go to this link:  <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/github.com\/denehyg\/reveal.js-toolbar\" target=\"_blank\">https:\/\/github.com\/denehyg\/reveal.js-toolbar<\/a><br><strong>Step 2.<\/strong>   Clone or download the zip folder.<br><strong>Step 3.<\/strong>   Unzip and replace the example contents in index.html.<br><strong>Step 4.<\/strong>   Copy this repository into the plugins folder.<br><strong>Step 5<\/strong>.   Add the plugin to the dependencies in your presentation.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/3c424daf3083cfd6e7cc409edee068c6.js\"><\/script>\n\n\n\n<p><strong>Step 6<\/strong>.   And then Open index.html in a browser to view it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Step 1. Go through this URL: https:\/\/github.com\/hakimel\/reveal.js\/Step 2. Clone or download the zip folder.Step 3. Unzip and replace the example contents in index.html.Step 4. Open index.html in a browser to view it. Add menu in reveal js Step 1. Go through this URL: https:\/\/github.com\/denehyg\/reveal.js-menuStep 2. Clone or download the zip folder.Step 3. Unzip and replace&#8230;<\/p>\n","protected":false},"author":9,"featured_media":7988,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_joinchat":[],"footnotes":""},"categories":[5570],"tags":[5581,356,5571,5580],"class_list":["post-7987","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-reveal-js","tag-menu","tag-plugin","tag-reveal-js","tag-toolbar"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/7987","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=7987"}],"version-history":[{"count":1,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/7987\/revisions"}],"predecessor-version":[{"id":7989,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/7987\/revisions\/7989"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media\/7988"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=7987"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=7987"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=7987"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}