https://ashefaa.com/Mktba/themes/modern-vII/js/HeaderMainNew.js

1 function addWhenHoveringSectionMain(){
2        const Sections = document.querySelector(".Sections");
3        const SectionOpener = document.querySelector(".Section-opener");
4        const AshefaaSections = document.querySelector(".Ashefaa-Sections");
5
6        let MouseInside = false;
7        let MouseInsideSections = false;
8        let delay;
9
10        SectionOpener.addEventListener('mouseenter' , function (){
11           SectionOpener.style.boxShadow = '1px 1px 0 rgba(255,255,255,0.3)';
12           SectionOpener.style.backgroundColor = 'rgba(255,255,255,0.1)';
13           delay = setTimeout(()=>{
14               AshefaaSections.style.display = 'flex';
15           } , 600)
16
17           MouseInside = true;
18        });
19
20        SectionOpener.addEventListener('mouseleave' , function (){
21            clearTimeout(delay)
22            SectionOpener.style.boxShadow = 'none';
23            SectionOpener.style.backgroundColor = 'inherit';
24
25            MouseInside = false;
26        });
27
28
29        AshefaaSections.addEventListener('mouseleave' , function (){
30            clearTimeout(delay)
31            setTimeout(()=>{
32            AshefaaSections.style.display = 'none';
33            } , 250)
34            MouseInsideSections = false;
35        });
36
37    }
38
39    function displaySearchBarAt1000px(){
40        /*==Check CSS At Media Query 1000px To See How The Search Bar Appears==*/
41        const SearchBar = document.querySelector(".Search-Bar-Ashefaa");
42        const SearchIconSM = document.querySelector(".SearchBar-Icon");
43        const GoogleGCSE = document.getElementById("___gcse_0");
44        const GoogleSearchForm = document.getElementById("googleSearchForm");
45

46        let isIconClicked = false;
47
48        SearchIconSM.addEventListener('click' , function (){
49            if (!isIconClicked){
50                SearchBar.style.display = 'flex';
51                GoogleGCSE.style.display = 'flex';
52                GoogleSearchForm.style.display = 'flex';
53                isIconClicked = true;
54            }
55           else{
56                GoogleGCSE.style.display = 'flex';
57               SearchBar.style.display = 'none';
58               GoogleSearchForm.style.display = 'none';
59               isIconClicked = false;
60            }
61
62        });
63    }
64
65    function displaySearchBarAt1000pxOrMore(){
66        const GoogleGCSE = document.getElementById("___gcse_0");
67        const SearchBar = document.querySelector(".Search-Bar-Ashefaa");
68        const GoogleSearchForm = document.getElementById("googleSearchForm");
69
70        window.addEventListener('resize' , function (){
71            if (window.innerWidth > 800){
72                SearchBar.style.display = 'flex';
73                GoogleGCSE.style.display = 'flex';
74                GoogleSearchForm.style.display = 'flex';
75            }
76            else{
77                GoogleGCSE.style.display = 'flex';
78                SearchBar.style.display = 'none';
79                GoogleSearchForm.style.display = 'none';
80            }
81        });
82
83    }
84
85    /*==================FUNCTION CALLING===================*/
86
87addWhenHoveringSectionMain();