Простое вертикальное меню


Простое вертикальное меню

733
9.6 из 10
Проголосовало: 5





Простое меню построенное только на HTML и CSS3

УСТАНОВКА:

ШАГ 1.

Установите этот HTML код туда, где вам удобно ( где хотите видеть меню ).

Код
<ul class="menukos">  
<li><a href="#"><img src="http://webo4ka.ru/Ucoz8/home.png" style="vertical-align:middle;" />webo4ka #1</a></li>  
<li><a href="#"><img src="http://webo4ka.ru/Ucoz8/home.png" style="vertical-align:middle;" />webo4ka #2</a></li>  
<li><a href="#"><img src="http://webo4ka.ru/Ucoz8/home.png" style="vertical-align:middle;" />webo4ka #3</a></li>  
<li><a href="#"><img src="http://webo4ka.ru/Ucoz8/home.png" style="vertical-align:middle;" />webo4ka #4</a></li>  
</ul>


ШАГ 2.
Ну и самое главное, что прибавит красоты менюшке - это стили. Установите следующий CSS код в вашу Таблицу Стилей CSS.
Код
ul.menukos {  
margin: 0;  
padding: 0;  
border: 1px solid #c4c4c4;  
border-radius: 6px;  
-webkit-border-radius: 6px;  
-moz-border-radius: 6px;  
display: inline-block;  
background-color: #e8e8e8;  
width: 99%;  
list-style-type: none;  
}  
   
ul.menukos li a {  
color:#000;  
padding: 6px 12px 6px;  
font-size: 13px;  
font-weight: bold;  
text-decoration: none;  
display: block;  
border-top: 1px solid #c4c4c4;  
}  
   
ul.menukos li a:hover {  
background-color: #550155;  
color:#fff;  
}  
   
ul.menukos li:first-child a {  
border-top: none;  
}  
   
ul.menukos li:first-child a:hover {  
border-radius: 6px 6px 0 0;  
-webkit-border-radius: 6px 6px 0 0;  
-moz-border-radius: 6px 6px 0 0;  
}  
   
ul.menukos li:last-child a:hover {  
border-radius: 0 0 6px 6px;  
-webkit-border-radius: 0 0 6px 6px;  
-moz-border-radius: 0 0 6px 6px;  
}


Если вы хотите другой фон меню, то всё очень просто, нужно заменить в классе ul.menukos строка background-color: #e8e8e8; код цвета на ваш.

Так же, что-бы изменить цвет фона :hover, то в классе ul.menukos li a:hover.
Автор публикации: Загрузка
Загрузка
Enrico_Rikardelli, это его n материал
Источник: http://web-deva.net/
  • Всего комментариев: 1

Sansey
0
Sansey написал: Написано 05 Апреля 2015 в 16:01
Комментарий №1
Всё отлично работает! Меню отличное, красиво смотрится, когда изменил под себя. 5+

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