2012-06-09

Textual description of firstImageUrl

CSS menu generator

1меню
Создать красивое CSS меню для вашего блога не только просто, а очень просто с помощью CSS Menu Builder. Напомню, что раньше мы уже рассматривали, как сделать меню в программе CSS Menu Generator,
а также в блоге были приведены примеры горизонтального и вертикального CSS меню.
Перейдите на этот css menu generator по ссылке.
Здесь вам предстоит выбрать тип меню из предложенных:

  • Horizontal menus – горизонтальное меню,
  • Vertical menus – вертикальное меню,
  • Breadcrumb menus – меню “хлебные крошки”. Нажмите на соответствующую кнопку (например,  кнопка), чтобы перейти к работе в CSS menu generator ‘e.
    Этапы создания CSS меню:
  • Выбираем фон полоски меню (варианты выделены на скриншоте красной ракой). Далее кнопка “Next”. Кнопка “Reset” означает “Очистить”, “отменить”.
    выбор_фона_полоски_меню
  • Переходим к выбору цвета основных элементов меню css
    выбор_цвета

    Background colors  (цвет фона)

    Background color: (цвет фона)
    Background shading: (цвет полосы)
    Hover colors – цвета при наведении курсора 

    Hover color:
    Hover shading:
    - создают градиент “наведенной” кнопки
    Hover text color: – цвет текста при наведении
    Inactive colors – цвет неактивных элементов

    Inactive color:
    Inactive shading:
    –создают градиент неактивных кнопок.
    Inactive text color: – цвет неактивных ссылок
    Active colors – цвета активных элементов

    Active color:
    Active shading:
    создают градиент активной кнопки Active text color: – цвет активной ссылки
    ..
    Кнопка “preview” поможет вам просмотреть изменения. Я специально сделала меню из различных цветов для большей наглядности. Скриншот работы в CSS menu generator, кликните для просмотра в большем размере. 
  • После того, как нас все устроит, кликните кнопку “ Next”. Далее настраиваем ссылки меню. Кликйте по иконке удаления ссылок, чтобы убрать стандартные ссылки генератора меню, добавляйте свои ссылки через специальную форму, где Link Name – название ссылки, Link URL – собственно ссылка, вы можете сделать, чтобы ссылка открывалась в новом окне, указав напротив Link Target – blank.
    ссылки_меню
  • Снова кнопка “Next”. Перед нами откроется страница с кодом меню CSS и HTML, а также фоновым изображением. Вы можете скачать также себе на компьютер zip-архив с меню.
    Как встроить меню CSS в свой блог Blogspot?
    1. Скопируйте код CSS из верхнего окошка и вставьте его окно вставки кода CSS (его вы найдете по пути Шаблон –> Настроить –> Дополнительно –> Добавить CSS. Не закрывайте пока эту страницу.
    2. Сохраните изображение фона меню к себе на компьютер и загрузите на какой-нибудь хостинг изображений. Я обычно пользуюсь с помощью сервиса Яндекс.Фотки. Обязательно проследите за тем, чтобы изображение не изменяло размер при загрузке. Возьмите прямую ссылку на изображение в оригинальном! размере.
    3. Изменяем CSS код, который вставили в окно стилей CSS. Найдите шаблоны ссылок на изображения в коде. Они имеют вид name.png и замените их ссылку на фоновое изображение полоски меню. Не забудьте, что их может быть несколько! Живой пример:
      Первоночальный код:
      /* Generated via www.cssmenubuilder.com */
      .menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url('  topMenuImages.png') repeat-x;}
      .menu li{padding:0; margin:0; list-style:none; display:inline;}
      .menu li a{float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url('topMenuImages.png') 0px -30px no-repeat;}
      .menu li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url('topMenuImages.png') 100% -30px no-repeat;}
      .menu li a:hover{background-position:0px -60px; color:rgb(255,255,255);}
      .menu li a:hover span{background-position:100% -60px;}
      .menu li a.active, .menu li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url('topMenuImages.png') 0px -90px no-repeat; color:rgb(255,255,255);}
      .menu li a.active span, .menu li a.active:hover span{background:url('topMenuImages.png') 100% -90px no-repeat;}
      Конечный код:
      /* Generated via www.cssmenubuilder.com */
      .menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url( 'http://img-fotki.yandex.ru/get/6311/87704015.a/0_86f18_5da721a2_orig ) repeat-x;}
      .menu li{padding:0; margin:0; list-style:none; display:inline;}
      .menu li a{float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url('http://img-fotki.yandex.ru/get/6311/87704015.a/0_86f18_5da721a2_orig') 0px -30px no-repeat;}
      .menu li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url('http://img-fotki.yandex.ru/get/6311/87704015.a/0_86f18_5da721a2_orig') 100% -30px no-repeat;}
      .menu li a:hover{background-position:0px -60px; color:rgb(255,255,255);}
      .menu li a:hover span{background-position:100% -60px;}
      .menu li a.active, .menu li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url('http://img-fotki.yandex.ru/get/6311/87704015.a/0_86f18_5da721a2_orig') 0px -90px no-repeat; color:rgb(255,255,255);}
      .menu li a.active span, .menu li a.active:hover span{background:url(' http://img-fotki.yandex.ru/get/6311/87704015.a/0_86f18_5da721a2_orig’) 100% -90px no-repeat;}
    4. Вставьте код HTML в гаджет блога HTML / JavaScript во вкладке Дизайн и наслаждайтесь результатом.
  • Комментариев нет :

    Отправить комментарий

    Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
    Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности