Bonjour, bonsoir !
Alors voilà, j'ai un petit soucis sur mon site...
Dans mon <header>, j'ai une barre de navigation. Et je souhaite faire un petit menu déroulant sur l'un des onglets, pour pouvoir proposer divers choix (je sais c'est logique)
Le seul soucis, c'est qu'avec le style que j'ai mis en place, quand je fais apparaître le menu additionnel, bah c'est moche ! x)
Je vous donne le code pour pouvoir voir à quoi ça ressemble (je l'ai mis dans un spoiler et dans des onglets pour que ce soit plus lisible):
ABBC3_SPOILER_SHOW
[tabs][tabs: HTML]
<html>
<body>
<header>
<nav id="headNav">
<ul class="headUl">
<li class="headLi active"><a href="<?php echo site_url('accueil/accueil'); ?>" class="headA" style="border-left: none;"><span class="glyphicon glyphicon-home"></span> Accueil </a></li>
<li class="headLi"><a href="<?php echo site_url('accueil/portefeuille'); ?>" class="headA"><span class="glyphicon glyphicon-list-alt"></span> Portefeuilles </a></li>
<li class="headLi"><a href="<?php echo site_url('accueil/stages'); ?>" class="headA"><span class="glyphicon glyphicon-briefcase"></span> Stages</a></li>
<li class="headLi"><a href="<?php echo site_url('accueil/veilles'); ?>" class="headA"><span class="glyphicon glyphicon-eye-open"></span> Veilles technologique</a></li>
<li class="headLi"><a href="<?php echo site_url('accueil/memento'); ?>" class="headA" style="border-right: 2px solid white;"><span class="glyphicon glyphicon-folder-open"></span> Memento </a>
<ul class="memento headUl">
<li class="headLi"><a class="headA" style="border-left: 2px solid white;">Accueil</a></li>
<li class="headLi"><a class="headA">HTML / CSS</a></li>
<li class="headLi"><a class="headA">PHP</a></li>
<li class="headLi"><a class="headA" style="border-right: 2px solid white;">Java</a></li>
</ul>
</li>
<ul class="headUl" style="float:right;">
<li class="headLi"><a href="<?php echo site_url('accueil/contact'); ?>" class="headA" style="border-left: 2px solid white;"><span class="glyphicon glyphicon-envelope"></span> Me contacter </a></li>
<li class="headLi"><a href="" class="headA" style="border-right: none;"><span class="glyphicon glyphicon-arrow-up"></span> Haut de page </a></li>
</ul>
</ul>
</nav>
</header>
</body>
</html>
[tabs: CSS]
.memento {
display: none;
margin: 0; padding: 0;
border-top: 2px solid white;
}
li {
list-style-type: none;
position: relative;
}
li:hover ul.memento {
display: block;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * */
header {
position: fixed;
}
#headNav {
position: fixed;
top: 0;
right: 0;
left: 0;
}
.headUl {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000000;
}
.headLi {
float: left;
}
.headA {
display: block;
color: #FFFFFF;
text-align: center;
font-size: 18px;
padding: 15px 15px;
text-decoration: none;
transition: all .3s .1s;
border-right: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
}
.headA:hover {
background-color: #4CAF50;
padding: 15px 50px;
transition: all .3s 0s;
}
.headLi.active {
background-color: #4CAF50;
}[/tabs]
Dans la partie CSS, ce qu'il y a en dessus de la ligne de commentaires, c'est mon code permettant de gérer le sous-menu. Ce qu'il y a en dessous, c'est ce qui gère plus l'apparence.
Donc si vous testez, vous allez remarquer qu'en survolant "Memento", on a bien le sous menu qui apparait, mais du coup la barre s'élargit.
Je souhaiterais que le fond de mon sous-menu reste noir, mais qu'à gauche et à droite, ce soit transparant, ou en tout cas, qu'on le perçoit que le fond de mon site (qui à la base est une image)
Si vous souhaitez voir mon site, je vous donne le lien :
http://sio.lyc-lecastel.fr/~anthony.lau ... tefeuille/
Cependant, la partie où mon problème se pose ne se trouve pas sur ce site actuellement, car c'est en gros le serveur de prod, et mon PC est le serveur de test ^^
D'avance merci, posez toutes les questions que vous souhaitez
Je serais réactif (un jour maximum entre votre réponse et la mienne)
Bonjour, bonsoir !
Alors voilà, j'ai un petit soucis sur mon site...
Dans mon <header>, j'ai une barre de navigation. Et je souhaite faire un petit menu déroulant sur l'un des onglets, pour pouvoir proposer divers choix (je sais c'est logique)
Le seul soucis, c'est qu'avec le style que j'ai mis en place, quand je fais apparaître le menu additionnel, bah c'est moche ! x)
Je vous donne le code pour pouvoir voir à quoi ça ressemble (je l'ai mis dans un spoiler et dans des onglets pour que ce soit plus lisible):
[spoil][tabs][tabs: HTML]
<html>
<body>
<header>
<nav id="headNav">
<ul class="headUl">
<li class="headLi active"><a href="<?php echo site_url('accueil/accueil'); ?>" class="headA" style="border-left: none;"><span class="glyphicon glyphicon-home"></span> Accueil </a></li>
<li class="headLi"><a href="<?php echo site_url('accueil/portefeuille'); ?>" class="headA"><span class="glyphicon glyphicon-list-alt"></span> Portefeuilles </a></li>
<li class="headLi"><a href="<?php echo site_url('accueil/stages'); ?>" class="headA"><span class="glyphicon glyphicon-briefcase"></span> Stages</a></li>
<li class="headLi"><a href="<?php echo site_url('accueil/veilles'); ?>" class="headA"><span class="glyphicon glyphicon-eye-open"></span> Veilles technologique</a></li>
<li class="headLi"><a href="<?php echo site_url('accueil/memento'); ?>" class="headA" style="border-right: 2px solid white;"><span class="glyphicon glyphicon-folder-open"></span> Memento </a>
<ul class="memento headUl">
<li class="headLi"><a class="headA" style="border-left: 2px solid white;">Accueil</a></li>
<li class="headLi"><a class="headA">HTML / CSS</a></li>
<li class="headLi"><a class="headA">PHP</a></li>
<li class="headLi"><a class="headA" style="border-right: 2px solid white;">Java</a></li>
</ul>
</li>
<ul class="headUl" style="float:right;">
<li class="headLi"><a href="<?php echo site_url('accueil/contact'); ?>" class="headA" style="border-left: 2px solid white;"><span class="glyphicon glyphicon-envelope"></span> Me contacter </a></li>
<li class="headLi"><a href="" class="headA" style="border-right: none;"><span class="glyphicon glyphicon-arrow-up"></span> Haut de page </a></li>
</ul>
</ul>
</nav>
</header>
</body>
</html>
[tabs: CSS]
.memento {
display: none;
margin: 0; padding: 0;
border-top: 2px solid white;
}
li {
list-style-type: none;
position: relative;
}
li:hover ul.memento {
display: block;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * */
header {
position: fixed;
}
#headNav {
position: fixed;
top: 0;
right: 0;
left: 0;
}
.headUl {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000000;
}
.headLi {
float: left;
}
.headA {
display: block;
color: #FFFFFF;
text-align: center;
font-size: 18px;
padding: 15px 15px;
text-decoration: none;
transition: all .3s .1s;
border-right: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
}
.headA:hover {
background-color: #4CAF50;
padding: 15px 50px;
transition: all .3s 0s;
}
.headLi.active {
background-color: #4CAF50;
}[/tabs][/spoil]
Dans la partie CSS, ce qu'il y a en dessus de la ligne de commentaires, c'est mon code permettant de gérer le sous-menu. Ce qu'il y a en dessous, c'est ce qui gère plus l'apparence.
Donc si vous testez, vous allez remarquer qu'en survolant "Memento", on a bien le sous menu qui apparait, mais du coup la barre s'élargit.
Je souhaiterais que le fond de mon sous-menu reste noir, mais qu'à gauche et à droite, ce soit transparant, ou en tout cas, qu'on le perçoit que le fond de mon site (qui à la base est une image)
Si vous souhaitez voir mon site, je vous donne le lien : http://sio.lyc-lecastel.fr/~anthony.laurent/Portefeuille/
Cependant, la partie où mon problème se pose ne se trouve pas sur ce site actuellement, car c'est en gros le serveur de prod, et mon PC est le serveur de test ^^
D'avance merci, posez toutes les questions que vous souhaitez
Je serais réactif (un jour maximum entre votre réponse et la mienne)
FLTL_BYreeves42