Воскресенье, 05.07.2026, 17:57
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Модератор форума: sTar11  
Как сделать самому css меню?
RmKДата: Четверг, 25.02.2010, 14:08 | Сообщение # 1
play go pro hard
Группа: Заблокированные
Сообщений: 364
Репутация: 117
Статус: Offline
Всем доброго времени суток. Сегодня я научу вас, как сделать не сложное css меню для вашего сайта.


И так, начнем.

1. Для начала, нам потребуется основа css меню.Пропишем перед нашим скриптом:

<style type="text/css">

2. Придадим нашему меню форму.
Для это пропишем следущее:

#vmenu ul {
list-style: none;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
text-decoration: none;
}

Сейчас я расскажу какой параметр за что отвечает.


  • Margin – это внутренний отступ в элементе.
  • Padding – это внешнее пространство (отступ).

  • Font-family – название шрифта использованного в данном меню.
    (обычно пишется несколько шрифтов, компьютер автоматически читает первый шрифт, если такого не имеется на компьютере, берется за следующий. Шрифты следует писать через запятую.)
  • Font-size – размер шрифта, пишется в пикселях.
  • Font-style – определяет начертание шрифта. (используют italic, oblique, normal)
  • Font-weight – устанавливает насыщенность шрифта. (используют bold, bolder, lighten, normal)
  • Text-decoration - добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания.(используют blink , line-through , overline , underline , none)

3. Придадим нашему меню границы.
Для этого пропишем следующее:

#vmenu {
width: 150px;
margin: 10px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #84ac46;
border-right-color: #84ac46;
border-bottom-color: #84ac46;
border-left-color: #84ac46;
}


  • width – ширина меню.
  • border-top-width – устанавливает толщину границы сверху
  • border-right-width –справа
  • border-bottom-width – снизу
  • border-left-width – слева

  • border-top-style – устанавливает стиль границы сверху
  • border-right-style – справа
  • border-bottom-style –снизу
  • border-left-style – слева

  • border-top-color – устанавливает цвет обводки сверху
  • border-right-color – справа
  • border-bottom-color – снизу
  • border-left-color – слева

4. Далее придадим границу, цвет и все остальное кнопкам.

#vmenu li a {
text-decoration: none;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #84ac46;
}

Тут думаю вам все понятно.

5. Сейчас добавим стиля для ссылок, когда на них не навели.

#vmenu li a:link, #vmenu li a:visited {
color: #8f8f8f;
display: block;
background-color: #ffffff;
padding-top: 3px;
padding-right: 0;
padding-bottom: 3px;
padding-left: 10px;
}


  • Color – цвет ссылки, до наведения на нее.
  • Background-color – фон под ссылкой, когда на нее не навели.
  • Далее идут отступы. Читать про них выше.

6. Сейчас добавим стиля для ссылок, когда на них навели.

#vmenu li a:hover {
color: #000000;
background: #b1e264;
padding-top: 3px;
padding-right: 0;
padding-bottom: 3px;
padding-left: 10px;
}


  • Все параметры остались те же, только заменяем их на то, что вы хотите увидеть при наведении на ссылку(цвет ссылки, фон под ссылкой, отступы)

Автор статьи: Vladon
При копировании материала, пожалуйста указывайте источник и автора.
 
ТёмасДата: Четверг, 25.02.2010, 14:10 | Сообщение # 2
Полковник
Группа: Гости
Сообщений: 200
Репутация: 83
Статус: Offline
Да, спасибо, +1

 
BondSportДата: Четверг, 25.02.2010, 14:23 | Сообщение # 3
★ IsuCoz ★
Группа: Проверенные
Сообщений: 1205
Репутация: 402
Статус: Offline
Хорошая статья!

Я слежу за вами.
 
sTar11Дата: Четверг, 25.02.2010, 17:41 | Сообщение # 4
Mr.GoLoVa
Группа: Гости
Сообщений: 2320
Репутация: 33
Статус: Offline
полезно для новичка biggrin

Зароботок и раскрутка

Не учи меня жить лучше помоги материально ;O
 
admin-portalДата: Воскресенье, 07.03.2010, 11:33 | Сообщение # 5
Лейтенант
Группа: Пользователи
Сообщений: 59
Репутация: 17
Статус: Offline
Спасиб как раз на новм сайте пригадится!!!
 
CristianoДата: Воскресенье, 07.03.2010, 12:19 | Сообщение # 6
Сержант
Группа: Пользователи
Сообщений: 20
Репутация: 6
Статус: Offline
Для новичков,нужна вещь
 
  • Страница 1 из 1
  • 1
Поиск: