Décalage de menu en hover
pinky-mango
-
pinky-mango -
pinky-mango -
Bonjour,
je suis entrain de créer un menu simple en html/css.
Au survol du menu, je change le font-weight de la police et ca fais décaler de quelques pixels certain texte.
voilà mon code (le css est directement dans la page)
je suis entrain de créer un menu simple en html/css.
Au survol du menu, je change le font-weight de la police et ca fais décaler de quelques pixels certain texte.
voilà mon code (le css est directement dans la page)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<!---feuille de style-->
<style>
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baselinebaseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
background-color: #09C;
}
nav {
background-color: #fff;
height: 60px;
position: relative;
-webkit-box-shadow: 3px 3px 0 0 rgba(0,0,0,0.2);
box-shadow: 3px 3px 0 0 rgba(0,0,0,0.2);
}
nav ul {
position:absolute;
top:20px;
left:200px;
}
nav li {
display:inline;
}
nav li a {
color: #000;
text-decoration:none;
padding: 16px 20px;
font-family: 'Lato', Arial;
font-weight: 300;
width:200px;
}
nav li a#home:hover {
border-top: 3px solid #43c6c8;
}
nav li a#packages:hover {
border-top: 3px solid #436bc8;
}
nav li a#portfolio:hover {
border-top: 3px solid #92de27;
}
nav li a#ressources:hover {
border-top: 3px solid #ffce0c;
}
nav li a#tutoriels:hover {
border-top: 3px solid #ec583b;
}
nav li a#website:hover {
border-top: 3px solid #e60c91;
}
nav li a:hover {
font-weight: 400;
weight:200px;
}
nav #logo img {
width:90px;
height:auto;
position:absolute;
top:5px;
left:30px;
}
</style>
</head>
<body>
<nav>
<div id="logo"><img src="logo.png" alt="logo"></div>
<ul>
<li><a href="#" id="home">Home</a></li>
<li><a href="#" id="packages">Packages</a></li>
<li><a href="#" id="portfolio">Portfolio</a></li>
<li><a href="#" id="ressources">Ressources</a></li>
<li><a href="#" id="tutoriels">Tutoriels</a></li>
<li><a href="#" id="website">Website</a></li>
</ul>
</nav>
</body>
</html>
A voir également:
- Décalage de menu en hover
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Excel menu déroulant en cascade - Guide
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
2 réponses
Salut
déjà il y a une erreur
nav li a:hover {
font-weight: 400;
weight:200px;
}
tu n'aurais pas voulu dire width ?
ensuite c'est normal que ca se décale car tu augmente le bold sur le hover
tu peux essayer de réduire la distance entre les caractères avec font-stretch (sur le hover) mais c'est pas sur que ca s'affiche pareil dans tous les navigateurs.
sinon tu as cette solution (ici ce qui est changé)
nav ul {
position:absolute;
top:10px;
left:200px;
}
nav li a {
color: #000;
display:inline-block;
text-decoration:none;
padding: 10px 20px;
font-family: 'Lato', Arial;
font-weight: 300;
width:100px;
border-top: 3px solid #fff;
text-align:center;
}
nav li a:hover {
font-weight: 400;
}
voila ce n'est pas exactement pareil mais ca ne se décale plus
déjà il y a une erreur
nav li a:hover {
font-weight: 400;
weight:200px;
}
tu n'aurais pas voulu dire width ?
ensuite c'est normal que ca se décale car tu augmente le bold sur le hover
tu peux essayer de réduire la distance entre les caractères avec font-stretch (sur le hover) mais c'est pas sur que ca s'affiche pareil dans tous les navigateurs.
sinon tu as cette solution (ici ce qui est changé)
nav ul {
position:absolute;
top:10px;
left:200px;
}
nav li a {
color: #000;
display:inline-block;
text-decoration:none;
padding: 10px 20px;
font-family: 'Lato', Arial;
font-weight: 300;
width:100px;
border-top: 3px solid #fff;
text-align:center;
}
nav li a:hover {
font-weight: 400;
}
voila ce n'est pas exactement pareil mais ca ne se décale plus