Pour l’inspiration pour les jours qui viennent, je propose aujourd’hui 5 sites au design minimaliste. Ce style de design est (s’il est bien fait) souvent synonyme de « classe ». C’est un hasard mais sur les 5 designs que je propose ici 4 ont un fond entièrement blanc  (comme la plupart de ceux que j’ai visité).

1./ Brilliancy.eu

2./ Bkwld

3./ Design hotel

4./ Jamie Gregory

5./ Lindetibbets

Tutorial pour JQuery vu ce matin sur le blog sohtanaka.com. Le tutorial propose une manière de créer des colonnes « intelligents » avec JQuery & CSS.

Le CSS permet ici de gérer l’affichage des colonnes par défaut, de définir leur taille, les marges entre les colonnes… Et le JQuery permet de répartir les colonnes s’il reste de l’espace sur le côté, de gérer dynamiquement l’affichage (si la taille de la fenêtre est modifiée).

Tout le code nécessaire est donné dans le tutorial. Il peut permettre un bon gain de temps, plus besoin de calculer la taille au pixel entre les colonnes, les marges, les paddings et le conteneur !

Le plugin JQuery Stylish Select permet comme son nom l’indique de styliser les listes déroulantes (balises html <select>).

Le plugin est simple à mettre en place. En outre, il permet de simuler toutes les petites fonctionnalités d’un select classique : gestion des flèches directionnelles, gestion des touches du clavier (si tu appuies sur la lettre « A », le premier élément commençant par cette lettre est sélectionné) ainsi que la gestion des « optgroup ».

Le tout est bien entendu customisable en CSS, la structure du code générée est facilement compréhensible, on ne se retrouve pas avec 50 <div> imbriqués.

Parmi le nombre de galeries de webdesign disponible sur internet, CSSelite est celle qui me plaît le plus. Surtout grâce à la qualité des sites qu’on retrouve dans le « showcase ». Le design minimaliste et sobre met bien en valeur les sites présentés.

Comme sur JQuery Style, tu peux retrouver arnaud-k.fr (le site) sur CSSelite (le site est présent ici) ! Je suis assez fier d’être sur cette galerie de webdesign, surtout parce que je suis un développeur à la base (les fameux designs de développeur…)

Pour le deuxième top 10 de la semaine, une belle sélection de sites web ayant des designs bien faits et parfois étonnants !

http://www.weberica.net/

Site de web design Croate (utilisant JQuery)

Pour continuer avec les tuto sur les plugins JQuery, j’ai choisi de présenter aujourd’hui Droppy. Droppy (dont le nom provient d’un jeu de mot avec « drop-down menu », menu déroulant en english) permet de faire très facilement un menu déroulant multi-niveau avec des effets d’apparition et de disparition très simples.

Pour celui pas vraiment de connaissances sont nécessaires. Il faut juste que le fichier html soit bien structuré pour éviter les bugs d’affichage.

Voir une démo du plugin JQuery.droppy

Comme à chaque fois, il faut commencer par charger le framwork JQuery suivi du plugin et du fichier contenant les styles css nécessaires au plugin (bien penser à mettre la bonne adresse pour le chargement des fichiers…)

1
2
3

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.droppy.js"></script>
<link rel="stylesheet" media="screen" type="text/css" href="js/droppy.css" />

Il faut ensuite initialiser le plugin (à insérer dans votre fichier JavaScript perso ou dans la page html entre les balises <script>). « nav » correspond à l’id de la liste non ordonnée (<ul>) contenant le menu :

1
2
3

$(document).ready( function () {
    		$('#nav').droppy();
});

C’est maintenant dans le code html qu’il faut être attentif. Tout est basé sur les listes non ordonnées (<ul> et <li>). Le menu est contenu dans un premier ul qui a pour id « nav ». Chaque élément du menu est un lien contenu dans des li. Pour créer un sous-menu, il suffit d’encapsuler un autre ul (sans id) dans l’élément de liste (li). Un exemple devrait être plus clair :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<ul id="nav">
		<li> <!-- premier élément du menu, n'a pas de sous-menu -->
			<a href="#">Menu 1</a>
		</li>
 
		<li> <!-- deuxième élément du menu, avec un sous-menu -->
			<a href="#">Menu 2</a> <!-- lien du menu -->
			<ul> <!-- début du sous-menu -->
				<li> <!-- premier élément du sous-menu -->
					<a href="#">Sous-menu 2.1</a>
				</li>
 
				<li> <!-- deuxième élément du sous-menu -->
					<a href="#">Sous-menu 2.2</a>
				</li>
 
				<li> <!-- troisième élément du sous-menu, avec un sous-sous-menu -->
					<a href="#">Sous-menu 2.3</a>
                                        <ul> <!-- début du sous-sous-menu -->
						<li><a href="#">Sous-sous-menu 2.3.1</a></li>
						<li><a href="#">Sous-sous-menu 2.3.2</a></li>
						<li><a href="#">Sous-sous-menu 2.3.3</a></li>
					</ul> <!-- fin du sous-sous-menu -->
				</li>
			</ul> <!-- fin du sous-menu -->
		</li>
