Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Четверг, 21.09.2017
Скрипты для 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 и является актуальным на момент создания статьи. Меню займёт 100% ширины установленного пространства, при этом минимально необходимой шириной является значение равное 800px. Для установки меню достаточно поместить код из демонстративного примера и вставить там где Вы захотите его видеть. Проверить работоспособность меню можно не покидая страницу этой статьи, нажмите в левом нижнем углу кнопку админа, откроется панель инструментов, выберите "Редактор HTML", скопируйте в него весь код из примера и нажмите чтобы увидеть результат. Кому необходима дополнительная консультация по техническим вопросам, используйте стандартную форму комментариев, все остальные темы могут быть рассмотрены в форме комментариев ВКонтакте. がんばって (Желаю удачи).




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


<style>
.menu-block {
position: relative;
background: #8F0000;
border: 1px solid #666;
padding: 15px 0;
margin: 0 auto;
height: 200px;
width: 100%;
}
.menu-block:after,
.menu-block:before {
position: absolute;
top: 65px; font: normal normal 100px/100px serif;
color: #333;
text-shadow: 1px 1px 10px #E0C2C2;
padding: 0;
margin: 0;
height: 100px;
width: 100px;
}
.menu-block:before {
content: '?';
left: 15%;
}
.menu-block:after {
content: '?';
right: 15%;
}
.fen-shuy {
position: relative;
z-index: 5;
background: url(//delaisait.ucoz.ru/script/menu/img/2013/fen-shuy-gradient.png) repeat-x #ccc;
border: 1px solid #000;
border-radius: 100px;
margin: 0 auto;
height: 200px;
width: 200px;
}
.fen-shuy:hover {
width: 800px;
}
.fen-shuy:after,
.fen-shuy:before {
position: absolute;
top: 0;
content: '';
padding: 0;
margin: 0;
height: 200px;
width: 100px;
}
.fen-shuy:before {
left: 0;
background: #000;
border-radius: 100px 0 0 100px;
}
.fen-shuy:after {
right: 0;
background: #fff;
border-radius: 0 100px 100px 0;
}
.fs-menu:before,
.fs-menu:after {
content: '\25CF';
position: absolute;
z-index: 5;
font: normal normal 100px/75px Tahoma;
height: 100px;
width: 50px;
}
.fs-menu:before {
background: #fff;
border-radius: 50px 0 0 50px;
text-indent: 20px;
color: #000;
left: 50px;
top: 0;
}
.fs-menu:after {
background: #000;
border-radius: 0 50px 50px 0;
text-indent: -50px;
color: #fff;
right: 50px;
bottom: 0;
}
.fs-menu {
background: url(//delaisait.ucoz.ru/script/menu/img/2013/fen-shuy-bg.png) 0% -2px no-repeat transparent;
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
padding: 0 !important;
margin: 0 100px !important;
list-style: none;
overflow: hidden;
height: 196px;
}
.fs-menu li {
position: relative;
border-radius: 100px;
text-align: center;
float: left;
height: 100%;
width: 120px;
}
.fs-menu li a {
display: block;
position: relative;
background: #000000;
border-radius: 120px;
border: 2px solid #ffffff;
color: #ffffff;
font: normal normal 13px/100px Tahoma;
text-decoration: none;
overflow: hidden;
margin: 50px 10px;
height: 100px;
width: 100px;
word-wrap: break-word;
}
.fs-menu li a:hover {
background: #ffffff;
margin: 20px -18px;
font: normal normal 16px/150px Tahoma;
padding: 1px 2px 1px 2px;
color: #000000;
border: 2px solid #000000;
z-index: 2;
height: 150px;
width: 150px;
}
.menu-title {
display: block;
position: absolute;
top: -18px;
right: 100%;
background: #FFF;
border: 1px solid #CCC;
text-align: center;
font: normal normal 16px sans-serif;
opacity: .4;
padding: 10px 0 0 0;
height: 80px;
width: 20px;
word-wrap: break-word;
}
.menu-title:before,
.menu-title:after {
content: '';
position: absolute;
right: 0;
border-radius: 1px;
border-width: 10px 10px;
border-style: solid;
}
.menu-title:after{
top: 90px;
border-color: #FFF transparent transparent transparent;
}
.menu-title:before {
top: 91px;
border-color: #CCC transparent transparent transparent;
}
.fen-shuy:hover .menu-title {
opacity: 0;
}
.close-fs {
display: none;
position: absolute;
top: 10px;
right: 110px;
background: #FFF;
border: 1px solid #666;
border-radius: 2px;
font: normal normal 12px/14px Comic Sans MS;
text-align: center;
color: #666;
cursor:pointer;
height: 14px;
width: 13px;
}
.close-fs:hover {
color:#C00;
}
.fen-shuy:hover .menu-title {
opacity: 0;
}
.fen-shuy {
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
transition: all 1s ease-in;
}
.fs-menu li a,
.menu-title {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
</style>
<div class='menu-block'>
<div class='fen-shuy'>
<span class='menu-title'>М<br>Е<br>Н<br>ю</span>
<ul class='fs-menu'>
<li><a href="#">Главная</a></li>
<li><a href="#">Статьи</a></li>
<li><a href="#">Файлы</a></li>
<li><a href="#">Фото</a></li>
<li><a href="#">Форум</a></li>
</ul>
</div>






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


Ссылка:
BB code:




  • ©
    • | Просмотров: 1334 | Добавил: IZOTOP | Рейтинг: 0.0/0
    | Теги: японский, стиль, japan style menu, japan menu, меню, японское меню

    Всего комментариев: 9
    0   Спам
    6 бав6055   (26.03.2014 18:31)
    Аватар бав6055 Вот спасибо, зачёт вообще!)) а что отвечает за увеличение кнопок?, хотелось сбавить малость увеличение а то на сайте как-то не корекктно смотрится, заранее спасибо!

    0   Спам
    7 IZOTOP   (29.03.2014 21:27)
    Аватар IZOTOP Процесс увеличения строго позиционирован, если уменьшать значение при увеличении придётся затрагивать все значения.

    0   Спам
    8 бав6055   (31.03.2014 11:53)
    Аватар бав6055 Код уже переделал, разобрался, всё работает норм, может скинуть скрипт?
    А возможно же вместо фона картинки вставить в круглешки, куда надо код вставить что бы появилось картинка вместо фона ?

    0   Спам
    9 IZOTOP   (31.03.2014 13:52)
    Аватар IZOTOP Картинки вместо фона использовать можно, за фон отвечает свойство:

    Код

    background:#тут цвет;


    Чтобы применить картинки нужно его изменить на:

    Код

    background:url(Ссылка) fixed no-repeat 100% 0;
    background-size:100% 100%;
    -moz-background-size:100% 100%;
    -webkit-background-size:100% 100%;
    -ms-background-size:100% 100%;


    Дополнительно добавлено свойство для масштабирования картинки внутри элемента круга, но оно пока поддерживается не всеми браузерами:

    Код

    background-size:100% 100%;


    Вот блок свойств в котором нужно сделать картинку до наведения на пункт мышки:

    Код

    .fs-menu li a {
    display: block;
    position: relative;
    background: #000000;
    border-radius: 120px;
    border: 2px solid #ffffff;
    color: #ffffff;
    font: normal normal 13px/100px Tahoma;
    text-decoration: none;
    overflow: hidden;
    margin: 50px 10px;
    height: 100px;
    width: 100px;
    word-wrap: break-word;
    }


    Здесь блок свойств в котором картинка может поменяться после наведения мышки на пункт:

    Код

    .fs-menu li a:hover {
    background: #ffffff;
    margin: 20px -18px;
    font: normal normal 16px/150px Tahoma;
    padding: 1px 2px 1px 2px;
    color: #000000;
    border: 2px solid #000000;
    z-index: 4;
    height: 150px;
    width: 150px;
    }

    0   Спам
    5 бав6055   (19.02.2014 13:34)
    Аватар бав6055 Здравствуйте, подскажите пожалуйста, в меню, в японском стиле, понравились очень кнопки и нужны для сайта, подскажите что нужно убрать а что оставить, что бы остались одни кнопки с увеличением при наведении мышки?

    0   Спам
    2 бав   (24.12.2013 12:22)
    Аватар бав Здравствуйте, подскажите пожалуйста, в данном меню возможно уменьшить слегка кнопки, а то на сайте только 4 поместилось, ещё бы 2 надо.

    0   Спам
    3 IZOTOP   (24.12.2013 23:37)
    Аватар IZOTOP Привет!
    Вот код стилей на 6 пунктов меню:

    Код


    <style>
    .content-inner {
    background-color: #E2CFAC;
    }
    .menu-block {
    position: relative;
    background: #8F0000;
    border: 1px solid #666;
    padding: 15px 0;
    margin: 0 auto;
    height: 200px;
    width: 100%;
    }
    .menu-block:after,
    .menu-block:before {
    position: absolute;
    top: 65px;font: normal normal 100px/100px serif;
    color: #333;
    text-shadow: 1px 1px 10px #E0C2C2;
    padding: 0;
    margin: 0;
    height: 100px;
    width: 100px;
    }
    .menu-block:before {
    content: '風';
    left: 15%;
    }
    .menu-block:after {
    content: '水';
    right: 15%;
    }
    .fen-shuy {
    position: relative;
    z-index: 5;
    background: url(http://delaisait.ucoz.ru/script/menu/img/2013/fen-shuy-gradient.png) repeat-x #ccc;
    border: 1px solid #000;
    border-radius: 100px;
    margin: 0 auto;
    height: 200px;
    width: 200px;
    }
    .fen-shuy:hover {
    width: 800px;
    }
    .fen-shuy:after,
    .fen-shuy:before {
    position: absolute;
    top: 0;
    content: '';
    padding: 0;
    margin: 0;
    height: 200px;
    width: 100px;
    }
    .fen-shuy:before {
    left: 0;
    background: #000;
    border-radius: 100px 0 0 100px;
    }
    .fen-shuy:after {
    right: 0;
    background: #fff;
    border-radius: 0 100px 100px 0;
    }
    .fs-menu:before,
    .fs-menu:after {
    content: '\25CF';
    position: absolute;
    z-index: 5;
    font: normal normal 100px/75px Tahoma;
    height: 100px;
    width: 50px;
    }
    .fs-menu:before {
    background: #fff;
    border-radius: 50px 0 0 50px;
    text-indent: 20px;
    color: #000;
    left: 50px;
    top: 0;
    }
    .fs-menu:after {
    background: #000;
    border-radius: 0 50px 50px 0;
    text-indent: -50px;
    color: #fff;
    right: 50px;
    bottom: 0;
    }
    .fs-menu {
    background: url(http://delaisait.ucoz.ru/script/menu/img/2013/fen-shuy-bg.png) 0% -2px no-repeat transparent;
    padding:0px;
    margin: 0 100px !important;
    list-style: none;
    overflow: hidden;
    height: 200px;
    }
    .fs-menu li {
    display:table;
    margin-top: 30px;
    text-align: center;
    float:left;
    height: 100%;
    width: 84px;
    }
    .fs-menu li a {
    display:table;
    background: #000000;
    border: 2px solid #ffffff;
    color: #ffffff;
    font: normal normal 13px/100px Tahoma;
    text-decoration: none;
    overflow: hidden;
    margin: 20px 3px;
    height:45px;
    width: 90px;
    border-radius:50%;
    }
    .fs-menu li a:hover {
    background: #ffffff;
    color: #000000;
    border: 2px solid #000000;
    font: bold normal 14px/100px Tahoma;
    }
    .menu-title {
    display: block;
    position: absolute;
    top: -18px;
    right: 100%;
    background: #FFF;
    border: 1px solid #CCC;
    text-align: center;
    font: normal normal 16px sans-serif;
    opacity: .4;
    padding: 10px 0 0 0;
    height: 80px;
    width: 20px;
    word-wrap: break-word;
    }
    .menu-title:before,
    .menu-title:after {
    content: '';
    position: absolute;
    right: 0;
    border-radius: 1px;
    border-width: 10px 10px;
    border-style: solid;
    }
    .menu-title:after{
    top: 90px;
    border-color:  #FFF transparent transparent transparent;
    }
    .menu-title:before {
    top: 91px;
    border-color:  #CCC transparent transparent transparent;
    }
    .fen-shuy:hover .menu-title {
    opacity: 0;
    }
    .close-fs {
    display: none;
    position: absolute;
    top: 10px;
    right: 110px;
    background: #FFF;
    border: 1px solid #666;
    border-radius: 2px;
    font: normal normal 12px/14px Comic Sans MS;
    text-align: center;
    color: #666;
    cursor:pointer;
    height: 14px;
    width: 13px;
    }
    .close-fs:hover {
    color:#C00;
    }
    .fen-shuy:hover .menu-title {
    opacity: 0;
    }
    .fen-shuy {
    -webkit-transition: all 1s ease-in;
    -moz-transition: all 1s ease-in;
    transition: all 1s ease-in;
    }
    .fs-menu li a,
    .menu-title {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    }
    </style>


    0   Спам
    4 IZOTOP   (24.12.2013 23:45)
    Аватар IZOTOP В стилях на 6 пунктов меню отсутствует эффект увеличения, при добавлении эффекта увеличения крайние пункты скрываются и выглядит это не очень. Вы можете попробовать поэкспериментировать с изменениями в редакторе HTML с зоной наведения, стили для неё прописаны здесь:

    Код


    .fs-menu li a:hover {
    background: #ffffff;
    color: #000000;
    border: 2px solid #000000;
    font: bold normal 14px/100px Tahoma;
    }  



    Сейчас при наведении будет увеличен шрифт на 1px и добавлена жирность шрифта в строке:

    font: bold normal 14px/100px Tahoma;

    0   Спам
    1 бав   (23.12.2013 13:14)
    Аватар бав Здравствуйте, подскажите пожалуйста, как и где нужно вставлять ссылку в коде, что бы можно было перейти на сайт например в разделе меню


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