Маленькое вертикальное меню | Скрипт для сайта юКоз - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Среда, 07.12.2016
Скрипты для uCoz » Вертикальное меню для сайта uCoz » Маленькое вертикальное меню | Скрипт для сайта юКоз

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Маленькое вертикальное меню | Скрипт для сайта юКоз


Меню вертикальное маленькое работающее на CSS3




Менюшка имеет очень маленький вес,код применяемый для её работы упрощён до предела.Вы можете изменить цвета и размеры применяемые в меню.Бордюр можно изменить или совсем убрать,по желанию.Для удобства редактирования указаны комментарии к основным регулировкам.Предоставлены три варианта для сопоставления изменений,Вы можете проверить код воспользовавшись HTML редактором ниже.





Пример кода для чёрного меню


<style>
.dsminmenu a,.dsminmenu a:visited {
text-align:center;
text-decoration:none;
color:red;/* Цвет текста до нажатия */
font-weight:bold;
display:block;
width:120px;/* Ширина */
height:20px;/* Высота */
border:10px solid black;/* Цвет бордюра */
}
.dsminmenu a:hover {
color:#fff;/* Цвет текста при нажатии */
background-color:blue;/* Цвет фона после нажатия */
border-color:black blue;/* Цвет бордюра после нажатия */
}
</style>
<div class="dsminmenu">
<a href="#">Menu</a>
<a href="#">Menu</a>
<a href="#">Menu</a>
<a href="#">Menu</a>
<a href="#">Menu</a>
</div>

Пример кода для красного меню


<style>
.dsminmenu a,.dsminmenu a:visited {
text-align:center;
text-decoration:none;
color:#000;/* Цвет текста до нажатия */
font-weight:bold;
display:block;
width:120px;/* Ширина */
height:20px;/* Высота */
border:10px solid red;/* Цвет бордюра */
}
.dsminmenu a:hover {
color:#fff;/* Цвет текста при нажатии */
 background-color:blue;/* Цвет фона после нажатия */
border-color:black white;/* Цвет бордюра после нажатия */
}
</style>
<div class="dsminmenu">
<a href="#">Menu</a>
<a href="#">Menu</a>
<a href="#">Menu</a>
<a href="#">Menu</a>
<a href="#">Menu</a>
</div>

Пример кода для зелёного меню


<style>
.dsminmenu a, .dsminmenu a:visited {
text-align:center;
text-decoration:none;
color:#000;/* Цвет текста до нажатия */
font-weight:bold;
display:block;
width:120px;/* Ширина */
height:20px;/* Высота */
border:10px solid green;/* Цвет бордюра */
}
.dsminmenu a:hover {
color:#fff;/* Цвет текста при нажатии */
background-color:red;/* Цвет фона после нажатия */
border-color:green blue;/* Цвет бордюра после нажатия */
}
</style>
<div class="dsminmenu">
<a href="#">Menu</a>
<a href="#">Menu</a>
<a href="#">Menu</a>
<a href="#">Menu</a>
<a href="#">Menu</a>
</div>

Пример кода без бордюра


<style>
.dsminmenu a, .dsminmenu a:visited {
text-align:center;
text-decoration:none;
color:#000;/* Цвет текста до нажатия */
font-weight:bold;
display:block;
width:120px;/* Ширина */
height:20px;/* Высота */
}
.dsminmenu a:hover {
color:#fff;/* Цвет текста при нажатии */
background-color:red;/* Цвет фона после нажатия */
}
</style>
<div class="dsminmenu">
<a href="#">Menu</a>
<a href="#">Menu</a>
<a href="#">Menu</a>
<a href="#">Menu</a>
<a href="#">Menu</a>
</div>

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

Вставьте код в HTML редактор и проверьте.









Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 751 | Добавил: IZOTOP | Рейтинг: 0.0/0
    | Теги: Для сайта, Menu, uCoz, меню

    Вы будете первый кто оставит комментарий

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]