ORGANISATION-KA-INTERNATIONALE/kaubuntu.re
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve social media in header

Browse Source
This commit is contained in:
Cédric Famibelle-Pronzola
2025-04-09 07:26:06 +04:00
parent 0b60f03c57
commit a5c13207c1
2 changed files with 64 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+50
View File
@@ -787,3 +787,53 @@ img {
font-size: 16px;
}
}
/* Styles pour le menu dropdown des réseaux sociaux */
.more-social-container {
position: relative;
}
.more-social-dropdown {
position: absolute;
top: 100%;
right: 0;
width: 180px;
background-color: var(--main-bg);
border-radius: 4px;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
padding: 10px 0;
display: none;
z-index: 100;
}
.more-social-container:hover .more-social-dropdown,
.more-social-toggle:focus + .more-social-dropdown,
.more-social-dropdown:hover {
display: block;
}
.more-social-item {
display: flex;
align-items: center;
padding: 10px 15px;
font-size: 14px;
transition: background-color 0.2s;
}
.more-social-item:hover {
background-color: rgba(0,0,0,0.05);
}
.more-social-item i {
margin-right: 10px;
font-size: 18px;
color: var(--primary-red);
width: 20px;
text-align: center;
}
@media (max-width: 1000px) {
.more-social-dropdown {
right: -15px;
}
}
index.php
+14 -3
View File
@@ -82,11 +82,22 @@
</div>
<div class="social-icons">
<a target="_blank" rel="noreferrer" href="<?php echo FACEBOOK_URL; ?>" class="icon-button"><i class="fab fa-facebook"></i></a>
<a target="_blank" rel="noreferrer" href="<?php echo YOUTUBE_URL; ?>" class="icon-button"><i class="fab fa-youtube"></i></a>
<a target="_blank" rel="noreferrer" href="<?php echo INSTAGRAM_URL; ?>" class="icon-button"><i class="fab fa-instagram"></i></a>
<a target="_blank" rel="noreferrer" href="<?php echo TIKTOK_URL; ?>" class="icon-button"><i class="fab fa-tiktok"></i></a>
<a href="#" class="icon-button"><i class="fas fa-ellipsis-h"></i></a>
<div class="more-social-container">
<a href="#" class="icon-button more-social-toggle"><i class="fas fa-ellipsis-h"></i></a>
<div class="more-social-dropdown">
<a target="_blank" rel="noreferrer" href="<?php echo FACEBOOK_URL; ?>" class="more-social-item">
<i class="fab fa-facebook"></i> Facebook
</a>
<a target="_blank" rel="noreferrer" href="<?php echo YOUTUBE_URL; ?>" class="more-social-item">
<i class="fab fa-youtube"></i> YouTube
</a>
<a target="_blank" rel="noreferrer" href="<?php echo TWITTER_URL; ?>" class="more-social-item">
<i class="fab fa-twitter"></i> Twitter
</a>
</div>
</div>
</div>
<div class="action-icons">