Scribd
Upload
44 views4 pages

Message

The document contains code for a popup menu on a website. It includes styling for the popup menu elements like the header, content area, and buttons. JavaScript functions are used to open and close the popup menu when its trigger button is clicked. The popup menu content lists navigation links for different pages on the site along with social media icons.

Uploaded by

nikoleta ntelidou
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
44 views4 pages

Message

The document contains code for a popup menu on a website. It includes styling for the popup menu elements like the header, content area, and buttons. JavaScript functions are used to open and close the popup menu when its trigger button is clicked. The popup menu content lists navigation links for different pages on the site along with social media icons.

Uploaded by

nikoleta ntelidou
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Syne&display=swap"
rel="stylesheet">
<style>
/* Styling for the popup menu */
.popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
z-index: 1;
overflow: auto;
}

.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #000000;
color: transparent;
font-size: 53px;
font-weight: bold;
font-family: 'Syne', sans-serif;
}

.popup-header button {
background-color: transparent;
border: none;
color: white;
font-size: 20px;
cursor: pointer;
font-size: 35px;
font-weight: bold;
font-family: 'Syne', sans-serif;
}

.popup-content {
padding: 50px;
font-size: 30px;
text-align: center;
:hover red;
}

/* Styling for the menu button */


#menu-btn {
text-align: right;
font-size: 35px;
}

#menu-btn a {
cursor: pointer;
}

/* Styling for the black background when popup is open */


.popup.active {
background-color: black;
opacity: 1;
}
.popup-content a {
text-decoration: none;
}
.jordan:hover {
color: red;
}
.jordan {
color: white;
}
.Yeezy:hover {
color: red;
}
.Yeezy {
color: white;
}
.Sneaker:hover {
color: red;
}
.Sneaker {
color: white;
}
.Cop:hover {
color: red;
}
.Cop {
color: white;
}
.News:hover {
color: red;
}
.News {
color: white;
}
.About:hover {
color: red;
}
.About {
color: white;
}
</style>
</head>
<body>
<!-- The button to open the popup menu -->
<div data-mesh-id="comp-l14wd0jwinlineContent-gridContainer" data-testid="mesh-
container-content">
<div id="menu-btn" class="KcpHeO tz5f0K comp-l37591nm wixui-text" data-
testid="richTextElement">
<p class="font_5"><a target="_self" data-popupid="scmeh" role="button" aria-
haspopup="dialog" tabindex="0">MENU</a></p>
</div>
</div>
<!-- The popup menu -->
<div id="popup-menu" class="popup">
<div class="popup-header">
<span>Menu</span>
<a href="https://sneakalize.blogspot.com/p/home.html" style="text-
decoration: none; color: white;"><h2>Sneakalize</h2></a>
<button onclick="closePopup()">CLOSE</button>
</div>

<div class="popup-content">
<ul style="text-align:left;font-family: 'Syne', sans-serif;">
<li><a href="https://sneakalize.blogspot.com/p/jordan_73.html"
class="jordan">Jordan Release Dates</a></li><br>
<li><a href="https://sneakalize.blogspot.com/p/yeezy_3.html"
class="Yeezy">Yeezy Release Dates</a></li><br>
<li><a href="https://sneakalize.blogspot.com/p/footer-comments-
header_3.html" class="Sneaker">Sneaker Release Dates</a></li><br>
<li><a href="https://sneakalize.blogspot.com/p/where-to-cop.html"
class="Cop">Where to Cop</a></li><br>
<li><a href="https://sneakalize.blogspot.com/p/all-news.html"
class="News">ALL NEWS</a></li><br>
<li><a href="https://sneakalize.blogspot.com/p/about.html"
class="About">ABOUT</a></li><br>
<a href="https://www.instagram.com/sneakalize" target="_blank"><img
src="https://cdn.discordapp.com/attachments/1052952755951644702/1082677248701759538
/instagram-icon.png.png" alt="Instagram" height="30"></a>
<a href="https://gr.pinterest.com/kicksculture/" target="_blank"><img
src="https://static.wixstatic.com/media/11062b_9c81fe0a816041068cc7d995e7a01f90~mv2
.png/v1/fill/w_35,h_35,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/
11062b_9c81fe0a816041068cc7d995e7a01f90~mv2.png" alt="Pinterest" height="30"></a>
<a href="https://www.tiktok.com/@sneakalize" target="_blank"><img
src="https://static.wixstatic.com/media/11062b_8e8bb1bfaeb54186ace77d5ab14933ff~mv2
.png/v1/fill/w_35,h_35,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/
11062b_8e8bb1bfaeb54186ace77d5ab14933ff~mv2.png%22%3E" alt="TikTok"
height="30"></a>
</ul>

</div>

</div>

<script>
// Function to open the popup menu
function openPopup() {
document.getElementById("popup-menu").classList.add("active");
document.getElementById("popup-menu").style.display = "block";
}

// Function to close the popup menu


function closePopup() {
document.getElementById("popup-menu").classList.remove("active");
document.getElementById("popup-menu").style.display = "none";
}

// Add event listener to menu button to open popup menu


document.getElementById("menu-btn").addEventListener("click", openPopup);
// Add event listener to menu button to change cursor to pointer on hover
document.getElementById("menu-btn").addEventListener("mouseover", function() {
this.style.cursor = "pointer";
});
// Function to remove cursor pointer when mouse leaves menu button
document.getElementById("menu-btn").addEventListener("mouseout", function() {
this.style.cursor = "auto";
});

// Add event listener to close popup when user clicks outside of it


window.addEventListener("click", function(event) {
if (event.target == document.getElementById("popup-menu")) {
closePopup();
}
});
</script>
</body>
</html>

You might also like