mars 2013 – devfrontend.info

[HTML] Viewport : utiliser la balise meta Viewport adéquate suivant le type de site (optimisé mobile ou non).

par admin
21/03/201308/04/2013

Viewport pour un site optimisé mobile/smartphone :(Ressource : Using the viewport meta tag to control layout on mobile browsers)

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

1	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Viewport pour un site non-optimisé… Lire la suite »[HTML] Viewport : utiliser la balise meta Viewport adéquate suivant le type de site (optimisé mobile ou non).

[jQuery][CSS] Menu horizontal : gérer l’apparition/disparition, au survol, de séparateurs à gauche et à droite d’un libellé

par admin
20/03/201314/12/2015

Nouvelle version en full-CSS (sans jQuery) à l’aide des pseudo-classes before/after et des sélecteurs adjacents Source : demo JSFiddle.

<ul>
<li><a href="">item </a></li>
<li><a href="">item </a></li>
<li><a href="">item </a></li>
<li><a href="">item </a></li>
</ul>

<ul>

</ul>

ul {
  display: table;
  width: 100%;
}
li{
  display: table-cell;
  position: relative;
}

a{
  display: block;
  text-align: center;
}

a:before{
  content:"";
  width: 1px;
  height: 25px;
  background: #000;
  display: inline-block;
  position: absolute;
  left: 0;
}

a:hover:before{
  width: 0;
}

li:hover + li > a:before{
  width: 0;
}

ul {

display: table;

width: 100%;

}

li{

display: table-cell;

position: relative;

}

display: block;

text-align: center;

}

a:before{

content:"";

width: 1px;

height: 25px;

background: #000;

display: inline-block;

position: absolute;

left: 0;

}

a:hover:before{

width: 0;

}

li:hover + li > a:before{

width: 0;

}

Ancienne version (avec jQuery)… Lire la suite »[jQuery][CSS] Menu horizontal : gérer l’apparition/disparition, au survol, de séparateurs à gauche et à droite d’un libellé