templates/includes/mega-menu/1/main.html.twig line 1

Open in your IDE?
  1. <div id="rcsmainmenu">
  2.   <div id="rcsmain">
  3.     {% for item in items|sort((a, b)=>a.position <=> b.position)|filter(item => item.level == 1) %}
  4.     <column class="mainitem">
  5.       <a href="{{ item.link }}">{{ item.title }}</a>
  6.           {% if items|filter((itm)=> itm.parent == item.uuid) %}
  7.             <div class="rcssub" id="menuDropDown">
  8.               {% for child in items|sort((c, d)=>c.position <=> d.position)|filter(child => child.level == 2 and child.parent == item.uuid) %}
  9.                 <column class="menulv2">
  10.                   <a class="menu-label" href="{{ child.link }}">{{ child.title }}</a>
  11.                   <column class="menulv3">
  12.                     {% for grandchild in items|sort((e, f)=>e.position <=> f.position)|filter(grandchild => grandchild.level == 3 and grandchild.parent == child.uuid) %}
  13.                       <a href="{{ grandchild.link }}">{{ grandchild.title }}</a>
  14.                     {% endfor %}
  15.                   </column>
  16.                 </column> 
  17.               {% endfor %}
  21.               {# First Menu Item Ad Space #}
  22.               {% if loop.index == 1 %}
  23.                 <div class="ad ad-space">
  24.                     {% set classified_ad_image = '<img src="/uploads/media/2019/01/mega-menu-classifieds.jpg" loading="lazy" />' %}
  25.                     {% set classified_ad_desc = 'Place Your Ad or Read Posted Ads On RCS' %}
  26.                     {% set classified_ad_url = '/our-listings/' %}
  27.                     {% if menu_ads is defined and menu_ads and menu_ads['menu-ad-classifieds'] is defined %}
  28.                       {% set classified_ad = menu_ads['menu-ad-classifieds'] %}
  29.                       {% set classified_ad_image = classified_ad.getMedia() ? classified_ad.getMediaImageTag('', '', '_self') : classified_ad_image %}
  30.                       {% set classified_ad_desc =  classified_ad.getDescription() ? classified_ad.getDescriptionLink('_self') : classified_ad_desc %}
  31.                       {% set classified_ad_url =  classified_ad.getExternalUrl() ? classified_ad.getExternalUrl('_self') : classified_ad_url %}
  32.                     {% endif %}
  33.                     <div class="megamenufeaturedimage-new">
  34.                       <div class="megamenufeaturedimage2-new">
  35.                         {{ classified_ad_image | raw }}
  36.                       </div>
  37.                     </div>
  38.                     <div>
  39.                       <h2 class="menu-ad-link">
  40.                         {{ classified_ad_desc | raw }}
  41.                       </h2>
  42.                       <span class="featuredlinkmm" style="position: unset"><a href="{{ classified_ad_url | raw }}">Learn More</a></span>
  43.                     </div>
  44.                 </div>
  45.               {% endif %}
  48.               {% if loop.index == 2 %}
  49.                 <div class="ad ad-space">
  50.                       {% set directory_ad_image = '<img src="/uploads/media/2019/01/megamenu-directories.jpg" loading="lazy" />' %}
  51.                       {% set directory_ad_desc = 'Announcing New Measurement Tools' %}
  52.                       {% set directory_ad_url = '/our-directory/' %}
  53.                       {% if menu_ads is defined and menu_ads and menu_ads['menu-ad-directory'] is defined %}
  54.                         {% set directory_ad = menu_ads['menu-ad-directory'] %}
  55.                         {% set directory_ad_image = directory_ad.getMedia() ? directory_ad.getMediaImageTag('', '', '_self') : directory_ad_image %}
  56.                         {% set directory_ad_desc =  directory_ad.getDescription() ? directory_ad.getDescriptionLink('_self') : directory_ad_desc %}
  57.                         {% set directory_ad_url =  directory_ad.getExternalUrl() ? directory_ad.getExternalUrl('_self') : directory_ad_url %}
  58.                       {% endif %}
  59.                       <div class="megamenufeaturedimage-new">
  60.                         <div class="megamenufeaturedimage2-new">
  61.                           {{ directory_ad_image | raw }}
  62.                         </div>
  63.                       </div>
  64.                       <div>
  65.                         <h2 class="menu-ad-link">
  66.                           {{ directory_ad_desc | raw }}
  67.                         </h2>
  68.                         <span class="featuredlinkmm" style="position: unset"><a href="{{ directory_ad_url | raw }}">Learn More</a></span>
  69.                       </div>
  70.                 </div>
  71.               {% endif %}
  73.               {% if loop.index == 3 %}
  74.                 <div class="ad ad-space">
  75.                     {% set forum_ad_image = '<img src="/uploads/media/2019/01/mega-menu-forum-and-news.jpg" loading="lazy" />' %}
  76.                     {% set forum_ad_desc = 'Roofing Roadtrips With Heidi - The Future Is Bright' %}
  77.                     {% set forum_ad_url = '/news-room/' %}
  78.                     {% if menu_ads is defined and menu_ads and menu_ads['menu-ad-forum-news'] is defined %}
  79.                       {% set forum_ad = menu_ads['menu-ad-forum-news'] %}
  80.                       {% set forum_ad_image = forum_ad.getMedia() ? forum_ad.getMediaImageTag('', '', '_self') : forum_ad_image %}
  81.                       {% set forum_ad_desc =  forum_ad.getDescription() ? forum_ad.getDescriptionLink('_self') : forum_ad_desc %}
  82.                       {% set forum_ad_url =  forum_ad.getExternalUrl() ? forum_ad.getExternalUrl('_self') : forum_ad_url %}
  83.                     {% endif %}
  84.                     <div class="megamenufeaturedimage-new">
  85.                       <div class="megamenufeaturedimage2-new">
  86.                         {{ forum_ad_image | raw }}
  87.                       </div>
  88.                     </div>
  89.                     <div>
  90.                       <h2 class="menu-ad-link">
  91.                         {{ forum_ad_desc | raw }}
  92.                       </h2>
  93.                       <span class="featuredlinkmm" style="position: unset"><a href="{{ forum_ad_url | raw }}">Learn More</a></span>
  94.                     </div>
  95.                 </div>
  96.               {% endif %}
  98.               {% if loop.index == 4 %}
  99.                 <div class="ad-4 ad-space">
  100.                       {% set info_ad_image = '<img src="/uploads/media/2019/02/information-featured-image.jpg" loading="lazy">' %}
  101.                       {% set info_ad_desc = 'Get your free window cling here' %}
  102.                       {% set info_ad_url = "/our-listings/"  %}
  103.                       {% if menu_ads is defined and menu_ads and menu_ads['menu-ad-information'] is defined %}
  104.                         {% set info_ad = menu_ads['menu-ad-information'] %}
  105.                         {% set info_ad_image = info_ad.getMedia() ? info_ad.getMediaImageTag('', '', '_self') : info_ad_image %}
  106.                         {% set info_ad_desc =  info_ad.getDescription() ? info_ad.getDescriptionLink('_self') : info_ad_desc %}
  107.                         {% set info_ad_url = info_ad.getExternalUrl() ? info_ad.getExternalUrl('_self') : info_ad_url %}
  108.                       {% endif %}
  109.                       <div class="megamenufeaturedimage-new">
  110.                         <div class="megamenufeaturedimage2-new">
  111.                           {{ info_ad_image | raw }}
  112.                         </div>
  113.                       </div>
  114.                       <div>
  115.                         <h2 class="menu-ad-link">
  116.                           {{ info_ad_desc | raw }}
  117.                         </h2>
  118.                         <span class="featuredlinkmm" style="position: unset"><a href="{{ info_ad_url | raw }}">Learn More</a></span>
  119.                       </div>
  120.                 </div>
  121.               {% endif %}
  123.               {% if loop.index == 5 %}
  124.                 <div class="ad ad-space">
  125.                       {% set rlw_ad_image = '<img src="/uploads/media/2019/01/rlw-mega-menu.png" loading="lazy" />' %}
  126.                       {% set rlw_ad_desc = 'Time For A Website Update' %}
  127.                       {% set rlw_ad_url = '/news-room/' %}
  128.                       {% if menu_ads is defined and menu_ads and menu_ads['menu-ad-read-listen-watch'] is defined %}
  129.                         {% set rlw_ad = menu_ads['menu-ad-read-listen-watch'] %}
  130.                         {% set rlw_ad_image = rlw_ad.getMedia() ? rlw_ad.getMediaImageTag('', '', '_self') : rlw_ad_image %}
  131.                         {% set rlw_ad_desc =  rlw_ad.getDescription() ? rlw_ad.getDescriptionLink('_self') : rlw_ad_desc %}
  132.                         {% set rlw_ad_url =  rlw_ad.getExternalUrl() ? rlw_ad.getExternalUrl('_self') : rlw_ad_url %}
  133.                       {% endif %}
  134.                       <div class="megamenufeaturedimage-new">
  135.                         <div class="megamenufeaturedimage2-new">
  136.                           {{ rlw_ad_image | raw }}
  137.                         </div>
  138.                       </div>
  139.                       <div>
  140.                         <h2 class="menu-ad-link">
  141.                           {{ rlw_ad_desc | raw }}
  142.                         </h2>
  143.                         <span class="featuredlinkmm" style="position: unset"><a href="{{ rlw_ad_url | raw }}">Learn More</a></span>
  144.                       </div>
  145.                 </div>
  146.               {% endif %}
  148.               {% if loop.index == 6 %}
  149.                 <div class="ad ad-space">
  150.                       {% set club_ad_image = '<img src="https://www.rooferscoffeeshop.com/uploads/media/2019/04/rcs-r-club.png" style="margin-top: 50px;" loading="lazy" />' %}
  151.                       {% set club_ad_desc = 'Join the <br>R-Club' %}
  152.                       {% set club_ad_url = '/rcs-club-sign-up/' %}
  153.                       {% if menu_ads is defined and menu_ads and menu_ads['menu-ad-r-club'] is defined %}
  154.                         {% set club_ad = menu_ads['menu-ad-r-club'] %}
  155.                         {% set club_ad_image = club_ad.getMedia() ? club_ad.getMediaImageTag('', '', '_self') : club_ad_image %}
  156.                         {% set club_ad_desc =  club_ad.getDescription() ? club_ad.getDescriptionLink('_self') : club_ad_desc %}
  157.                         {% set club_ad_url = club_ad.getExternalUrl() ? club_ad.getExternalUrl('_self') : club_ad_url %}
  158.                       {% endif %}
  159.                       
  160.                       {#
  161.                       <div class="megamenufeaturedimage" style="width:100%; height: 100%">
  162.                         <div class="megamenuimagetext">
  163.                           {{ club_ad_image | raw }}
  164.                           <h2>
  165.                             {{ club_ad_desc | raw }}
  166.                           </h2>
  167.                           <span class="featuredlinkmm"><a href="{{ club_ad_url | raw }}">Learn More</a></span>
  168.                         </div>
  169.                       </div>
  170.                       #}
  172.                       <div class="megamenufeaturedimage-new">
  173.                         <div class="megamenufeaturedimage2-new">
  174.                           {{ club_ad_image | raw }}
  175.                         </div>
  176.                       </div>
  177.                       <div>
  178.                         <h2 class="menu-ad-link">
  179.                           {{ club_ad_desc | raw }}
  180.                         </h2>
  181.                         <span class="featuredlinkmm" style="position: unset"><a href="{{ club_ad_url | raw }}">Learn More</a></span>
  182.                       </div>
  184.                 </div>
  185.               {% endif %}
  186.             </div>
  187.           {% endif %}
  188.     </column>
  190.     {% endfor %}
  191.   </div>
  192. </div>
  194. <style>
  195.   .megamenufeaturedimage-new {
  196.     width:100%;
  197.     text-align: center;
  198.   }
  199.   .megamenufeaturedimage2-new {
  200.    max-width:400px;
  201.    margin-left:auto;
  202.    margin-right:auto;
  203.   }
  204.   .menu-ad-link {
  205.     text-align: center;
  206.     margin-top: 15px;
  207.   }
  208.   .ad-space {
  209.     padding: 15px;
  210.     padding-top: 5px;
  211.   }
  214.   div#rcsmainmenu {
  215.     width: 100%;
  216.   }
  217.   div#rcsmain {
  218.     position: relative;
  219.     display: grid;
  220.     grid-template: 'a b c d e f';
  221.   }
  222.   div#menuDropDown {
  223.     background: white;
  224.     position: absolute;
  225.     display: grid;
  226.     gap: 50px;
  227.     padding: 0 0 0 30px;
  228.     grid-auto-columns: 1fr;
  229.     grid-auto-flow: column;
  230.     grid-template: 'a b c d e f';
  231.   }
  232.   .mainitem:hover > .rcssub {
  233.     display: grid;
  234.     visibility: unset;
  235.     opacity: 1;
  236.     visibility: visible;
  237.     overflow: visible;
  238.   }
  239.   .menu-label {
  240.     font-weight: 700;
  241.     border-bottom: 1px solid black !important;
  242.     font-size: 16px !important;
  243.   }
  244.   .menulv2 > a {
  245.     width: 100%;
  246.     padding: 8px 15px;
  247.     white-space: nowrap;
  248.     color: #696766;
  249.     text-decoration: none;
  250.   }
  251.   .menulv3 {
  252.     display: grid;
  253.     grid-template-columns: 'a';
  254.     padding-bottom: 15px;
  255.   }
  256.   .menulv3 > a {
  257.     font-weight: 600;
  258.     color: #696766;
  259.     font-size: 12px !important;
  260.   }
  261.   
  262.   /* ad space */
  263.   .ad{
  264.     background: #A6252A;
  265.     grid-column-start: 4;
  266.     grid-column-end: 7;
  267.   }
  268.   .ad-4{
  269.     background: #A6252A;
  270.     grid-column-start: 5;
  271.     grid-column-end: 7;
  272.     padding: 15px
  273.   }
  274.   .ad-4 h2{
  275.     color: #d2d2d1;
  276.   }
  277.    .mainitem  a:hover {
  278.     color: #ed6262;
  279.     text-decoration: none;
  280.     border: 0;
  281.     outline: 0;
  282. }
  283.   @media only screen and (max-width: 1199px){
  284.     div#menuDropDown{
  285.       grid-template: 'a b c d';
  286.       padding: 0 30px;
  287.       gap: unset;
  288.     }
  289.     .ad, .ad-4{
  290.       display: none;
  291.     }
  293.   }
  294. </style>