Красивое CSS меню для сайта
Если ты ищешь оригинально выполненное меню для сайта, работа которого основана на CSS, без использования сторонних библиотек, то ты его нашел.
Иногда ситуация требует особой деликатности, при разработке страниц сайта. То ли заказчик выделывается и требует минимальное количество скриптов на сайте, то ли SEO аналитики выставляют жесткие рамки использования jQuery и JS. Но не все так печально, если использовать современные стили, которые способны быть похожими на яваскипт.
Все, что тебе необходимо – расположить изображения и стили в необходимом месте. Подключить CSS файл или скопировать его содержимое к уже имеющимся стилям на странице. Также, конечно же, стоит учитывать HTML разметку.
Итак, как указано выше, ты можешь скопировать содержимое скачанного CSS файла в уже имеющийся на странице файл (что и советую) или же вставить отдельный файл (что не советую).
<link rel="stylesheet" type="text/css" href="/styles.css" />
Далее соблюсти эту разметку:
<ul id="navigationMenu">
<li>
<a class="home" href="#">
<span>Home</span>
</a>
</li>
<li>
<a class="about" href="#">
<span>About</span>
</a>
</li>
<li>
<a class="services" href="#">
<span>Services</span>
</a>
</li>
<li>
<a class="portfolio" href="#">
<span>Portfolio</span>
</a>
</li>
<li>
<a class="contact" href="#">
<span>Contact us</span>
</a>
</li>
</ul>
Как видишь, все очень просто. Далее добавь картинку img/navigation.jpg и все как бы.