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


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

960
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 25
Скрипты и модификации для Ucoz 2113
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Ох. Вижу, что обсуждение очень старое. Но!
На других CMS так же будет все это реализовано. На нормальных CMS.
Такое решение может подойти лишь для landing сайтов. Но и то, не думаю, что там кто то заморачивается в написании какого либо контроллера генерирования шаблона и используют прямо в лоб чистый HTML, поэтому и будут для каждой страницы свои блоки делать.

Поэтому лучше тут все же дописать решение именно для ucoz без загрузки этих лишних блоков на странице. Ведь используя условные операторы этот код даже не будет прогружаться на странице. (Лол. Это ж доли секунд загрузки...) И что? Но давайте делать оптимальнее
Моё авторство:)
  • 1488 написал:
  • 1488 написал:
  • Смысл исходный код? он возвращает после обновление страницы на то положение которое было... или как?
  • 1488 написал:
  • как поставить галки как скрине?
    а то невозможно поставить...
  • Handyman написал:
  • Не появляется код безопасности для обычных пользователей
    Последние темы
    Опрос
    432
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 5
    Гостей: 5
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: