Делаем слайд-меню как на сайте партии «Единая Россия»

Сейчас я работаю над одним из региональных сайтов партии «Единая Россия». Основное требование к таким сайтам — они визуально должны быть одинаковы. Каких-то требований к коду или использованию сторонних библиотек нет. Посмотрев как это реализовано на сайте партии, я ужаснулся и решил сделать по-своему.

В оригинале такое меню реализовано с кучей таблиц и js-кода. Это в корне неправильно и граничит с идиотизмом. Итак, делаем разметку меню:

Как видите, она простая и наглядная, всего четыре блока с текстом и картинкой. Теперь надо это все оформить в CSS:

И наконец, jQuery-код. Он понадобится для того, чтобы курсор меню оставался на последнем отмеченном пункте.

Код кроссбраузерный, валидный: IE6+, Firefox 1.5+, Opera 8+, Safari 3+, Chrome 0.2+

Смотрите ДЕМО или можете скачать архив с полным кодом.

  • и ЭТО типо правильно? подрубать жКвери ради удержания курсора???

    • Это «типо» не рафинированный урок, а пример из реального проекта, где jQuery и так используется в полный рост. Если у вас есть вариант лучше — предлагайте, все это оценят.

  • а мне понравилось спасибо!

  • Очень простой код и красивый результат!

    а возможно ли сделать, чтобы он еще и сам прокручивал меню как-то красиво с фейд-эффектом?

    Спасибо!

    • Можно прикрутить любой подходящий скрипт слайдшоу, например jQuery Cycle Plugin

  • А смысл использовать здесь jquery? Все реализуется на HTML+CSS.

    • По ТЗ, последний пункт, на который был наведен курсор, должен оставаться активным, для этого и используется js, см демо.

      • Тогда все понятно

  • Максим Михайлович

    у меня вопрос, можно ли сделать такое меню, как здесь http://delo.ua ?

    • Neolot

      Можно, конечно

  • Максим Михайлович

    подскажите, как?

    • Neolot

      Это не стандартное и не тривиальное решение, поэтому здесь не получится установить такой-то плагин и получить результат.
      Но я лично для себя не вижу большой сложности сделать такое меню. Это может сделать любой, кто обладает средними знаниями в веб-разработке.

  • Максим Михайлович

    к сожалению, я не соображаю в этом

  • Максим Михайлович

    поэтому и ищу плагины

    • Neolot

      Не существует плагинов на все случаи жизни)

  • Максим Михайлович

    вот мой сайт http://news-smi.net/ , я хотел бы сделать такое же меню

  • Максим Михайлович

    поможете?