Оформляем карту сайта
Привет, как я и обещал - публикую очередную заметку.
Сегодня речь пойдет об оформлении карты для сайта. На многих из сайтов эти карты используются исключительно для SEO-оптимизации и выглядят как обычный, уродливый таки-список, признаюсь честно — сам имею такие.
Но если вы хотите приукрасить вашу карту и сделать все на совесть — советую Вам уже переходить под кат.
И так, это решение представляет собой базу состоящую из css и javascript, которая позволяет оформлять вашу карту в виде древовидного списка.
Выглядит она достаточно элегантно и аккуратно. А что более важно — это её семантичный код.
Вот пример кода(взятого из демо) дерева с тремя переходами:
<ul>
<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>
</ul>Код выглядит просто супер.
Так же хотелось бы заметить что все блоки тянутся.
Так что смотрите демо, думайте и используйте.
Я тогда не смог отправить сообщение, думаю сейчас все заработает :)
Я по поводу вашего отсутствия – я уже и RSS адрес удалил, вы же первый блогер, которого я постоянно читал! Теперь у меня 36 лент :) Если бы не пришлось пользователю показать силку на Flash mp3 player, то так бы и не узнал о возрождении такого блога :) Из пожеланий, если можно, хочу больше переводов из английских источников. Во общем с возвращением :)
Выглядит довольно весело, даже применимо %)
зы: уже 2009 год, а копирайт внизу всё ещё 2008 ;)
Красота кода поразила!
Вовсе не обязательно ставить текущий год. Мало того, можно вообще копирайт не ставить ))))
Очень эстетично. Мне понравилось. Спасибо за находку.
Вот тут было, немного раньше вашего, к сожалению:
Повторение – мать учения (:
Рад что вернулись, обожаю ваш блог за дизайн… ну и не только (:
Красивая реализация с красивым кодом.
Хочу поправить на счет JavaScript – он не используется для отображения дерева. Судя по комменту в коде, автор использует его для сбора статистики.
Код самого скрипта я еще не изучал, но судя по демо он, как минимум, используется для отображения урл в блоке из дерева.
Я в восторге ) Пейджер еще снизу привернуть, если карта очень большая )
Супер! Всё работает на ура, красотище! :)
сделал вложенность 4 вместо 3-х, и тут же нарисовались проблемы – не применяется новый цвет(как для ранее описанных уровней) и битая линия в дереве, firefox 3
Большое спасибо. Первый раз вижу такое решение. Обязательно попробую :)
а как же работа в браузере IE6/7? У меня 6ка вообще ужас какой показала
Отлично. Безупречный код. Спасибо. С возвращением!
Демо под IE8 немного барахлит, а про IE6 вообще молчу. Понятно, что шестые отмирают, но многие клиенты еще требуют. Надо будет колдовать с java
Ну вот как сказать всем пользователям IE, что этот браузер фигня…..
работает :)
Доступно, красиво, практично!!
о чём вы говорите.. ПОНЯТНОЕ дело IE6 не поддержит, в CSS стоят свойства только для FF/
Не вижу ничего необычного в карте :) ну только что наглядно удобно.
Ой спасибо,как же пригодилось.
JS в карте действительно не используется – чистый CSS. В хеде подключаются лишь:
<link rel="stylesheet" type="text/css" media="screen, print" href="slickmap.css" />
<!--[if lte IE 7]> <link rel="stylesheet" type="text/css" media="screen,print" href="slickmap-ie.css" /> <![endif]-->
<script src="/mint/?js" type="text/javascript"></script> <!-- stats tracking -->
И как правильно заметил Димокс исключительно для статистики.
Ну.. не знаю. Лично мне нравятся варианты, когда при просмотре древа видно и сам сайт. А в вашем демо – древо на целый экран.
В своих поисках я наткнулся на програмку GSiteCrawler она не смотря на свою бесплатность – работает корректно и помимо генерации карты сайта имеет еще множество приятных моментов. Например, если указать доступы к ФТП – она сама после генерации обновит карту сайта.
Так-же поддерживается неограниченное количество проектов.
Теперь о плохом. GSiteCrawler не работает под Vista (и наверное под Win7) если запускать от имени обычного пользователя. Проблему легко решает запуск от имени администратора, но все таки маленька неприятность есть. Зато в остальном – она себя полностью оправдывает.
Если эту штуку кастомизировать — очень даже ничего выйдет.
Только деревно сайта разработчик развернул не в ту сторону, я бы сделал по-другому.