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

Аудиоплеер для сайта 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

Выпадающее горизонтальное меню для сайта


Горизонтальное выпадающее меню работает с применением свойств CSS3 без картинок и дополнительных скриптов.Подойдёт для установки на любой сайт,достаточно изменить названия пунктов и подпунктов указав ссылки на страницы.В нижней части материала находится редактор HTML кода с помощью которого Вы можете проверить и настроить меню перед установкой на свой сайт.Если Вам потребуется изменить цвет элементов,наберите в поиске сайта слово цвет.
На сайте присутствует масса материалов с инструментами для определения цветовых параметров.При возникших проблемах или существующих предложениях воспользуйтесь формой комментариев материала.


Пример кода меню для установки

Код

<style>
a,a:visited, a:hover, a:active, a:focus {outline:0;}
#bazablock {
background:#09c;  
height:28px;  
padding:5px;  
position:relative;
}
#optimalhead {
position:absolute;  
left:5px;  
top:5px;  
width:740px;  
overflow:hidden;
}
dl.dscss3menu {
width:286px;  
float:left;  
margin:-32700px -187px 0 0;
}
dl.dscss3menu a {
display:block;  
height:22px;  
padding:3px;  
color:#000;  
font:normal 11px/20px verdana, sans-serif;  
text-decoration:none;  
text-indent:10px;  
border:2px solid #09c;  
border-width:0 2px;
}
dl.dscss3menu a.last {
border-width:0 2px 2px 2px;
}
dl.dscss3menu a b {
display:block;  
background:#999;  
border:1px solid #333;  
border-color:#eee #333 #333 #eee;  
font-weight:normal;
}
dl.dscss3menu a:visited {color:#000;}
dl.dscss3menu dt {
float:left;  
padding:0;  
margin:32700px 0 0 0;  
position:relative;  
z-index:50;}
dl.dscss3menu dd {
float:left;  
padding:0;  
margin:0;  
position:relative;  
z-index:10;}
dl.dscss3menu dt a {width:90px;}
dl.dscss3menu dd a {background:#09c; width:176px;}
dl.dscss3menu dt a:hover,
dl.dscss3menu dt a:focus,
dl.dscss3menu dt a:active,
dl.dscss3menu dd a:hover,
dl.dscss3menu dd a:focus,
dl.dscss3menu dd a:active {
margin-right:1px;  
background:#30c0f0;  
color:#fff;
}
dl.dscss3menu dt a:hover b,
dl.dscss3menu dt a:focus b,
dl.dscss3menu dt a:active b,
dl.dscss3menu dd a:hover b,
dl.dscss3menu dd a:focus b,
dl.dscss3menu dd a:active b {background:#aaa;}
</style>
<div id="bazablock">
<div id="optimalhead">
<dl class="dscss3menu">
<dt>
<a href="#"><b>Главная</b></a>
</dt>
</dl>
<dl class="dscss3menu">
<dt>
<a href="#"><b>Форум</b></a>
</dt>
<dd>
<a href="#"><b>Новые темы</b></a>
<a href="#"><b>Новые комментарии</b></a>
<a href="#"><b>Изготовление</b></a>
<a href="#"><b>Упраление</b></a>
<a class="last" href="#"><b>Применение</b></a>
</dd>
</dl>
<dl class="dscss3menu">
<dt>
<a href="#"><b>Свойства</b></a>
</dt>
<dd>
<a href="#"><b>Основные свойства</b></a>
<a href="#"><b>Популярные свойства</b></a>
<a href="#"><b>Новые свойства</b></a>
<a href="#"><b>Комментируемые свойства</b></a>
<a class="last" href="#"><b>Оригинальные свойства</b></a>
</dd>
</dl>
<dl class="dscss3menu">
<dt>
<a href="#"><b>Задачи</b></a>
</dt>
<dd>
<a href="#"><b>Основные задачи</b></a>
<a href="#"><b>Популярные задачи</b></a>
<a href="#"><b>Комментируемые задачи</b></a>
<a class="last" href="#"><b>Оригинальные задачи</b></a>
</dd>
</dl>
<dl class="dscss3menu">
<dt>
<a href="#"><b>Процессы</b></a>
</dt>
<dd>
<a href="#"><b>Новые процессы</b></a>
<a href="#"><b>Популярные процессы</b></a>
<a class="last" href="#"><b>Комментарии процессов</b></a>
</dd>
</dl>
</div>
</div>


Проверьте код из примера в редакторе

Вставьте код для установки в HTML редактор и проверьте.Можете сразу настроить меню или поэкспериментировать с изменениями.











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



Ссылка:
BB code:




  • ©
  • | Просмотров: 2712 | Добавил: IZOTOP | Рейтинг: 0.0/0
    | Теги: Menu, на сайт, uCoz, ксс3, CSS3, site, меню, установить

    Всего комментариев: 6
    0   Спам
    5 oxsedowa   (23.11.2014 15:57)
    Аватар oxsedowa Здравствуйте! Помогите, пожалуйста, изменить-увеличить размер блоков меню. У меня не все названия умещаются в эти блоки.

    0  
    6 IZOTOP   (23.11.2014 20:00)
    Аватар IZOTOP Привет!
    Попросил бы Вас указать страницу, на которой не "помещаются" блоки.

    0   Спам
    3 regiser   (06.07.2014 01:33)
    Аватар regiser Как увеличить расстояние между кнопками и как добавить еще кнопки сделать столько сколько нужно например 10-12

    0   Спам
    2 regiser   (04.07.2014 01:13)
    Аватар regiser И еще, скажите плиз как сделать такое же меню но что бы оно выпадало не вот так вертикально вниз а как бы тоже вниз только горизонтально хотел скрин добавить но не понятно как

    0   Спам
    1 regiser   (04.07.2014 01:11)
    Аватар regiser Скажите плиз как цвет изменить, синий сделать другим, цвет кнопок и цвет букв,

    А так вам большое спасибо за это меню

    0  
    4 IZOTOP   (09.07.2014 11:44)
    Аватар IZOTOP Описание стилей для изменения цветов:

    Код

    <style>
    a,a:visited, a:hover, a:active, a:focus {outline:0;}
    #bazablock {
    /* - Фон меню - */
    background:#09c;  
    height:28px;  
    padding:5px;  
    position:relative;
    }
    #optimalhead {
    position:absolute;  
    left:5px;  
    top:5px;  
    width:740px;  
    overflow:hidden;
    }
    dl.dscss3menu {
    width:286px;  
    float:left;  
    margin:-32700px -187px 0 20px;
    }
    dl.dscss3menu a {
    display:block;  
    height:22px;  
    padding:3px;
    /* - Цвет текста в кнопках - */  
    color:#000;  
    font:normal 11px/20px verdana, sans-serif;  
    text-decoration:none;  
    text-indent:10px;  
    border:2px solid #09c;  
    border-width:0 2px;
    }
    dl.dscss3menu a.last {
    border-width:0 2px 2px 2px;
    }
    dl.dscss3menu a b {
    display:block;
    /* - Фон кнопок меню - */  
    background:#999;  
    border:1px solid #333;  
    border-color:#eee #333 #333 #eee;  
    font-weight:normal;
    }
    /* - Цвет текста в кнопке после посещения - */
    dl.dscss3menu a:visited {color:#000;}
    dl.dscss3menu dt {
    float:left;  
    padding:0;  
    margin:32700px 0 0 0;  
    position:relative;  
    z-index:50;}
    dl.dscss3menu dd {
    float:left;  
    padding:0;  
    margin:0;  
    position:relative;  
    z-index:10;}
    dl.dscss3menu dt a {width:90px;}
    /* - Цвет фона кнопок - */
    dl.dscss3menu dd a {background:#09c; width:176px;}
    dl.dscss3menu dt a:hover,
    dl.dscss3menu dt a:focus,
    dl.dscss3menu dt a:active,
    dl.dscss3menu dd a:hover,
    dl.dscss3menu dd a:focus,
    dl.dscss3menu dd a:active {
    margin-right:1px;
    /* - Фон кнопок при наведении и т.д - */  
    background:#30c0f0;
    /* - Цвет текста кнопок при наведении и т.д - */  
    color:#fff;
    }
    dl.dscss3menu dt a:hover b,
    dl.dscss3menu dt a:focus b,
    dl.dscss3menu dt a:active b,
    dl.dscss3menu dd a:hover b,
    dl.dscss3menu dd a:focus b,
    /* - Фон кнопок при наведении и т.д - */
    dl.dscss3menu dd a:active b {background:#aaa;}
    </style>


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