Les news les plus vitaminées du web
Article tagué menu
Créez un petit menu de réseaux sociaux scrollable
23/04/10
Bonjour à tous !
A la demande de certains d’entre vous, je vous ai préparé un petit tutoriel qui devrait vous permettre de créer un petit menu de réseaux sociaux scrollable à l’image de celui que l’on peut aujourd’hui trouver sur Mashable.
Ce petit menu qui descend automatiquement que vos déplacement sur la page est en réalité un petit script jQuery relativement simple.
Etape 1 : Ajouter jQuery à votre site
Tout d’abord vous devez ajouter le script jQuery sur votre site, pour cela il vous suffit d’aller télécharger la dernière version ici.
Etape 2 : Créez une Div et Ajoutez un peu de CSS
Afin de créer votre petit menu, il vous faudra créer une Div à laquelle vous attribuerez une class :
<div class="dd_ajax_float"></div>
Ensuite vous allez créer le design de votre menu comme l’exemple ci-dessous :
.dd_ajax_float{
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #DDDDDD;
float:left;
margin-left:-30px;
margin-right:10px;
position:relative;
}
Etape 3 : Ajoutez le script
Nous arrivons à l’étape finale ! Il ne vous reste qu’à ajouter le script suivant à votre code :
$(document).ready(function() {
//put content div class, when scroll beyond this y, float it
var $postShare = $('.dd_ajax_float');
if($('.dd_content_wrap').length > 0){
var descripY = parseInt($('.dd_content_wrap').offset().top) - 20;
var pullX = $postShare.css('margin-left');
$(window).scroll(function () {
var scrollY = $(window).scrollTop();
var fixedShare = $postShare.css('position') == 'fixed';
//make sure .post_share exists
if($('.dd_ajax_float').length > 0){
if ( scrollY > descripY && !fixedShare ) {
$postShare.stop().css({
position: 'fixed',
left: '50%',
top: 20,
marginLeft: -310
});
} else if ( scrollY < descripY && fixedShare ) {
$postShare.css({
position: 'relative',
left: 0,
top: 0,
marginLeft: pullX
});
}
}
});
}
});
Et voilà c’est terminé ! Bien évidement vous êtes libre de déposer ce code là où vous le souhaitez !
Pour ceux qui ne voudraient pas se prendre trop la tête avec le code, il existe une autre solution pour intégrer ce menu à votre blog WordPress. En effet il existe un plugin appelé « Digg Digg » qui prend en charge cette fonctionnalité !
A vous de voir ce qui vous tente le plus !
Have Fun !
Créez un superbe menu multi-niveaux en CSS3
4/03/10
Bonjour à tous !
L’utilisation du CSS3 devient de plus en plus courante sur le net, et même si certains navigateurs comme IE ne le supporte pas encore, bien des sites propose déjà quelques designs basés sur cette nouvelle version de ce langage.
Aujourd’hui je vous ai donc trouvé un petit tutorial qui va vous permettre de créer une superbe barre de menu à plusieurs niveaux et le tout en CSS3 !
Comme vous pouvez le constater dans l’image de cet article, le rendu est plutôt classe, voir même très professionnel ! (Même s’il est vrai que ce menu n’est pas sans rappeler le design Apple…)
Vous pourrez bien évidement le personnaliser afin qu’il s’intègre au mieux à votre design !
Je vous invite donc à le découvrir sans plus attendre !
Have Fun !
Site : http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/
Créez un effet de survol dynamique avec jQuery
16/02/10
On trouve une multitude d’effets Javascript sur le net. Mais bien souvent, ils s’avèrent trop voyant pour être intégré sur un site professionnel.
Aujourd’hui, je veux justement vous présenter un petit effet de survol, qui pourra facilement convenir à un site pro afin de lui donner un peu de vie.
Ce script appelé MagicLine Navigation, permettra de rajouter une zone de couleur qui va suivre les mouvements de votre souris lorsque vous survolerez le menu.
Cet effet simple rendra votre site légèrement animé sans trop en faire.
En résumé, un effet idéal pour un site professionnel qui veut sortir un peu du lot.
Maintenant c’est à vous de jouer !
Have Fun !
Site : http://css-tricks.com/jquery-magicline-navigation/
Demo : http://css-tricks.com/examples/MagicLine/
