mars 2013 – devfrontend.info

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é mobile/smartphone :
(Ressource : Viewport meta tag for non-responsive design)

<meta name="viewport" content="width=1024">

1	<meta name="viewport" content="width=1024">

Utiliser le second Viewport si l’affichage de votre site se comporte de manière bizarre sur mobile (votre site n’a pas été prévu pour s’afficher sur mobile, la page est zoomée au chargement).

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)

Simulation : http://jsfiddle.net/frontenddeveloper/Db6AD/7/

jQuery(document).ready(function(){
	// Menu horizontal : gérer l'apparition/disparition du séparateur au survol de la souris
	// Remplacer '#principal-nav' par l'id ou la classe qui définit le menu
	jQuery('#principal-nav .level1 > li').hover(
		function(){
			jQuery(this).next('li').addClass('no-separator');
		},
		function(){
			jQuery('#principal-nav .level1 li').removeClass('no-separator');
		}
	);
	// Cas du current
	jQuery('#principal-nav .level1 .current, #principal-nav .level1 .inpath').closest('li').next('li').addClass('current-no-separator');
});

jQuery(document).ready(function(){

// Menu horizontal : gérer l'apparition/disparition du séparateur au survol de la souris

// Remplacer '#principal-nav' par l'id ou la classe qui définit le menu

jQuery('#principal-nav .level1 > li').hover(

function(){

jQuery(this).next('li').addClass('no-separator');

function(){

jQuery('#principal-nav .level1 li').removeClass('no-separator');

}

);

// Cas du current

jQuery('#principal-nav .level1 .current, #principal-nav .level1 .inpath').closest('li').next('li').addClass('current-no-separator');

});

Articles récents

Catégories

Archives

Méta

Mois : mars 2013

[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é

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

Ancienne version (avec jQuery)