slickmap-css-exemple

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

parFlorian publié le

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.

slickmap-css-exemple

[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="/con