</ul>

Toutes les couleurs sont changeables dans le fichier CSS fourni en téléchargeant le plugin.

Je tiens à préciser que pour des raisons d’accessibilité, il est très souvent déconseillé de mettre plusieurs niveaux dans un menu déroulant, il vaut mieux ne mettre qu’un seul niveau de sous-menu.

Toujours dans mes recherches de plugins pour JQuery (pour un projet perso cette fois-ci), je suis tombé sur ce bon plugin : Scrollable.

Plugin assez aisé à mettre en place, mais il faut avoir quelques connaissances en CSS pour optimiser au mieux l’utilisation du plugin.

plugin JQuery Scrollable

Comme pour tous les plugins JQuery, il faut d’abord charger le framework JQuery avec de charger les fichiers du plugins :

1
2
3

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>	
<script type="text/javascript" src="http://static.flowplayer.org/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="http://static.flowplayer.org/js/jquery.scrollable-1.0.2.min.js"></script>

jquery.mousewheel.js permet d’ajouter le contrôle du défilement horizontal grâce à la molette de la souris oou à l’aide des flèches gauche et droite du clavier.

Ensuite, il faut initialiser le plugin (à insérer dans votre fichier JavaScript perso ou dans la page html entre les balises et , ajouter avant le code ) :

1
2
3
4
5
6
7
8
9
10

$(document).ready( function () {
		// initialisation du plugin de defilement
		$("div.scrollable").scrollable({
			size: 3,
			items: '#thumbs',  
			hoverClass: 'hover',
			next: 'div.next', 
			prev: 'div.prev' 
		});	
});

Dans mon exemple, j’initialise le plugin avec quelques paramètres personnalisés : size définit le nombre d’éléments à afficher simultanément, hoverClass permet d’ajouter une classe (qui sera définie dans la feuille de style de la page) au survol de l’élément, next et prev correspondent aux liens de navigation pour faire avance ou reculer le défilement.

Après, il faut prévoir l’affichage du contenu (html) qui va être défilé (le nombre d’éléments total sera aussi défini ici) :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<!-- conteneur -->
<div class="scrollable">
 
	<div id="thumbs">
 
			<!-- chaque element est contenu dans un bloc de type div -->
			<div>
				<img src="photosExemples/mini/3.jpg" alt="image 1" />
 
				<h3><em>1. </em>An example title</h3>
 
 
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget 
					tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
				</p>				
			</div>
 
		        <!-- deuxieme element -->
			<div>
				<img src="photosExemples/mini/4.jpg" alt="image 2" />
 
				<h3><em>2. </em>An example title</h3>
 
				<p>
 
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget 
					tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
				</p>
			</div>
                        [...]
           </div>
</div>

Enfin on peut appliquer des styles css aux éléments :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

/* element parent */
div.scrollable {  
	position:relative;
	overflow:hidden;
	width: 646px;	 
	height:300px;
	float:left;
}
 
/* 
	element parent pour les element a defiler, il faut absolument un grande largeur
*/
#thumbs {	
	position:absolute;
	width:20000em;	
	clear:both;
	border:1px solid #222;
}
 
/* un element seul */
#thumbs div {
	float:left;
	width:214px;
	height:300px;
	background:#333 url(photosExemples/fond.png) repeat-x 0;
	color:#fff;
	border-left:1px solid #333;
	cursor:pointer;
}
 
/* style au survol */
#thumbs div.hover {
	background-color:#444;	
}
 
/* style au survol */
#thumbs div.hover h3 {
	background:#797979 url(photosExemples/fond-h3-hover.png) no-repeat;
}
 
/* style quand un element est cliqué */
#thumbs div.active {
	background-color:#066;
	cursor:default;
}
 
/* styles à personnaliser selon votre contenu */
#thumbs h3, #thumbs p, #thumbs span {
	margin:13px;		
	font-family:"bitstream vera sans";
	font-size:13px;
	color:#fff;
}
 
#thumbs h3 {
	background:#353535 url(photosExemples/fond-h3.png) no-repeat;
	width:100%;
	padding:8px;
	padding-left:35px;
	margin-left:0px;
	margin-top:0px;
}
 
#thumbs h3 em {
	font-style:normal;
	color:#ffa800;
}
 
div.prev {
	color:#ffa800;
	font-size:1.6em;
	font-weight:bold;
	cursor:pointer;
	margin-top:150px;
	float:left;
}
div.next {
	color:#ffa800;
	font-size:1.6em;
	font-weight:bold;
	cursor:pointer;
	margin-top:150px;
	float:left;
}

N’hésite pas à m’envoyer un lien (ou à le mettre dans les commentaires) si tu utilises le plugin grâce à mon (petit) tuto, je n’hésiterai pas à le publier ici !