Меню для Сайта своими руками

Пришло то время, дорогие друзья, когда я на практике расскажу, как сделать красивое меню для сайта. У меня есть уроки Photoshop, в которых я показывал, как рисуются отдельные кнопки для веб сайтов и целое меню для сайта. Но, нарисовать – это только половина задачи, а нужно еще и уметь сделать из своего рисунка реально работающую кнопку. Да так, чтобы это было максимально удобно для пользователя и максимально выгодно для Вашего сайта.

Радует то, что это почти всегда одно и тоже. Исключение, пожалуй, один случай: когда на сайте выпадающее меню. К примеру, есть кнопка «уроки», наводя на которую, выпадает целый список: «уроки photoshop», «уроки flash», «уроки 3D Max» и т.д. Для пользователя такое меню на сайте очень удобное, но для поисковых систем такая конструкция усложнит и замедлит индексацию.

Плохой вариант для поисковиков, когда меню для сайта делается с помощью flash-технологий. Для пользователей это тоже не всегда удобно. Такая же ситуация и с кнопками, которые выполнены в виде графических элементов.

Лучший вариант – это обыкновенная гиперссылка. Но ведь хочется, чтобы меню выглядело красиво, чтобы кнопки менялись при наведении курсора, правильно? И я с Вами согласен. О том, как создать такое меню для сайта, я и собираюсь рассказать. Именно по такой технологии сделаны меню навигации на моем сайте. Один пример в верхнем правом углу, второй внизу, в подвале сайта.

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

Хватит слов, перейдем к делу ;)

На самом деле такое меню для сайта делается очень просто. Тут нет никаких секретов или тайн. Я просто предоставлю Вам готовый код и добавлю к нему свои комментарии, чтобы Вам было проще его отредактировать под свои запросы.

Этот код помещается в каскадную таблицу стилей (CSS). Если Вы еще не в курсе, что это такое, прочитайте книгу «Блочная Верстка» из содержания которой почерпнете массу полезной информации.

Вернемся к меню для сайта и его коду.

  • #nav {
    width: 990px;

    /*ширина всего меню навигации */

    height: 50px;

    /*и, разумеется, его высота*/

    background: url (img/nav.jpg) no-repeat #374f37;

    /*тут мы задаем параметры фона; сразу прописываем путь к картинке, котороая будет служить фоном, после указываем, что эта картинка не повторяется и в конце указываем цвет меню, на случай, если пользователь отключит графику*/

    font-size: 18px;

    /*размер шрифта */

    float:left;

    /*делает так, что наш блок с меню располагается справа; на самом деле меню растягивается на всю длину сайта и нам это вроде не нужно, но этот параметр понадобятся, чтобы не «косячил» макет, чтобы меню «дружило» с остальными блоками */

    }

  • #nav ul {
    margin:4px 0 0 25px;

    /*меняя эти параметры, я «двигаю» кнопки относительно фона */

    list-style:none;

    /*меню создается в виде списка, а команда «none» указывает на то, что у строк этого списка не будет указателе в виде цифр или маркеров; чтобы лучше уяснить, что я имею ввиду, удалите эту строку, когда будете делать свое меню для сайта и увидите, что из этого получится; когда посмотрите – вернете строку на место*/

    }

  • #nav li {
    display:inline;

    /*чтобы наши кнопки выстраивались в линию, а не столбцом */

    }

  • #nav a {
    float:left;

    /*указывает, что кнопки должны выстраиваться слева направо */

    display:block;

    /*этот параметр нам нужен, чтобы у нас была не просто ссылка, а ссылка с «каркасом», который и будет создавать иллюзию кнопки */

    width: 98px;

    /*длина этого «каркаса» */

    height: 50px;

    /*и… правильно! */

    background:url («img/key.png») no-repeat;

    /*тут все, как и в случае с фоном для меню; кто не уяснил, пускай вернется чуть выше и повторит */

    text-align : center;

    /*положение текста внутри «каркаса» */

    text-decoration: none;

    /*делаем, чтобы текст был чистый, без всяких подчеркиваний, которые в меню навигации нам не нужны совершенно*/

    padding:10px 2px 10px 0px;

    /*этими циферками можно подправить положение надписи внутри «каркаса», если нас что-то не устраивает: подвинуть, опустить и т.д. */

    color:#FFF;

    /*цвет надписи, когда кнопка не активна */

    }

  • #nav a:hover {
    background-position:0% -50px;

    /*здесь мы указываем, на сколько пикселей нужно поднять фон; подробнее опишу чуть ниже */

    color:#66ff66;

    /*цвет текста, когда на кнопку наведен курсор */

    }

Вот собственно и все, как видите, ничего сложного. Осталось лишь рассказать про параметр «background-position» и зачем он нужен. Вообще, можно обойтись без него, а просто прописать «background» и путь к картинке (или цвет), на которую должен будет меняться фон при наведении курсора. Но в таком случае, если у пользователя слабая скорость Интернета, при наведении курсора будет происходить торможение: сначала фон пропадет вовсе, потом, когда только загрузится новая картинка, он изменится на нужный.

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

Чтобы показать меню на сайте, в код страницы нужно добавить такой кусок:

  • <div id="nav">
    <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О Сайте</a></li>
    <li><a href="#">Combats</a></li>
    <li><a href="#">Linux</a></li>
    <li><a href="#">Windows</a></li>
    </ul>
    </div>

Если Вы делаете шаблон для WordPress, то код должен выглядеть так:

  • <div id="nav">
    <ul>
    <li class="<?php echo $highlight; ?>«><a href=»<?php echo get_settings ('home'); ?>"><?php _e ('Home','wp_multiflex'); ?></a></li>
    <?php wp_list_pages ('sort_column=menu_order&depth=1&title_li=' ); ?>
    </ul>
    </div>

Все. Думаю, эта заметка поможет Вам при создании меню для Вашего сайта. Если что-то не понятно, есть что добавить или обсудить, милости прошу отметиться в комментариях :)

  • Святослав

    Доброго дня, возник вопрос: Как сделать чтобы после клика на каком-то определенном пункте меню, он оставался выбранным? (т.е. не менял свое изображение/вид)(например делался как-бы подчеркнутым или вроде-того)

    спасибо заранее