templates/menu.html.twig line 1

1. <header id="Header" class="header wf-section">
2.     <div class="main-container">
3.         <div class="header-container">
4.             <div class="header-flex">
5.                 <address class="header-contact-details-container unl-margin">
6.                     <div class="phone-number-container">
7.                         <div class="phone-number">
8.                             <a href="tel:+41215565252" class="header-phone-link w-inline-block">
9.                                 <div class="header-image-container">
10.                                     <img src="/images/themes/6148a794ba4f520e3ca3cad1_phone.svg" loading="lazy" alt="">
11.                                 </div>
12.                                 <div class="h7-hind">
13.                                     +41 21 556 52 52
14.                                 </div>
15.                             </a>
16.                         </div>
17.                     </div>
18.                 </address>
19.                 <aside class="erase header-social-media-icon-container">
20.                     <a href="#" class="w-inline-block">
21.                         <div class="header-social-image-container">
22.                             <img src="/images/themes/6148a79661bd5d8ee57f9320_facebook.svg" loading="lazy" alt="facebook-icon
23.                             ">
24.                         </div>
25.                     </a>
26.                     <a href="#" class="w-inline-block">
27.                         <div class="header-social-image-container">
28.                             <img src="/images/themes/6148a79683e5c47e086e68b2_twitter.svg" loading="lazy" alt="twitter-icon
29.                             ">
30.                         </div>
31.                     </a>
32.                     <a href="#" class="w-inline-block">
33.                         <div class="header-social-image-container">
34.                             <img src="/images/themes/6148a795f3644861a0e3d860_linked-in.svg" loading="lazy" alt="linked-in-icon
35.                             ">
36.                         </div>
37.                     </a>
38.                     <a href="#" class="w-inline-block">
39.                         <div class="header-social-image-container resize">
40.                             <img src="/images/themes/6148a7957fe8e76bc600c51f_gplus.svg" loading="lazy" alt="google+ icon">
41.                         </div>
42.                     </a>
43.                     <a href="#" class="w-inline-block">
44.                         <div class="header-social-image-container">
45.                             <img src="/images/themes/6148a7955bc7f4373f3d2475_instagram.svg" loading="lazy" alt="instagram-icon
46.                             ">
47.                         </div>
48.                     </a>
49.                     <a href="#" class="w-inline-block">
50.                         <div class="header-social-image-container">
51.                             <img src="/images/themes/6148a795c75188c425921de9_skype.svg" loading="lazy" alt="skype icon
52.                             ">
53.                         </div>
54.                     </a>
55.                 </aside>
56.             </div>
57.         </div>
58.     </div>
59. </header>
60. <div data-animation="over-right" class="navbar-white w-nav" data-easing2="ease" data-easing="ease" data-collapse="medium" data-w-id="8aa8e285-fe66-c764-4206-0ebbbac0c7f3" role="banner" data-duration="0" id="navbar">
61.     <div class="main-container">
62.         <div class="nav-container">
63.             <a href="" aria-current="page" class="hidden-xs hidden-sm height-80 w-nav-brand w--current" aria-label="home">
64.                 <img src="{{ asset('images/logos/logo_white.png') }}" loading="lazy" alt="Startflow logo" width="auto" height="100%" style="
65.                 max-width: initial;
66.                 width: auto;
67.             ">
68.             </a>
69.             <nav role="navigation" class="nav-menu w-nav-menu" style="transform: translateX(0px) translateY(0px);">
70.                 <div class="all-nav-links-container">
71.                     <div class="nav-menu-container">
72.                         <a href="" aria-current="page" class="nav-menu-logo-container w-inline-block w--current">
73.                             <img src="{{ asset('images/logos/logo.png') }}" loading="lazy">
74.                         </a>
75.                         <div class="nav-link-container">
76.                             <a href="{{ path('home') }}" aria-current="page" class="nav-link-white w-nav-link">
77.                                 Accueil
78.                             </a>
79.                             <a href="{{ path('about-us') }}" class="nav-link-white w-nav-link">
80.                                 Nous connaitre
81.                             </a>
82.                             <div class="catMenuDesk link nav-link-white w-nav-link">
83.                                 Nos services
84.                                 <div class="hoverMenuDesk">
85.                                     <a href="/" class="width-max-content nav-link w-nav-link">
86.                                         Panneau photovoltaïque
87.                                     </a>
88.                                     <a href="{{ path('heat-pump') }}" class="width-max-content nav-link w-nav-link">
89.                                         Pompe à chaleur
90.                                     </a>
91.                                     <a href="{{ path('electrical-terminal') }}" class="width-max-content nav-link w-nav-link">
92.                                         Borne électrique
93.                                     </a>
94.                                 </div>
95.                             </div>
96.                             <a href="{{ path('realisation') }}" class="nav-link-white w-nav-link">
97.                                 Réalisations
98.                             </a>
99.                             <a href="{{ path('career') }}" class="nav-link-white w-nav-link">
100.                                 Nous rejoindre
101.                             </a>
102.                             <a href="{{ path('devis') }}" class="nav-link-white w-nav-link">
103.                                 Étude
104.                             </a>
105.                             <aside class="erase nav-menu-social-media-icon-container">
106.                                 <aside class="header-social-media-icon-container mobile">
107.                                     <a href="" class="w-inline-block">
108.                                         <div class="header-social-image-container">
109.                                             <img src="/images/themes/6148a79661bd5d8ee57f9320_facebook.svg" loading="lazy" alt="facebook-icon
110.                                             ">
111.                                         </div>
112.                                     </a>
113.                                     <a href="" class="w-inline-block">
114.                                         <div class="header-social-image-container">
115.                                             <img src="/images/themes/6148a79683e5c47e086e68b2_twitter.svg" loading="lazy" alt="twitter-icon
116.                                             ">
117.                                         </div>
118.                                     </a>
119.                                     <a href="" class="w-inline-block">
120.                                         <div class="header-social-image-container">
121.                                             <img src="/images/themes/6148a795f3644861a0e3d860_linked-in.svg" loading="lazy" alt="linked-in-icon
122.                                             ">
123.                                         </div>
124.                                     </a>
125.                                     <a href="" class="w-inline-block">
126.                                         <div class="header-social-image-container resize">
127.                                             <img src="/images/themes/6148a7957fe8e76bc600c51f_gplus.svg" loading="lazy" alt="google+ icon">
128.                                         </div>
129.                                     </a>
130.                                     <a href="" class="w-inline-block">
131.                                         <div class="header-social-image-container">
132.                                             <img src="/images/themes/6148a7955bc7f4373f3d2475_instagram.svg" loading="lazy" alt="instagram-icon
133.                                             ">
134.                                         </div>
135.                                     </a>
136.                                     <a href="" class="w-inline-block">
137.                                         <div class="header-social-image-container">
138.                                             <img src="/images/themes/6148a795c75188c425921de9_skype.svg" loading="lazy" alt="skype icon
139.                                             ">
140.                                         </div>
141.                                     </a>
142.                                 </aside>
143.                             </aside>
144.                         </div>
145.                         <div class="search---nav-button-container">
146.                             <div class="nav-button-container">
147.                                 <a href="{{ path('contact') }}" class="nav-button-white w-button">
148.                                     Nous contacter
149.                                 </a>
150.                             </div>
151.                         </div>
152.                     </div>
153.                 </div>
154.             </nav>
155.             <div class="menu-button w-nav-button" style="-webkit-user-select: text;" aria-label="menu" role="button" tabindex="0" aria-controls="w-nav-overlay-0" aria-haspopup="menu" aria-expanded="false">
156.                 <img src="/images/themes/61231c4362dde02a16d2bd5f_icons8-menu-white.svg" loading="lazy" alt="menu-icon
157.                     " class="open-menu" style="display: block;">
158.                 <img src="/images/themes/6120f8b352b92702abff4c4d_icons8-delete white.svg" loading="lazy" alt=" close menu icon" class="close-menu" style="display: none;">
159.             </div>
160.         </div>
161.     </div>
162.     <div class="w-nav-overlay" data-wf-ignore="" id="w-nav-overlay-0" style="height: 12759.1px;"></div>
163. </div>
164. <div data-animation="over-right" class="navbar-white-fixed w-nav" data-easing2="ease" data-easing="ease" data-collapse="medium" data-w-id="a1698ba3-d86a-e73c-be25-dfab378a1b95" role="banner" data-no-scroll="1" data-duration="0" id="navbar" data-doc-height="1" style="will-change: transform; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;">
165.     <div class="main-container">
166.         <div class="fixed-nav-container">
167.             <a href="" aria-current="page" class="brand w-nav-brand w--current" aria-label="home">
168.                 <img src="{{ asset('images/logos/logo.png') }}" loading="lazy" alt="logo home performance" style="min-width: initial;max-width: initial;width: initial;">
169.             </a>
170.             <nav role="navigation" class="nav-menu w-nav-menu">
171.                 <div class="all-nav-links-container">
172.                     <div class="nav-menu-container">
173.                         <div class="nav-menu-logo-container">
174.                             <img src="{{ asset('images/logos/logo.png') }}" loading="lazy" alt="logo home performance">
175.                         </div>
176.                         <div class="nav-link-container">
177.                             <a href="{{ path('home') }}" aria-current="page" class="nav-link w-nav-link w--current">
178.                                 Accueil
179.                             </a>
180.                             <a href="{{ path('about-us') }}" class="nav-link w-nav-link">
181.                                 Nous connaître
182.                             </a>
183.                             <div class="catMenuDesk link nav-link w-nav-link">
184.                                 Nos services
185.                                 <div class="hoverMenuDesk">
186.                                     <a href="/" class="width-max-content nav-link w-nav-link">
187.                                         Panneau photovoltaïque
188.                                     </a>
189.                                     <a href="{{ path('heat-pump') }}" class="width-max-content nav-link w-nav-link">
190.                                         Pompe à chaleur
191.                                     </a>
192.                                     <a href="{{ path('electrical-terminal') }}" class="width-max-content nav-link w-nav-link">
193.                                         Borne électrique
194.                                     </a>
195.                                 </div>
196.                             </div>
197.                             <a href="{{ path('realisation') }}" class="nav-link w-nav-link">
198.                                 Réalisations
199.                             </a>
200.                             <a href="{{ path('career') }}" class="nav-link w-nav-link">
201.                                 Nous rejoindre
202.                             </a>
203.                             <a href="{{ path('devis') }}" class="nav-link w-nav-link">
204.                                 Étude
205.                             </a>
206.                             <aside class="nav-menu-social-media-icon-container">
207.                                 <aside class="header-social-media-icon-container">
208.                                     <a href="" class="w-inline-block">
209.                                         <div class="header-social-image-container">
210.                                             <img src="/images/themes/6148a79661bd5d8ee57f9320_facebook.svg" loading="lazy" alt="facebook-icon
211.                                             ">
212.                                         </div>
213.                                     </a>
214.                                     <a href="" class="w-inline-block">
215.                                         <div class="header-social-image-container">
216.                                             <img src="/images/themes/6148a79683e5c47e086e68b2_twitter.svg" loading="lazy" alt="twitter-icon
217.                                             ">
218.                                         </div>
219.                                     </a>
220.                                     <a href="" class="w-inline-block">
221.                                         <div class="header-social-image-container">
222.                                             <img src="/images/themes/6148a795f3644861a0e3d860_linked-in.svg" loading="lazy" alt="linked-in-icon
223.                                             ">
224.                                         </div>
225.                                     </a>
226.                                     <a href="" class="w-inline-block">
227.                                         <div class="header-social-image-container resize">
228.                                             <img src="/images/themes/6148a7957fe8e76bc600c51f_gplus.svg" loading="lazy" alt="google+ icon">
229.                                         </div>
230.                                     </a>
231.                                     <a href="" class="w-inline-block">
232.                                         <div class="header-social-image-container">
233.                                             <img src="/images/themes/6148a7955bc7f4373f3d2475_instagram.svg" loading="lazy" alt="instagram-icon
234.                                             ">
235.                                         </div>
236.                                     </a>
237.                                     <a href="" class="w-inline-block">
238.                                         <div class="header-social-image-container">
239.                                             <img src="/images/themes/6148a795c75188c425921de9_skype.svg" loading="lazy" alt="skype icon
240.                                             ">
241.                                         </div>
242.                                     </a>
243.                                 </aside>
244.                             </aside>
245.                         </div>
246.                         <div class="search---nav-button-container">
247.                             <div class="nav-button-container">
248.                                 <a href="{{ path('contact') }}" class="nav-button w-button">
249.                                     Nous contacter
250.                                 </a>
251.                             </div>
252.                         </div>
253.                     </div>
254.                 </div>
255.             </nav>
256.             <div class="menu-button w-nav-button" style="-webkit-user-select: text;" aria-label="menu" role="button" tabindex="0" aria-controls="w-nav-overlay-1" aria-haspopup="menu" aria-expanded="false">
257.                 <img src="/images/themes/6120f673a2a44720389411bd_icons8-menu.svg" loading="lazy" alt="hamburger menu icon" class="open-menu" style="display: block;">
258.                 <img src="/images/themes/6120f8b352b92702abff4c4d_icons8-delete white.svg" loading="lazy" alt=" close menu icon" class="close-menu" style="display: none;">
259.             </div>
260.         </div>
261.     </div>
262.     <div class="w-nav-overlay" data-wf-ignore="" id="w-nav-overlay-1"></div>
263. </div>
264. <div class="search_bar standard">
265.     <div class="standard bg-white visible-xs visible-sm hidden-lg hidden-md">
266.         <div class="col-sm-1 col-xs-1 unl-padding-right with-vertical-text-align height-50">
267.             <div class="standard with-padding-top-5">
268.                 <i class="fas fa-bars fa-lg size-18 link menu_burger_desk"></i>
269.                 <div class="standard size-11 menu_burger_desk">
270.                     MENU
271.                 </div>
272.             </div>
273.         </div>
275.         <div class="col-sm-8 col-sm-offset-1 col-xs-8 col-xs-offset-1 align height-50 visible-xs visible-sm">
276.             <div class="width-auto height-max paddingT-mob-3 paddingL-mob-15">
277.                 <a href="/home">
278.                     <img src="{{ asset('images/logos/logo.png') }}" class="with-margin-top-5" style="height:40px;width:auto;">
279.                 </a>
280.             </div>
281.         </div>
283.         <!-- right -->
285.         <div class="col-sm-2 col-xs-2 unl-padding with-vertical-text-align height-50">
286.             <div class="standard with-all-align">
287.                 <a href="tel:+41215565252">
288.                     <i class="fas fa-phone"></i>
289.                 </a>
290.             </div>
291.         </div>
292.     </div>
294.     <div id="header-font" class="erase">
295.         <div class="col-lg-3 col-md-4 height-max hidden-xs hidden-sm">
296.             <a href="/" alt="retour vers la page d'accueil" class="HeightLogo">
297.                 <img src="{{ asset('images/logos/logo.png') }}" alt="Home performance" height="49px" border="0" />
298.             </a>
299.         </div>
300.         <div class="col-lg-4 col-md-4 hidden-xs hidden-sm">
301.             <div class="standard with-padding-top-bottom-10 paddingTB-mob-4">
302.                 
303.             </div>
304.         </div>
305.         <div class="col-lg-5 col-md-4 hidden-xs hidden-sm height-max with-padding-top-bottom-22">
306.             <div class="pull-right">
307.                 <ul class="list-inline-block top-menu inline-block">
308.                     <li>
309.                         <a href="/demandez-un-devis-gratuit" class="style2menu">
310.                             Devis Gratuit
311.                         </a>
312.                     </li>
313.                 </ul>
314.                 <div class="containerPanier">
315.                     <a href="tel:+41215565252" class="phoneBox">
316.                         <i class="fas fa-phone"></i> +41 21 556 52 52
317.                     </a>
318.                 </div>
319.             </div>
320.         </div>
321.         <div class="visible-lg visible-md hidden-xs hidden-sm standard bgMenu border_theme-bottom">
322.             <div class="menu-item active_item menu_burger_desk">
323.                 <i class="fas fa-bars fa-lg link"></i>
324.                  Menu
325.             </div>
326.             <a href="/" class="menu-item">
327.                 Accueil
328.             </a>
329.             <a href="{{ path('about-us') }}" class="menu-item">
330.                 Qui sommes nous
331.             </a>
332.             <a href="{{ path('realisation') }}" class="menu-item">
333.                 Réalisations
334.             </a>
335.             <a href="{{ path('career') }}" class="menu-item">
336.                 Rejoignez-nous
337.             </a>
338.             <a href="/demandez-un-devis-gratuit" class="menu-item">
339.                 Demandez un devis
340.             </a>
341.             <a href="/contact" class="menu-item">
342.                 Contactez-nous
343.             </a>
344.         </div>
345.     </div>
346. </div>
348. <!-- menu complet -->
349. <div class="btn_menu_desk">
350.     <div class="standard-full with-relative with-padding-top-20">
351.         <div class="line_menu_connection">
352.             <a href="/home" style="color:#FFF;">
353.                 <img src="{{ asset('images/logos/logo.png') }}" class="with-margin-top-5" style="height:80px;width:auto;">
354.             </a>
355.         </div>
357.         <div class="close_menu_desk">
358.             <i class="fas fa-times fa-lg"></i>
359.         </div>
361.         <a href="{{ asset('/') }}" class="link_menuColor">
362.             <div class="menu_link">
363.                 Accueil
364.             </div>
365.         </a>
367.         <a href="{{ path('about-us') }}" class="link_menuColor">
368.             <div class="menu_link">
369.                 Nous connaître
370.             </div>
371.         </a>
373.         <a href="/demandez-un-devis-gratuit" class="link_menuColor">
374.             <div class="menu_link">
375.                 Demandez une étude
376.             </div>
377.         </a>
379.         <div class="menu_separator"></div>
380.         <div class="titre_categorie_menu">
381.             Nos services
382.         </div>
384.         <a href="/" class="link_menuColor">
385.             <div class="menu_link">
386.                 Panneau photovoltaïque
387.             </div>
388.         </a>
389.         <a href="{{ path('heat-pump') }}" class="link_menuColor">
390.             <div class="menu_link">
391.                 Pompe à chaleur
392.             </div>
393.         </a>
394.         <a href="{{ path('electrical-terminal') }}" class="link_menuColor">
395.             <div class="menu_link">
396.                 Borne électrique
397.             </div>
398.         </a>
400.         <div class="menu_separator"></div>
401.         <div class="titre_categorie_menu">
402.             Divers
403.         </div>
406.         <a href="{{ path('realisation') }}" class="link_menuColor">
407.             <div class="menu_link">
408.                 Nos réalisations
409.             </div>
410.         </a>
412.         <a href="{{ path('career') }}" class="link_menuColor">
413.             <div class="menu_link">
414.                 Nous rejoindre
415.             </div>
416.         </a>
418.         <a href="{{ path('contact') }}" class="link_menuColor">
419.             <div class="menu_link">
420.                 Nous contacter
421.             </div>
422.         </a>
423.     </div>
424. </div>
426. {% block javascripts %}
427.     <script>
428.     $(document).ready(function() {
429.         // redimensionne le menu
430.         redim('.redim');
431.         // affichage du sous-menu
432.         $('.menu-item-has-children').on('mouseover', function(e) {
433.             e.preventDefault();
434.             if($(this).hasClass('BgM')){
435.                 var mClass = 'big-menu';
436.                 $(this).css({'position':'initial'});
437.             }else{
438.                 var mClass = 'sub-menu';
439.             }
440.             $('.sub-menu, .big-menu').hide();
441.             var submenu = $(this).children('.' + mClass);
442.             if ($(submenu).is(':hidden')) {
443.                 $(submenu).show();
444.             }else {
445.                 $(submenu).hide();
446.             }
447.         }).on('mouseleave', function(e) {
448.             $('.sub-menu, .big-menu').hide();
449.             $(this).parent().css({'position':'relative'});
450.         });
451.     });
452.     </script>
453. {% endblock %}
455. {% block javascriptFooter %}
456. <script>
457.     $(document).ready(function(){
459.         $('.catMenuDesk').mouseover(function(){
460.             $(this).children('.hoverMenuDesk').slideDown();
461.         });
462.         $('.catMenuDesk').mouseleave(function(){
463.             $(this).children('.hoverMenuDesk').slideUp();
464.         });
465.         // Menu desktop
466.         //
467.         $(".close_menu_desk").click(function() {
468.             $(".btn_menu_desk, #BgPoppup").hide();
469.             $('#BgPoppup').css({'z-index':'899'});
470.         });
471.         $('.menu_burger').click(function(){
472.             $('.modal.menu').addClass('show');
473.         })
474.         $('.menu_burger_desk').click(function(e){
475.             e.stopPropagation();
476.             $('#BgPoppup').css({'z-index':'1101'});
477.             $('.btn_menu_desk, #BgPoppup').show();
478.         })
479.     });
480. </script>
481. {% endblock %}