1. Вы находитесь в архивной версии форума xaker.name. Здесь собраны темы с 2007 по 2012 год, большинство инструкций и мануалов уже неактуальны.

CSS меню (Начинающим)

  1. Данная статейка писалась для новичков в Вед дизайне.
    --------------------------------------​

    Все наверняка замечали на многих сайтах красивое и функциональное меню ?!
    Пример:
    Вроде бы оно не к чему, но когда ты имеешь свой сайт и тебе в раздел "Новости" или "Книги" и т.д. нужно сделать под разделы, если делать в строчку....
    Пример: (Возьмем "новости")
    Код:
    [B]Новости[/B]
    Мировые
    Программые
    Наши новости
    
    Согласитесь убого ?

    И по этому, я помогу вам немного !!!
    Что такое CSS (Cascading Style Sheets — Каскадные Таблицы Стилей) - Я думаю объяснять не нужно ?! (но если что, тогда сюда)

    И так приступим !

    Нам нужно:

    1. Любой (html,css,php,java) - редактор, для начинающих больше подходит "Macromedia Dreamweaver 8" - взять можно тут
    2. Чистую "html страницу" и "css файл" (скачать тут)
    3. И "Visual CSS Menu" (скачать тут)

    Наши действия:

    Распаковываем "Visual CSS Menu", открываем "run001.html", выбираем на свой вкус любое меню !

    Мой выбор

    (Нажмите чтоб увеличить)
    Название меню: Jagged Edges

    После того как вы его настроели (Ориентир, Шрифт, Эффект), нажмите "Customize Menu" (В правом, нижним углу).

    Дальше мы видим тщательную настройку меню (Цвет оформления, текста) и много другое !

    После того как вы настроили свое меню, себе по душе, с права вы увидите 3-и окошка (Design, CSS, HTML)

    Design - Исходный вид вашего меню
    CSS - отдельный код CSS
    HTML - отдельный код HTML

    Как сохранить меню ?

    1. Копируйте CSS-код, в файл Style.css (ну или как вашей душе угодно)
    2. Копируйте HTML-код(это ссылки на ваше меню "Разделы" и "Под разделы"), в то место где вы хотите видеть свое меню (index.html).
    3. Теперь чтоб CSS заработало, нужно в теги <head></head>, вставить
    Код:
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    "css/style.css" путь по CSS файла.

    Мой результат:


    Думаю на этом пока все !!!
    Строго не ругайте, это моя первая обучающая статья !!!

    Автор (с) White-Power
     
  2. st1
    SeROFiMkO,
    Нет, но в нем удобнее править/писать код.