281 SlickMap CSS — это простая таблица стилей для отображения готовой карты сайта из неупорядоченных списков HTML.
Эта таблица подходит для большинства сайтов, так как с помощью нее можно строить трехуровневые списки навигации по страницам и, дополнительно, ссылки на утилиты. Кроме того, все это легко изменяется и настраивается в таблице стилей CSS в соответствие вашим предпочтениям.
Основная идея SlickMap CSS состоит в том, чтобы упростить процесс создания дизайна и функционала карт сайтов за счет их автоматизации.
Особенности и приемущества
- Устранена необходимость использования дополнительного программного обеспечения
- Удобный интерфейс
- Кликабельные анкоры с видимыми URL
- Простой процесс проектирования
Установка
Установка SlickMap очень и очень проста. Для начала, создаете обычную HTML разметку из неупорядоченных списков.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<ul id="primaryNav"> <li id="home"><a href="http://astuteo.com">Home</a></li> <li><a href="demo/about">About Us</a> <ul> <li><a href="demo/history">Our History</a></li> <li><a href="demo/mission">Mission Statement</a></li> <li><a href="demo/principals">Principals</a></li> </ul> </li> <li><a href="demo/services">Services</a> <ul> <li><a href="demo/design">Graphic Design</a></li> <li><a href="demo/development">Web Development</a></li> <li><a href="demo/marketing">Internet Marketing</a> <ul> <li><a href="demo/social-media">Social Media</a></li> <li><a href="demo/seo">Search Engine Optimization</a></li> <li><a href="demo/adwords">Google AdWords</a></li> </ul> </li> ... |
В head разделе страницы прописываете пути к стилям (все это можно скачать) и JS библиотеку для IE совместимости.
|
1 2 3 |
<link rel="stylesheet" type="text/css" media="screen, print" href="/css/slickmap/slickmap.css" /> <!--[if lte IE 7]> <link rel="stylesheet" type="text/css" media="screen,print" href="/css/slickmap/slickmap-ie.css" /> <![endif]--> <!--[if lte IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> |
Вот и все!
