From my old post: create a sitemap with HTML + CSS which uses the old CSS technique like float and uses images to draw lines. But now we have flexbox and css variable which are more flexible and very useful in setting things like colors or sizes. In addition, the old version is not Responsive, so I think it’s time to write a new version using new css techniques.
Nowadays, adding a visual sitemap like this to your website maybe unnecessary and not very popular. But sometimes having it for an overview makes it easier to navigate the site. Or you can use it as a tool to present website structure to the client or put them in proposal or work scope documentation.
To use the sitemap, write website structure in HTML using ui and li, which can be nested to virtually infinity. For example:
<div class="vsitemap">
<ul>
<li><a href="#">Home</a>
<ul>
<li><a href="#">Events <br/><small>Event page description</small></a>
<ul>
<li><a href="#">View Event</a></li>
</ul>
</li>
<li><a href="#">Facilities</a></li>
<li><a href="#">Accommodations</a>
<ul>
<li><a href="#">Room Type</a>
<ul>
<li><a href="#">Studio Room</a></li>
<li><a href="#">Suite Room</a>
<ul>
<li><a href="#">Promotions</a></li>
<li><a href="#">Facilities</a></li>
</ul>
</li>
<li><a href="#">VIP Room</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
</ul>
</li>
</ul>
</div>For CSS, you can find them at Github Visual Sitemap. Which include two types of sitemaps:
1. Vertical Sitemap (class vsitemap) Suitable for putting on the website because it is responsive and can be viewed on both computers and mobile phones.
2. Horizontal Sitemap (class hsitemap) Not very suitable for website because it’s not responsive. But looks good for presentation or documentation
The CSS code and HTML snippet can be download at Github Visual Sitemap.