Украшаем карту сайта. SlickMap CSS. - «Верстка»
Экс-глава EA Russia Тони Уоткинс сделает Astrum Entertainment «компанией №1» на российском рынке видеоигр - «Новости сети»
Экс-глава EA Russia Тони Уоткинс сделает Astrum Entertainment «компанией №1» на российском рынке видеоигр - «Новости сети»
CD Projekt раскрыла, как продвигается разработка The Witcher 4, и похвасталась успехами Cyberpunk 2077 - «Новости сети»
CD Projekt раскрыла, как продвигается разработка The Witcher 4, и похвасталась успехами Cyberpunk 2077 - «Новости сети»
Глобальное потепление замедлило вращение Земли, и в этом уже нашли плюсы - «Новости сети»
Глобальное потепление замедлило вращение Земли, и в этом уже нашли плюсы - «Новости сети»
Энтузиаст с нуля создал видеокарту и запустил на ней Quake - «Новости сети»
Энтузиаст с нуля создал видеокарту и запустил на ней Quake - «Новости сети»
Под давлением пользователей Google преодолела аппаратные ограничения для внедрения ИИ в Pixel 8 - «Новости сети»
Под давлением пользователей Google преодолела аппаратные ограничения для внедрения ИИ в Pixel 8 - «Новости сети»
OpenAI опубликовала короткометражки, созданные в ИИ-генераторе Sora - «Новости мира Интернет»
OpenAI опубликовала короткометражки, созданные в ИИ-генераторе Sora - «Новости мира Интернет»
На ежегодной конференции для разработчиков Apple может раскрыть свои планы по внедрению ИИ - «Новости мира Интернет»
На ежегодной конференции для разработчиков Apple может раскрыть свои планы по внедрению ИИ - «Новости мира Интернет»
Тренды дизайна корпоративных сайтов: что актуально в 2024 году
Тренды дизайна корпоративных сайтов: что актуально в 2024 году
В новой бета-версии Android 15 можно отключить ограничение частоты кадров 60 FPS для игр - «Новости мира Интернет»
В новой бета-версии Android 15 можно отключить ограничение частоты кадров 60 FPS для игр - «Новости мира Интернет»
Asus представила беспроводные наушники для геймеров ROG Cetra SpeedNova - «Новости мира Интернет»
Asus представила беспроводные наушники для геймеров ROG Cetra SpeedNova - «Новости мира Интернет»
Новости мира Интернет » Самоучитель CSS » Вёрстка » Украшаем карту сайта. SlickMap CSS. - «Верстка»


SlickMap CSS - это набор стилей для отображения карты сайта, на основе HTML с неупорядоченным списком.
Он очень удобен для большинства сайтов. Отображает три уровня навигации и дополнительные ссылки. Может быть легко
подстроен под дизайн вашего сайта.






Работать с ним очень просто. Во-первых, карта сайта должна быть представлена в виде неупорядоченного списка:


<ul id="primaryNav">
<li id="home">Home</li>
<li>About Us
<ul>
<li>Our History</li>
<li>Mission Statement</li>
<li>Principals</li>
</ul>
</li>
<li>Services
<ul>
<li>Graphic Design</li>
<li>Web Development</li>
<li>Internet Marketing
<ul>
<li>Social Media</li>
<li>Search Optimization</li>
<li>Google AdWords</li>
</ul>
</li>
<li>Copywriting</li>
<li>Photography</li>
</ul>
</li>
</ul>


Корневому элементу в качестве идентификатора указываем primaryNav



Для дополнительных ссылок используем следующую разметку:


<ul id="utilityNav">
<li>Register</li>
<li>Log In</li>
<li>Site Map</li>
</ul>


Как видно из примера, для корневого элемента указан идентификатор utilityNav.
Подключаем стилевой файл slickmap.css и всё готово!



Качаем



Demo на сайте автора.


SlickMap CSS - это набор стилей для отображения карты сайта, на основе HTML с неупорядоченным списком. Он очень удобен для большинства сайтов. Отображает три уровня навигации и дополнительные ссылки. Может быть легко подстроен под дизайн вашего сайта. Работать с ним очень просто. Во-первых, карта сайта должна быть представлена в виде неупорядоченного списка:

Смотрите также

А что там на главной? )))



Комментарии )))



Комментарии для сайта Cackle