Светло синее горизонтальное меню by webо4ka.ru с полным объяснением css кода


Светло синее горизонтальное меню by webо4ka.ru с полным объяснени...

912
10 из 10
Проголосовало: 6






Здравствуйте все пользователи зашедшие на webo4ka.ru и просмотревшие данный материал... Вот вышла свободная минутка так сказать, и я сделал простенькое горизонтальное меню, и вот выкладываю в свободный доступ, ну выкладываю т.к. во-первых давненько не выкладывались материалы от нашего авторства, а во-вторых просто давненько не выкладывал что-то новенькое... Сразу хочу сказать, что это не банальное горизонтальное меню, которое можно найти на просторах интернета, хотя по структуре кода оно банальное, уникальность данного кода в том, что тут полностью описан css код горизонтального меню, что поможет новичкам по немного начать понимать, что и как нужно делать. Код описан не заумными фразами, а обычное объяснение кода, так сказать по человечески объяснено, кстати попрошу всяких умных, которые заметили ошибку в моих комментариях к коду, отписаться, хотя все написано правильно, писал без проверки)) Вообщем пользуйтесь на здоровье...

Установка:

Вставляете куда вам необходимо данный код:

Код
<ul class="gmenu">
<li class="vmenu">
<a href="" class="name">webo4ka.ru</a>
  <span class="vmenu2">
  <a href="" class="ee">Подсылка 1</a>
  <a href="">Подсылка 2</a>
  <a href="">Подсылка 3</a>
  <a href="">Подсылка 4</a>
  <a href="">Подсылка 5</a>
  <a href="">Подсылка 6</a>
  </span>
</li>
<li><a href="">Ссылка 2</a></li>
<li><a href="">Ссылка 3</a></li>
<li><a href="">Ссылка 4</a></li>
<li><a href="">Ссылка 5</a></li>
<li><a href="">Ссылка 6</a></li>
</ul>

<br>

  <style>
/* == Светло синее горизонтальное меню by webо4ka.ru с полным объяснением css кода == */
.gmenu {
background:#f7f7f7; /* -- Придаем светло серый цвет горизонтальному меню -- */
border:1px solid #ddd; /* -- Обводка горизонтального меню в 1px -- */
border-radius:3px 3px 0 0; /* -- Скругление углов на 3px в левом верхнем углу и вправом верхнем углу горизонтального меню -- */
box-shadow:0 2px 3px #ddd; /* -- Добавляем тень горизонтальному меню -- */
width:900px; /* -- ˜ирина в 900px -- */
height:50px; /* -- ‚ысота в 50px -- */
margin:0 auto; /* -- Отступы, сверху и снизу по нулЯм, слева и справа автоматически, тем самым горизонтальное меню будет расположено по центру странички -- */
padding:0; /* -- Отступы внутри горизонтального меню отсутствуют -- */
list-style-type:none; /* -- Убираем маркированный список у ссылок -- */
}
.gmenu li {
float:left; /* -- Делаем горизонтальное меню, а не вертикальное -- */
}
.gmenu li a {
border-right: 1px solid #ddd; /* -- Делаем справа полоску от ссылки -- */
float:left; /* -- Ссылка одна за другой слева на право -- */
height:50px; /* -- Высоты ссылки 50px -- */
line-height:50px; /* -- Меж-строчный интервал 50px -- */
padding:0 21px; /* -- Отступ сверху и снизу 0, а слева и справа 21px -- */
text-shadow: 0 1px 0 #fff; /* -- Тень текста -- */
text-transform:uppercase; /* -- Верхний регистр букв -- */
text-decoration:underline; /* -- Подчеркивание ссылки -- */
text-align:center; /* -- Текст по центру -- */
color:#555; /* -- Цвет текста -- */
font-size:13px; /* -- Размер шрифта -- */
}
.gmenu li a:hover {
background:#d8e7f5; /* -- Фон ссылки при наведении -- */
text-decoration:none; /* -- Убираем подчеркивание ссылки -- */
}
.vmenu:hover {
background:#d8e7f5 /* -- Фон ссылки с выпадающим меню при наведении -- */
}
.vmenu:hover .vmenu2 {
display:block; /* -- Показываем выпадающее меню -- */
}
.vmenu2 {
  display:none; /* -- Скрываем выпадающее меню -- */
  background: #d8e7f5; /* -- Фон выпадающего меню -- */
  border: 1px solid #ddd; /* -- Обводка выпадающего меню -- */
  border-radius: 0 0 3px 3px; /* -- Скругление углов выпадающего меню в левом и правом нижних углах -- */
  box-shadow:0 2px 3px #ddd; /* -- Тень выпадающего меню -- */
  padding:4px; /* -- Отступ внутри выпадающего меню -- */
  margin:50px 0 0 -1px; /* -- Отступы снаружи выпадающего меню, сверху 50px и слева -1px, а справа и низу 0 -- */
  width: 200px; /* -- ˜Ширина выпадающего меню 200px -- */
  height:auto; /* -- Высота выпадающего меню автоматически -- */
  position:absolute; /* -- Абсолютная позиция выпадающего меню -- */
  z-index: 99; /* -- Расположение выпадающего меню по верх всего -- */
}
.vmenu2 a {
background: #fff !important; /* -- Фон ссылки в выпадающем меню -- */
border-bottom: 1px solid #dfebf6; /* -- Полоски внизу ссылки в выпадающем меню -- */
width: 180px; /* -- ˜Ширина ссылки 180px -- */
height: 20px !important; /* -- Высота ссылки 20px -- */
line-height: 20px !important; /* -- Меж-строчный интервал ссылки 20px-- */
padding: 2px 10px !important; /* -- Отступы сверху и снизу 2px, слева и справа 10px -- */
text-align: left !important; /* -- Текст слева -- */
font-weight: normal !important; /* -- ˜Шрифт нормальный -- */
text-transform: none !important; /* -- Обычный шрифт, без верхнего регистра -- */
text-decoration: none !important; /* -- Убираем подчеркивание -- */
}
.vmenu2 a:hover {
background: #dfebf6 !important; /* -- Фон ссылки при наведении в выпадающем меню -- */
color:#fff; /* -- Цвет ссылки -- */
text-shadow:0 1 1 #ddd; /* -- Тень текст -- */
}
  </style>

  


На этом все... Если что-то непонятно задавайте на webo4ke комментарии к материалу...

P.S. Кстати, выполню заказы по верстке небольшого кода с полным объяснением абсолютно БЕСПЛАТНО, и дальнейшим выкладыванием в паблик сверстанного кода, пишите в комментариях к материалу или мне в лс... И может быть выполню ваш заказ...
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://webo4ka.ru/
  • Оставить первым комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    403
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 6
    Гостей: 5
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: