You are here

Home » API reference » Drupal Mega Menu 8

we-megamenu-backend.html.twig in Drupal Mega Menu 8

Same filename and directory in other branches
  1. 8.x templates/we-megamenu-backend.html.twig
<div class="we-mega-menu">
  <button class="ico-toolbar ico-toolbar-horizontal" type="button" value="horizontal" title="Horizontal orientation">Horizontal orientation</button>
  <div class="we-mega-menu we-mega-menu-toolbar">
    <div class="we-mega-menu-bar we-mega-menu-config">
      <div class="row">
        <div class="col-md-12">
          <h2>WeMegaMenu Toolbar</h2>
          <p>This toolbar includes all settings of Drupal 8 Mega Menu, just select menu then configure. There are many many level of configuration: submenu setting, column setting and menu item setting.</p>
        </div>
        <div class="col-md-12">
          <div class="form-group">
            <label>Style</label>
            <select class="form-control we-mega-menu-cbx-style">
              <option value="Default">Default</option>
              <option value="Blue">Blue</option>
              <option value="Red">Red</option>
              <option value="Yellow">Yellow</option>
              <option value="Green">Green</option>
              <option value="White">White</option>
            </select>
          </div>

          <div class="form-group">
            <label>Animation</label>
            <select class="form-control we-mega-menu-cbx-animation">
              <option value="None" selected="selected">None</option>
              <option value="Fading">Fading</option>
              <option value="Slide">Slide</option>
              <option value="Zoom">Zoom</option>
              <option value="Elastic">Elastic</option>
            </select>
          </div>

          <div class="form-group we-mega-menu-action" style="display: none;">
            <label>Action</label>
            <select class="form-control we-mega-menu-cbx-action">
              <option value="hover" selected="selected">Hover</option>
              <option value="clicked">Clicked</option>
            </select>
          </div>

          <!-- <div class="form-group we-mega-menu-delay">
            <label>Delay (ms)</label>
            <input type="text" class="form-control we-mega-menu-txt-delay" placeholder="Delay">
          </div>

          <div class="form-group we-mega-menu-duration">
            <label>Duration (ms)</label>
            <input type="text" class="form-control we-mega-menu-txt-duration" placeholder="Duration">
          </div> -->
          <div class="clearfix">
            <div class="form-group form-fix-width">
              <label>Auto arrow</label>
              <label class="switch">
                <input type="checkbox" class="we-mega-menu we-mega-menu-chx-auto-arrow" name="submenu">
                <div class="slider"></div>
              </label>
            </div>

            
            <div class="form-group form-fix-width">
              <label>Show submenu</label>
              <label class="switch">
                <input type="checkbox" class="we-mega-menu we-mega-menu-chx-alway-show-submenu" name="submenu">
                <div class="slider"></div>
              </label>
            </div>

            <div class="form-group form-fix-width">
              <!-- Rectangular switch -->
              <label>Mobile collapse</label>
              <label class="switch">
                <input type="checkbox" class="we-mega-menu we-mega-menu-chx-mobile-collapse" name="mobile-collapse">
                <div class="slider"></div>
              </label>
            </div>
          </div>
          
        </div>
        
      </div>  
    </div>

    <div class="we-mega-menu-bar we-mega-menu-item-config">
      <div class="row">
        <div class="col-md-12">
          <h2>Menu Item Configuration</h2>
          <p>This allows you to configure each link you added in the Drupal core menu. You can: add block, have it styled by adding extra class, set icon (Bootstrap icons) and add description.</p>
        </div>
        <div class="col-md-12">
          <div class="clearfix">
            <div class="form-group form-fix-width submenu-wrapper">
              <!-- Rectangular switch -->
              <label>Submenu</label>
              <label class="switch">
                <input type="checkbox" class="we-mega-menu we-mega-menu-btn-submenu" name="we-mega-menu-btn-submenu">
                <div class="slider"></div>
              </label>
            </div>

            <div class="form-group form-fix-width group-menu-wrapper">
              <!-- Rounded switch -->
              <label>Group</label>
              <label class="switch">
                <input type="checkbox" class="we-mega-menu-chx-group">
                <div class="slider"></div>
              </label>
            </div>

            <div class="form-group form-fix-width">
              <label>Break column</label>
              <div class="align-inner align-break-column">
                <button type="button" class="btn btn-default we-mega-menu-btn-break-col" value="left">&lt;</button>
                <button type="button" class="btn btn-default we-mega-menu-btn-break-col" value="right">&gt;</button>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label>Extra class</label>
            <input type="text" class="form-control we-mega-menu-txt-extra-class" placeholder="Extra class">
          </div>

          <div class="form-group">
            <label>Icon <a class="btn-get-icon" target="_blank" href="http://fontawesome.io/icons">Get icon</a></label>
            <input type="text" class="form-control we-mega-menu-txt-icon" placeholder="Icon">
          </div>

          <div class="form-group">
            <label>Item caption</label>
            <input type="text" class="form-control we-mega-menu-txt-caption" placeholder="Item caption">
          </div>

          <div class="form-group">
            <label>Target</label>
            <select class="form-control we-mega-menu-cbx-target">
              <option value="_self" selected="selected">_self</option>
              <option value="_blank">_blank</option>
              <option value="_parent">_parent</option>
              <option value="_top">_top</option>
            </select>
          </div>
        </div>
        
      </div>  
    </div>



    <div class="we-mega-menu-bar we-mega-menu-submenu-config">
      <div class="row">
        <div class="col-md-12">
          <h2>Submenu Configuration</h2>
          <p>Contains all the level 2+ items. Allows you to: add and remove row, set the submenu’s position, have it styled, edit its width...</p>
        </div>


        <div class="col-md-12">
          <div class="clearfix">
            <div class="form-group form-fix-width">
              <label>Add row</label>
              <button type="button" class="btn btn-default we-mega-menu-btn-add-row">+</button>
            </div>

            <div class="form-group form-fix-width">
              <!-- Rectangular switch -->
              <label>Hide when collapse</label>
              <label class="switch">
                <input type="checkbox" class="we-mega-menu hide-sub-when-collapse" name="hide-sub-when-collapse">
                <div class="slider"></div>
              </label>
            </div>
          </div>

          <div class="form-group btn-group">
            <label>Submenu width (px)</label>
            <input type="text" class="form-control we-mega-menu-txt-sub-menu-width" placeholder="Submenu width (px)">
          </div>

          <div class="form-group btn-group we-mega-menu-align-btn-group">
            <label>Alignment</label>
            <div class="align-inner">
              <button type="button" class="btn btn-default we-mega-menu-btn-align-left" aria-label="Left Align" data-value="left">
                <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
              </button>

              <button type="button" class="btn btn-default we-mega-menu-btn-align-center" aria-label="Center Align" data-value="center">
                <span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>
              </button>

              <button type="button" class="btn btn-default we-mega-menu-btn-align-right" aria-label="Right Align" data-value="right">
                <span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
              </button>

              <button type="button" class="btn btn-default we-mega-menu-btn-align-justify" aria-label="Justify" data-value="justify">
                <span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>
              </button>
            </div>
          </div>

          <div class="form-group">
            <label>Extra class</label>
            <input type="text" class="form-control we-mega-menu-txt-extra-class" placeholder="Extra class">
          </div>
        </div>
        
      </div>  
    </div>







    <div class="we-mega-menu-bar we-mega-menu-column-config">
      <div class="row">
        <div class="col-md-12">
          <h2>Column Configuration</h2>
          <p>Allows you to: add and remove column, set grid, add block to column and style the column with extra class</p>
        </div>

        <div class="col-md-12">
          <div class="clearfix">
            <div class="form-group form-fix-width">
              <label>Add/remove Column</label>
              <div class="group-actions-btn">
                <button type="button" class="btn btn-default we-mega-menu-btn-remove-col we-mega-menu-btn-add-row">-</button>
                <button type="button" class="btn btn-default we-mega-menu-btn-add-col we-mega-menu-btn-add-row">+</button>
              </div>
            </div>

            <div class="form-group form-fix-width">
              <!-- Rectangular switch -->
              <label>Hide when collapse</label>
              <label class="switch">
                <input type="checkbox" class="we-mega-menu we-mega-menu-btn-hide-when-collapse" name="we-mega-menu-btn-hide-when-collapse">
                <div class="slider"></div>
              </label>
            </div>
            <div class="form-group form-fix-width">
              <!-- Rectangular switch -->
              <label>Show block title</label>
              <label class="switch">
                <input type="checkbox" class="we-mega-menu btn-show-block-title" name="btn-show-block-title" checked="">
                <div class="slider"></div>
              </label>
            </div>
          </div>

          <div class="form-group">
            <label>Grid (1-12)</label>
            <select class="form-control we-mega-menu cbx-we-mega-menu-col-width">
              {% for i in 1..12 %}
                <option value="{{ i }}">{{ i }}</option>
              {% endfor %}
            </select>
          </div>

          <div class="form-group">
            <label>Blocks</label>
            <select class="form-control cbx-select-block">
              <option value="">Select Blocks</option>
              {% for bid, block_name in blocks %}
                <option value="{{ bid }}"> {{ block_name }} </option>
              {% endfor %}
            </select>
          </div>

          

          <div class="form-group">
            <label>Extra class</label>
            <input type="text" class="form-control we-mega-menu-txt-extra-class" placeholder="Extra class">
          </div>
        </div>
        
      </div>  
    </div>









    <div class="we-mega-menu-bar we-mega-menu-actions">
      <div class="row">
        <div class="col-md-12">
          <button class="btn btn-success btn-save" type="submit">Save</button>
          <button class="btn btn-danger btn-reset" type="submit">Reset</button>
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#resetToDefault">
            Reset To Default
          </button>
        </div>
      </div>
    </div>

    <!-- Modal reset to default -->
    <div class="modal fade" id="resetToDefault" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Warning</h4>
          </div>
          <div class="modal-body">
            Are you sure reset menu to default ?
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger btn-reset-to-default">Reset To Default</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

<nav {{ attributes }}>
  <div class="container-fluid">
    {{ content }}
  </div>
</nav>
1 theme call to we-megamenu-backend.html.twig
WeMegaMenuAdminController::configWeMegaMenu in src/Controller/WeMegaMenuAdminController.php
A function build page backend.

File

templates/we-megamenu-backend.html.twig
View source 
  1. 

  2. <div class="we-mega-menu">

  3.   <button class="ico-toolbar ico-toolbar-horizontal" type="button" value="horizontal" title="Horizontal orientation">Horizontal orientation</button>

  4.   <div class="we-mega-menu we-mega-menu-toolbar">

  5.     <div class="we-mega-menu-bar we-mega-menu-config">

  6.       <div class="row">

  7.         <div class="col-md-12">

  8.           <h2>WeMegaMenu Toolbar</h2>

  9.           <p>This toolbar includes all settings of Drupal 8 Mega Menu, just select menu then configure. There are many many level of configuration: submenu setting, column setting and menu item setting.</p>

  10.         </div>

  11.         <div class="col-md-12">

  12.           <div class="form-group">

  13.             <label>Style</label>

  14.             <select class="form-control we-mega-menu-cbx-style">

  15.               <option value="Default">Default</option>

  16.               <option value="Blue">Blue</option>

  17.               <option value="Red">Red</option>

  18.               <option value="Yellow">Yellow</option>

  19.               <option value="Green">Green</option>

  20.               <option value="White">White</option>

  21.             </select>

  22.           </div>

  23. 

  24.           <div class="form-group">

  25.             <label>Animation</label>

  26.             <select class="form-control we-mega-menu-cbx-animation">

  27.               <option value="None" selected="selected">None</option>

  28.               <option value="Fading">Fading</option>

  29.               <option value="Slide">Slide</option>

  30.               <option value="Zoom">Zoom</option>

  31.               <option value="Elastic">Elastic</option>

  32.             </select>

  33.           </div>

  34. 

  35.           <div class="form-group we-mega-menu-action" style="display: none;">

  36.             <label>Action</label>

  37.             <select class="form-control we-mega-menu-cbx-action">

  38.               <option value="hover" selected="selected">Hover</option>

  39.               <option value="clicked">Clicked</option>

  40.             </select>

  41.           </div>

  42. 

  43.           <!-- <div class="form-group we-mega-menu-delay">

  44.             <label>Delay (ms)</label>

  45.             <input type="text" class="form-control we-mega-menu-txt-delay" placeholder="Delay">

  46.           </div>

  47. 

  48.           <div class="form-group we-mega-menu-duration">

  49.             <label>Duration (ms)</label>

  50.             <input type="text" class="form-control we-mega-menu-txt-duration" placeholder="Duration">

  51.           </div> -->

  52.           <div class="clearfix">

  53.             <div class="form-group form-fix-width">

  54.               <label>Auto arrow</label>

  55.               <label class="switch">

  56.                 <input type="checkbox" class="we-mega-menu we-mega-menu-chx-auto-arrow" name="submenu">

  57.                 <div class="slider"></div>

  58.               </label>

  59.             </div>

  60. 

  61.             

  62.             <div class="form-group form-fix-width">

  63.               <label>Show submenu</label>

  64.               <label class="switch">

  65.                 <input type="checkbox" class="we-mega-menu we-mega-menu-chx-alway-show-submenu" name="submenu">

  66.                 <div class="slider"></div>

  67.               </label>

  68.             </div>

  69. 

  70.             <div class="form-group form-fix-width">

  71.               <!-- Rectangular switch -->

  72.               <label>Mobile collapse</label>

  73.               <label class="switch">

  74.                 <input type="checkbox" class="we-mega-menu we-mega-menu-chx-mobile-collapse" name="mobile-collapse">

  75.                 <div class="slider"></div>

  76.               </label>

  77.             </div>

  78.           </div>

  79.           

  80.         </div>

  81.         

  82.       </div>  

  83.     </div>

  84. 

  85.     <div class="we-mega-menu-bar we-mega-menu-item-config">

  86.       <div class="row">

  87.         <div class="col-md-12">

  88.           <h2>Menu Item Configuration</h2>

  89.           <p>This allows you to configure each link you added in the Drupal core menu. You can: add block, have it styled by adding extra class, set icon (Bootstrap icons) and add description.</p>

  90.         </div>

  91.         <div class="col-md-12">

  92.           <div class="clearfix">

  93.             <div class="form-group form-fix-width submenu-wrapper">

  94.               <!-- Rectangular switch -->

  95.               <label>Submenu</label>

  96.               <label class="switch">

  97.                 <input type="checkbox" class="we-mega-menu we-mega-menu-btn-submenu" name="we-mega-menu-btn-submenu">

  98.                 <div class="slider"></div>

  99.               </label>

  100.             </div>

  101. 

  102.             <div class="form-group form-fix-width group-menu-wrapper">

  103.               <!-- Rounded switch -->

  104.               <label>Group</label>

  105.               <label class="switch">

  106.                 <input type="checkbox" class="we-mega-menu-chx-group">

  107.                 <div class="slider"></div>

  108.               </label>

  109.             </div>

  110. 

  111.             <div class="form-group form-fix-width">

  112.               <label>Break column</label>

  113.               <div class="align-inner align-break-column">

  114.                 <button type="button" class="btn btn-default we-mega-menu-btn-break-col" value="left">&lt;</button>

  115.                 <button type="button" class="btn btn-default we-mega-menu-btn-break-col" value="right">&gt;</button>

  116.               </div>

  117.             </div>

  118.           </div>

  119. 

  120.           <div class="form-group">

  121.             <label>Extra class</label>

  122.             <input type="text" class="form-control we-mega-menu-txt-extra-class" placeholder="Extra class">

  123.           </div>

  124. 

  125.           <div class="form-group">

  126.             <label>Icon <a class="btn-get-icon" target="_blank" href="http://fontawesome.io/icons">Get icon</a></label>

  127.             <input type="text" class="form-control we-mega-menu-txt-icon" placeholder="Icon">

  128.           </div>

  129. 

  130.           <div class="form-group">

  131.             <label>Item caption</label>

  132.             <input type="text" class="form-control we-mega-menu-txt-caption" placeholder="Item caption">

  133.           </div>

  134. 

  135.           <div class="form-group">

  136.             <label>Target</label>

  137.             <select class="form-control we-mega-menu-cbx-target">

  138.               <option value="_self" selected="selected">_self</option>

  139.               <option value="_blank">_blank</option>

  140.               <option value="_parent">_parent</option>

  141.               <option value="_top">_top</option>

  142.             </select>

  143.           </div>

  144.         </div>

  145.         

  146.       </div>  

  147.     </div>

  148. 

  149. 

  150. 

  151.     <div class="we-mega-menu-bar we-mega-menu-submenu-config">

  152.       <div class="row">

  153.         <div class="col-md-12">

  154.           <h2>Submenu Configuration</h2>

  155.           <p>Contains all the level 2+ items. Allows you to: add and remove row, set the submenu’s position, have it styled, edit its width...</p>

  156.         </div>

  157. 

  158. 

  159.         <div class="col-md-12">

  160.           <div class="clearfix">

  161.             <div class="form-group form-fix-width">

  162.               <label>Add row</label>

  163.               <button type="button" class="btn btn-default we-mega-menu-btn-add-row">+</button>

  164.             </div>

  165. 

  166.             <div class="form-group form-fix-width">

  167.               <!-- Rectangular switch -->

  168.               <label>Hide when collapse</label>

  169.               <label class="switch">

  170.                 <input type="checkbox" class="we-mega-menu hide-sub-when-collapse" name="hide-sub-when-collapse">

  171.                 <div class="slider"></div>

  172.               </label>

  173.             </div>

  174.           </div>

  175. 

  176.           <div class="form-group btn-group">

  177.             <label>Submenu width (px)</label>

  178.             <input type="text" class="form-control we-mega-menu-txt-sub-menu-width" placeholder="Submenu width (px)">

  179.           </div>

  180. 

  181.           <div class="form-group btn-group we-mega-menu-align-btn-group">

  182.             <label>Alignment</label>

  183.             <div class="align-inner">

  184.               <button type="button" class="btn btn-default we-mega-menu-btn-align-left" aria-label="Left Align" data-value="left">

  185.                 <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>

  186.               </button>

  187. 

  188.               <button type="button" class="btn btn-default we-mega-menu-btn-align-center" aria-label="Center Align" data-value="center">

  189.                 <span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>

  190.               </button>

  191. 

  192.               <button type="button" class="btn btn-default we-mega-menu-btn-align-right" aria-label="Right Align" data-value="right">

  193.                 <span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>

  194.               </button>

  195. 

  196.               <button type="button" class="btn btn-default we-mega-menu-btn-align-justify" aria-label="Justify" data-value="justify">

  197.                 <span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>

  198.               </button>

  199.             </div>

  200.           </div>

  201. 

  202.           <div class="form-group">

  203.             <label>Extra class</label>

  204.             <input type="text" class="form-control we-mega-menu-txt-extra-class" placeholder="Extra class">

  205.           </div>

  206.         </div>

  207.         

  208.       </div>  

  209.     </div>

  210. 

  211. 

  212. 

  213. 

  214. 

  215. 

  216. 

  217.     <div class="we-mega-menu-bar we-mega-menu-column-config">

  218.       <div class="row">

  219.         <div class="col-md-12">

  220.           <h2>Column Configuration</h2>

  221.           <p>Allows you to: add and remove column, set grid, add block to column and style the column with extra class</p>

  222.         </div>

  223. 

  224.         <div class="col-md-12">

  225.           <div class="clearfix">

  226.             <div class="form-group form-fix-width">

  227.               <label>Add/remove Column</label>

  228.               <div class="group-actions-btn">

  229.                 <button type="button" class="btn btn-default we-mega-menu-btn-remove-col we-mega-menu-btn-add-row">-</button>

  230.                 <button type="button" class="btn btn-default we-mega-menu-btn-add-col we-mega-menu-btn-add-row">+</button>

  231.               </div>

  232.             </div>

  233. 

  234.             <div class="form-group form-fix-width">

  235.               <!-- Rectangular switch -->

  236.               <label>Hide when collapse</label>

  237.               <label class="switch">

  238.                 <input type="checkbox" class="we-mega-menu we-mega-menu-btn-hide-when-collapse" name="we-mega-menu-btn-hide-when-collapse">

  239.                 <div class="slider"></div>

  240.               </label>

  241.             </div>

  242.             <div class="form-group form-fix-width">

  243.               <!-- Rectangular switch -->

  244.               <label>Show block title</label>

  245.               <label class="switch">

  246.                 <input type="checkbox" class="we-mega-menu btn-show-block-title" name="btn-show-block-title" checked="">

  247.                 <div class="slider"></div>

  248.               </label>

  249.             </div>

  250.           </div>

  251. 

  252.           <div class="form-group">

  253.             <label>Grid (1-12)</label>

  254.             <select class="form-control we-mega-menu cbx-we-mega-menu-col-width">

  255.               {% for i in 1..12 %}

  256.                 <option value="{{ i }}">{{ i }}</option>

  257.               {% endfor %}

  258.             </select>

  259.           </div>

  260. 

  261.           <div class="form-group">

  262.             <label>Blocks</label>

  263.             <select class="form-control cbx-select-block">

  264.               <option value="">Select Blocks</option>

  265.               {% for bid, block_name in blocks %}

  266.                 <option value="{{ bid }}"> {{ block_name }} </option>

  267.               {% endfor %}

  268.             </select>

  269.           </div>

  270. 

  271.           

  272. 

  273.           <div class="form-group">

  274.             <label>Extra class</label>

  275.             <input type="text" class="form-control we-mega-menu-txt-extra-class" placeholder="Extra class">

  276.           </div>

  277.         </div>

  278.         

  279.       </div>  

  280.     </div>

  281. 

  282. 

  283. 

  284. 

  285. 

  286. 

  287. 

  288. 

  289. 

  290.     <div class="we-mega-menu-bar we-mega-menu-actions">

  291.       <div class="row">

  292.         <div class="col-md-12">

  293.           <button class="btn btn-success btn-save" type="submit">Save</button>

  294.           <button class="btn btn-danger btn-reset" type="submit">Reset</button>

  295.           <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#resetToDefault">

  296.             Reset To Default

  297.           </button>

  298.         </div>

  299.       </div>

  300.     </div>

  301. 

  302.     <!-- Modal reset to default -->

  303.     <div class="modal fade" id="resetToDefault" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

  304.       <div class="modal-dialog" role="document">

  305.         <div class="modal-content">

  306.           <div class="modal-header">

  307.             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

  308.             <h4 class="modal-title" id="myModalLabel">Warning</h4>

  309.           </div>

  310.           <div class="modal-body">

  311.             Are you sure reset menu to default ?

  312.           </div>

  313.           <div class="modal-footer">

  314.             <button type="button" class="btn btn-danger btn-reset-to-default">Reset To Default</button>

  315.             <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

  316.           </div>

  317.         </div>

  318.       </div>

  319.     </div>

  320. 

  321.   </div>

  322. </div>

  323. 

  324. <nav {{ attributes }}>

  325.   <div class="container-fluid">

  326.     {{ content }}

  327.   </div>

  328. </nav>