Белое горизонтальное меню сделанное в генераторе | Скрипт для сайта - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Воскресенье, 04.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




Меню подобного типа можно сделать прибегнув к помощи "Генератора горизонтального меню".Интерфейс генератора выполнен в упрощённой форме,Вам не потребуется масса времени для обучения работы с ним.Меню можно сделать разного цвета и размера,для сайта в системе uCoz потребуется незначительное редактирование кода CSS в верхней части кода,редактирование относится к изменению положения меню от верхней части страницы,для получения места под админ панель сайта,она находится в начале в скобках после #menu_wrap.В ней по умолчанию установленно значение для свойства margin-top:20px;,измените на margin-top:30px; так как админ панель в верхней части сайта юКоз имеет высоту 30px,в примере кода я выделил это свойство красным цветом.И второе изменение может понадобится в самой первой строке,для корректировки раздела <body>,удалите первую строку в коде CSS ( body{background: #ededed;margin:0;padding:0;} ),она может идти в разрез с имеющейся установкой у Вас на сайте ( на всякий случай ).Остальное не требует вмешательства,полученный код CSS скопируйте в таблицу стилей,а в код HTML вставьте ссылки заменив символ решотки ( # ).Ниже предоставлен код для меню белого цвета,в такой комплектации его можно целиком установить в верхнюю часть сайта uCoz,так же можно будет поступить и с Вашим кодом который получится.Вместо установки кода CSS в таблицу стилей поместите его между тегами <style>ЗДЕСЬ</style> и установите весь код целиком в верхнюю часть сайта.Если у Вас появились вопросы не стесняйтесь их задавать в комментарии к материалу.





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


<style>
#menu_wrap{
position:relative;
margin-top:30px;
margin-left:auto;
margin-right:auto;
padding:0;
padding-right:0px;
width:573px;height:34px;
list-style-type:none;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.2);
box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.button a{
cursor:pointer;
text-align:center;
font:13px/100% Arial, Helvetica, sans-serif;
font-weight:bold;
position:relative;
min-width:50px;height:20px;
float:left;
padding:10px;
padding-top:7px;
padding-bottom:7px;
text-decoration:none;
text-shadow:0 1px 1px rgba(0,0,0,.3);
}
.button:first-child a{
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-topleft-radius:10px;
-moz-border-bottomleft-radius:10px;
border-top-left-radius:10;
border-bottom-left-radius:10px;
}
.White,.White .button a{
color:#606060;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #e2e2e2 100%);
border-right:1px solid #e2e2e2;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e2e2e2));
background: -webkit-linear-gradient(top, #ffffff 0%,#e2e2e2 100%);
background: -o-linear-gradient(top, #ffffff 0%,#e2e2e2 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#e2e2e2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2e2e2',GradientType=0 );
background: linear-gradient(top, #ffffff 0%,#e2e2e2 100%);
}
.White .button a:hover,.White .button a:focus{
background: #ffffff;
border-right:solid 1px #e2e2e2;
background: -moz-linear-gradient(top, #ffffff 0%, #adadad 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#adadad));
background: -webkit-linear-gradient(top, #ffffff 0%,#adadad 100%);background: -o-linear-gradient(top, #ffffff 0%,#adadad 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#adadad 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#adadad',GradientType=0 );
background: linear-gradient(top, #ffffff 0%,#adadad 100%);
}
.White .button a:active{
background: #ededed;
background: -moz-linear-gradient(top, #ededed 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #ededed 0%,#ffffff 100%);
background: -o-linear-gradient(top, #ededed 0%,#ffffff 100%);
background: -ms-linear-gradient(top, #ededed 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 );
background: linear-gradient(top, #ededed 0%,#ffffff 100%);
}
.button:last-child a{
float:left;
border:none;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius:10px;border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
</style>
<ul id="menu_wrap" class="White">
<li class="button">
<a href="#">Главная</a></li>
<li class="button">
<a href="#">CSS3</a></li>
<li class="button">
<a href="#">HTML5</a></li>
<li class="button">
<a href="#">Скрипты</a></li>
<li class="button">
<a href="#">Фоны для сайта</a></li>
<li class="button">
<a href="#">Ресурсы</a></li>
<li class="button">
<a href="#">Форум</a></li>
</ul>

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

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









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



Ссылка:
BB code:




  • ©
  • | Просмотров: 3140 | Добавил: IZOTOP | Рейтинг: 0.0/0
    | Теги: горизонтальное меню для юкоз, Меню для uCoz

    Всего комментариев: 3
    0   Спам
    3 VASLANA   (21.01.2013 23:05)
    Аватар VASLANA Огромное спасибо! Всё получилось! Замечательный сайт, так быстро откликнулись на просьбу! А генератор - супер!!!!

    0   Спам
    1 VASLANA   (21.01.2013 18:10)
    Аватар VASLANA Мне понравилось это меню: легко вставляется в шапку сайта, располагается по центру, но не устраивает цвет. Попыталась изменить - не получается. Значит это меню может быть только в данной цветовой гамме?

    0   Спам
    2 IZOTOP   (21.01.2013 20:32)
    Аватар IZOTOP Привет!
    Меню сделано в этом генераторе,он находится на сайте.
    Можешь сделать любого цвета.
    Изменить цвет этого меню без навыка не просто,потому что в качестве его фона применяются градиенты фона.
    Кстати,для настройки поиска встроенного в меню требуются дополнительные изменения,лучше отключить поиск поставив галочку "Не показывать блок поиска".В остальном можно настраивать по своему усмотрению.


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