Créer un forumSouci Switcheroo Hover
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Souci Switcheroo Hover
par Rnd. Sam 20 Jan 2024 - 3:54
Détails techniques
Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
- Voir l'image:
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 20/01/2024
Lien du forum : (lien masqué, vous devez poster pour le voir)
Description du problème
Bonjour, BonsoirD'avance, un grand merci à la personne qui saura m'aider avec ce petit problème (trois fois rien)
Afin de créer toujours plus d'espace sur le forum, j'ai voulu cette fois-ci créer un hover sur le switcheroo.
De ce fait je voudrais que les comptes soient "rangés".
Actuellement la barre qui se trouve en background est rangé, tout est parfait à ce niveau là
Preuve en image : https://www.zupimages.net/up/24/03/fui1.png <- rangé
https://www.zupimages.net/up/24/03/4prx.png <- je passe la souris elle s'ouvre
SAUF QUE,
Vous l'avez sans doute constaté dans la première image, les comptes ainsi que le bouton pour ajouter un nouveau compte, eux se sont dit "Ben non on bougera pas de notre place initial, pourquoi on est bien là." Donc j'ai le background de la barre qui veut bien se ranger mais pas les comptes...
J'ai beaucoup de mal avec les codes qui ne sont pas les miens et surtout celui-ci...
Du coup pour l'instant ma tête me dit "Tu as tout essayé" mais peut être que non, donc je fais appel à votre sagesse (patience surtout)
Je laisse le CSS ci dessous, n'hésitez pas à me dire si vous avez besoin du template.
- Spoiler:
- Code:
/* --- ASSOCIER LE COMPTE --- */
.switcheroo {
color: var(--noir);
background-color: var(--colbodyline);
font-size: 16px;
border-right: 1px solid var(--blanc);
width:10px;
transition: width 0.5s; /* Animation de transition */
}
.switcheroo:hover{ width: 50px; /* Nouvelle largeur lors du survol */}
.switcheroo[position="static"] {
position: relative;
}
.switcheroo[position="top"] {
left: 0;
position: fixed;
top: 30px;
z-index: 100;
}
.switcheroo[position="bottom"] {
position: fixed;
bottom: 0;
left: 0;
z-index: 100;
}
.switcheroo[direction="horizontal"] {
width: 100%;
}
.switcheroo[direction="vertical"] {
height: 100%;
}
.switcheroo__squircles {
display: flex;
margin: 0;
padding: 0;
margin-top: 90px;
list-style: none;
padding: 16px;
gap: 16px;
}
.switcheroo[direction="horizontal"] .switcheroo__squircles {
flex-direction: row;
}
.switcheroo[direction="vertical"] .switcheroo__squircles {
flex-direction: column;
position: fixed;
margin-left: 10px;
}
/* squircle */
.switcheroo[theme="discord"] .switcheroo__squircle {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background-color:var(--colbackgris);
}
.switcheroo[theme="discord"] .switcheroo__squircle {
align-items: center;
background-color:var(--colbackgris);
border-radius: 50%;
cursor: pointer;
display: flex;
height: 40px;
justify-content: center;
left: 10%;
position: relative;
transition: border-radius 128ms var(--bleugris);
width: 40px;
left: -55%;
}
.switcheroo[theme="discord"] .switcheroo__squircle:hover {
border-radius: 36%;
}
.switcheroo[theme="discord"][direction="vertical"] .switcheroo__squircle:before {
content: "";
width: 100%;
height: 100%;
display: block;
background-color: var(--blanc);
position: absolute;
border-radius: 4px;
top: 50%;
transform: translate(-100%, -50%) scale(0);
transition: transform 128ms, opacity 64ms;
pointer-events: none;
opacity: 0;
}
.switcheroo[theme="discord"][direction="horizontal"] .switcheroo__squircle:before {
content: "";
width: 100%;
height: 100%;
display: block;
background-color: var(--blanc);
position: absolute;
border-radius: 4px;
left: 50%;
transform: translate(-50%, -100%) scale(0);
transition: transform 128ms, opacity 64ms;
pointer-events: none;
opacity: 0;
}
.switcheroo[theme="discord"] .switcheroo__squircle.active {
border-radius: 36%;
cursor: default;
}
.switcheroo[theme="discord"][direction="vertical"] .switcheroo__squircle:hover:before {
opacity: 1;
transform: translate(-100%, -50%) scale(0.5);
}
.switcheroo[theme="discord"][direction="horizontal"] .switcheroo__squircle:hover:before {
opacity: 1;
transform: translate(-50%, -100%) scale(0.5);
}
.switcheroo[theme="discord"][direction="vertical"] .switcheroo__squircle.active:before {
opacity: 1;
transform: translate(-85%, -50%) scale(0.2);
border-radius: 50%;
}
.switcheroo[theme="discord"][direction="horizontal"] .switcheroo__squircle.active:before {
opacity: 1;
transform: translate(-50%, -85%) scale(0.2);
border-radius: 50%;
}
/* tooltip */
.switcheroo__popper {
display: none;
}
.switcheroo[direction="vertical"] .switcheroo__squircle:hover .switcheroo__popper {
opacity: 1;
transform: translateY(-50%) scale(1);
}
.switcheroo[direction="horizontal"] .switcheroo__squircle:hover .switcheroo__popper {
opacity: 1;
transform: translateX(-50%) scale(1);
}
.switcheroo__squircle:hover:before {
opacity: 1;
transform: translate(-100%, -50%) scale(0.5);
}
/* avatar */
.switcheroo[theme="discord"] .switcheroo__avatar {
position: relative;
width: 100%;
height: 100%;
border-radius: inherit;
overflow: hidden;
}
.switcheroo[theme="discord"] .switcheroo__avatar img {
width: 100%;
position: absolute;
top: 66%;
left: 50%;
transform: translate(-50%, -50%);
}
/* divider */
.switcheroo[theme="discord"][direction="vertical"] .switcheroo__divider {
width: 100%;
height: 2px;
background-color: var(--blanc);
border-radius: 1px;
opacity: 0.06;
transform: scale(0.8);
}
.switcheroo[theme="discord"][direction="horizontal"] .switcheroo__divider {
width: 2px;
background-color: var(--blanc);
border-radius: 1px;
opacity: 0.06;
transform: scale(0.8);
}
/* delete button */
.switcheroo[theme="discord"] .switcheroo__delete {
display: flex;
justify-content: center;
position: absolute;
width: 16px;
line-height: 14px;
height: 16px;
top: -2px;
right: -2px;
border-radius: 50%;
background-color: var(--bl);
transform: scale(0);
opacity: 1;
transition: transform 128ms var(--bl), opacity 64ms var(--bl);
cursor: pointer;
font-size: 13px;
}
.switcheroo[theme="discord"] .switcheroo__squircle:hover .switcheroo__delete {
opacity: 1;
transform: scale(1);
}
/* logo */
.switcheroo[theme="discord"] .switcheroo__logo {
}
.switcheroo[theme="discord"] .switcheroo__logo img {
width: 32px;
}
.switcheroo[theme="discord"] .switcheroo__logo:hover {
background-color: var(--bleu);
}
/* buttons */
.switcheroo[theme="discord"] .switcheroo__squircle--button {
transition: border-radius 128ms var(--bl);
color: var(--noir);
}
.switcheroo[theme="discord"] .switcheroo__squircle--button:hover {
color: var(--blanc);
background-color: var(--bleugris);
}
/* modal */
.switcheroo__form {
padding: 48px;
}
.switcheroo__form-row {
display: flex;
flex-flow: column;
align-items: flex-start;
margin-bottom: 16px;
}
.switcheroo__form-label {
margin-bottom: 8px;
font-size: 14px;
text-transform: uppercase;
color: var(--blanc) !important;
}
.switcheroo__form-input {
padding: 6px !important;
font-size: 16px !important;
border-radius: 4px !important;
width: 100% !important;
border-image: var(--contbox1)5!important;
outline: 1px solid var(--blanc);
background-color: var(--colbodyline)!important;
border: 5px solid;
color: var(--noir) !important;
cursor: text !important;
}
.switcheroo__form-button {
border-radius: 8px;
padding: 8px;
border: none;
outline: none;
box-shadow: none;
text-transform: uppercase;
font-size: 14px;
align-self: flex-end;
color: var(--blanc);
background: var(--linearv1);
}
.monomer-overlay {
position: fixed;
z-index: 999;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
transition: 0.2s opacity ease;
background: rgba(0, 0, 0, 0.6);
}
.monomer-modal {
position: fixed;
z-index: 999;
top: 50%;
left: 50%;
opacity: 0;
width: 94%;
padding: 24px 20px;
transition: 0.2s opacity ease;
transform: translate(-50%, -50%);
border-radius: 2px;
background: var(--backbleu2);
color: var(--blanc);
}
.monomer-modal.monomer-open.monomer-anchored {
top: 20px;
transform: translate(-50%, 0);
}
.monomer-modal.monomer-open {
opacity: 1;
}
.monomer-overlay.monomer-open {
opacity: 1;
}
.monomer-close {
font-family: Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 24px;
text-align: center;
width: 24px;
height: 24px;
position: absolute;
top: -5px;
right: -5px;
padding: 5px;
cursor: pointer;
color: #fff;
border: 0;
outline: none;
background: var(--bleugris);
border-radius: 50%;
padding: 0;
}
.monomer-close:hover {
opacity: 0.8;
}
Merci d'avance, et PS :: faut poster pour voir le forum car c'est sur le forum test
Rnd.- Nouveau membre
-
Messages : 22
Inscrit(e) le : 07/09/2022 -
Re: Souci Switcheroo Hover
par Rnd. Dim 21 Jan 2024 - 13:34
Bonjour bonjour !
Je me permets un petit UP
Je me permets un petit UP
Rnd.- Nouveau membre
-
Messages : 22
Inscrit(e) le : 07/09/2022 -
Re: Souci Switcheroo Hover
par Toryudo Lun 22 Jan 2024 - 13:43
Bonjour !
Alors, plusieurs possibilités, je vais proposer celle qui m'est venue en tête en premier. Plutôt que de modifier le width de la barre (de 10px à 50px), il faudrait plutôt imaginer "ranger la barre vers la gauche", donc modifier le margin-left (de -40px à 0).
On garde une barre de 50px de width, mais on lui ajoute un margin-left de -40px : ainsi, il n'y a que 10px de visible, comme actuellement. Ensuite, quand on :hover la barre, alors on change le margin-left à 0px pour que la barre se décale vers la droite. Ne reste plus qu'à modifier la transition pour qu'elle ne soit plus sur le width mais sur le margin-left.
Voilà le code final des deux éléments corrigés en ce sens :
Alors, plusieurs possibilités, je vais proposer celle qui m'est venue en tête en premier. Plutôt que de modifier le width de la barre (de 10px à 50px), il faudrait plutôt imaginer "ranger la barre vers la gauche", donc modifier le margin-left (de -40px à 0).
On garde une barre de 50px de width, mais on lui ajoute un margin-left de -40px : ainsi, il n'y a que 10px de visible, comme actuellement. Ensuite, quand on :hover la barre, alors on change le margin-left à 0px pour que la barre se décale vers la droite. Ne reste plus qu'à modifier la transition pour qu'elle ne soit plus sur le width mais sur le margin-left.
Voilà le code final des deux éléments corrigés en ce sens :
- Code:
.switcheroo {
color: var(--noir);
background-color: var(--colbodyline);
font-size: 16px;
border-right: 1px solid var(--blanc);
width:50px;
margin-left: -40px;
transition: margin-left 0.5s; /* Animation de transition */
}
.switcheroo:hover{ margin-left: 0; }
Toryudo- Aidactif
-
Messages : 1384
Inscrit(e) le : 31/03/2020 -
Re: Souci Switcheroo Hover
par Rnd. Mar 23 Jan 2024 - 10:50
Bonjour !
Hé bien merci infiniment vous êtes mon sauveur
Je n'aurais jamais pensé faire comme cela mais ça marche du feu du tonnerre !
Merci encore !
Hé bien merci infiniment vous êtes mon sauveur
Je n'aurais jamais pensé faire comme cela mais ça marche du feu du tonnerre !
Merci encore !
Rnd.- Nouveau membre
-
Messages : 22
Inscrit(e) le : 07/09/2022 -
Sujets similaires» Mettre de l'overflow dans le switcheroo
» Problème de javascript avec le switcheroo
» Switcheroo dans la barre de navigation
» Switcheroo et avatar du dernier inscrit en conflit ?
» hover du texte qui bug
» Problème de javascript avec le switcheroo
» Switcheroo dans la barre de navigation
» Switcheroo et avatar du dernier inscrit en conflit ?
» hover du texte qui bug
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum