[Webdesign] SlickMap Css, créez de jolies sitemaps navigables facilement

Tags: CSS, HTML, Web, Webdesign
Posté dans Billets, Logiciels & Webwares, Webworker par Lionel Roux le 2 nov 2009

Que ce soit en phase de création de sites ou à des fins de présentations, il est toujours intéressant d’avoir une représentation de l’organisation de son site web.

Bien sûr il est possible de présenter cela en utilisant des listes non ordonnées mais le résultat n’est pas toujours visuel.

SlickMap CSS est une feuille de style prête à l’emploi qui permet de créer des sitemaps navigables et visuellement intéressantes.

[Voir la démo navigable]

Pour obtenir ce résultat, il suffit de partir de ce que l’on aurait fait avec des listes HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="author" content="Matt Everson of Astuteo, LLC â€“ http://astuteo.com/slickmap" />
	<title>SlickMap CSS</title>
	<link rel="stylesheet" type="text/css" media="screen, print" href="slickmap.css" />
</head>

<body>
	<div class="sitemap">
		<h1>Project Title</h1>
		<h2>Preliminary Site Map &mdash; Version 1.0</h2>

		<ul id="utilityNav">
			<li><a href="/register">Register</a></li>
			<li><a href="/login">Log In</a></li>
			<li><a href="/sitemap">Site Map</a></li>
		</ul>

		<ul id="primaryNav" class="col4">
			<li id="home"><a href="http://sitetitle.com">Home</a></li>
			<li><a href="/about">About Us</a>
				<ul>
					<li><a href="/history">Our History</a></li>
					<li><a href="/mission">Mission Statement</a></li>
					<li><a href="/principals">Principals</a></li>
				</ul>
			</li>
			<li><a href="/services">Services</a>
				<ul>
					<li><a href="/services/design">Graphic Design</a></li>
					<li><a href="/services/development">Web Development</a></li>
					<li><a href="/services/marketing">Internet Marketing</a>
						<ul>
							<li><a href="/social-media">Social Media</a></li>
							<li><a href="/optimization">Search Optimization</a></li>
							<li><a href="/adwords">Google AdWords</a></li>
						</ul>
					</li>
					<li><a href="/services/copywriting">Copywriting</a></li>
					<li><a href="/services/photography">Photography</a></li>
				</ul>
			</li>
			<li><a href="/projects">Projects</a>
				<ul>
					<li><a href="/projects/finance">Finance</a></li>
					<li><a href="/projects/medical">Medical</a></li>
					<li><a href="/projects/education">Education</a></li>
					<li><a href="/projects/professional">Professional</a></li>
					<li><a href="/projects/industrial">Industrial</a></li>
					<li><a href="/projects/commercial">Commercial</a></li>
					<li><a href="/projects/energy">Energy</a></li>
				</ul>
			</li>
			<li><a href="/contact">Contact</a>
				<ul>
					<li><a href="/contact/offices">Offices</a>
						<ul>
							<li><a href="contact/map">Map</a></li>
							<li><a href="contact/form">Contact Form</a></li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</body>
</html>

SlickMap permet de représenter jusqu’à 3 niveaux de navigation, et des liens additionnels comme « Register » ou « Log In » dans l’exemple précédent.

Comme il s’agit de CSS, le tout peut facilement être personnalisé, pour s’accorder par exemple aux couleurs de votre site.

Autant dire que c’est simple. Il suffit de créer les liens entre les pages avec les ancres qui vont bien et le tour est joué. Si vous décidez de l’inclure sur votre site, cela permettra de faciliter la vie de vos visiteurs qui cherchent une page particulière.

Je pense également que la sitemap visuelle est un bon plan pour les moteurs de recherches en favorisant les liens internes (ce qui ne vous empêche pas de proposer une sitemap XML pour le robot).

Je trouve SlickMap CSS pratique pour obtenir un résultat professionnel en 5 min chrono.

Téléchargez SlickMap CSS (.ZIP, 12Ko)

Cet article vous a plu ?

Commenter

| Recevez les mises à jour

| Partager :

Répondre Citer #1 par Funnycat le 2 novembre 2009 - 20:43

Vraiment génial, c’est simple à utiliser et le résultat est vraiment des plus professionnel. Je garde le lien sous la main.

Répondre Citer #2 par Lionel Roux le 3 novembre 2009 - 00:23

oui c’est simple et rapide et beau. Il ne faut pas s’en priver.

Sur Les tweets qui mentionnent [Webdesign] SlickMap Css, créez de jolies sitemaps navigables facilement - Websourcing.fr -- Topsy.com le 2 novembre 2009 - 20:17

[...] Ce billet était mentionné sur Twitter par Arobase Domoservices. Arobase Domoservices a dit: [Webdesign] SlickMap Css, créez de jolies sitemaps navigables facilement http://bit.ly/2wwwfL > websourcing.fr [...]

Websourcing.fr » Actualités, Web, Logiciels et Fun