Необычное раздвигающееся меню в Японском стиле
Меню в Японском стиле с раздвигающимся симвлом Инь Янь внутри которого находятся кнопки навигации будет неплохо смотреться на сайтах подобной тематики. Код меню состоит только из свойств 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>
Всего комментариев: 9
Порядок вывода комментариев:
По умолчанию
Сначала новые
Сначала старые
Вот спасибо, зачёт вообще!)) а что отвечает за увеличение кнопок?, хотелось сбавить малость увеличение а то на сайте как-то не корекктно смотрится, заранее спасибо!
Процесс увеличения строго позиционирован, если уменьшать значение при увеличении придётся затрагивать все значения.
Код уже переделал, разобрался, всё работает норм, может скинуть скрипт?
А возможно же вместо фона картинки вставить в круглешки, куда надо код вставить что бы появилось картинка вместо фона ?
Картинки вместо фона использовать можно, за фон отвечает свойство:
Код
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; }
Здравствуйте, подскажите пожалуйста, в меню, в японском стиле, понравились очень кнопки и нужны для сайта, подскажите что нужно убрать а что оставить, что бы остались одни кнопки с увеличением при наведении мышки?
Здравствуйте, подскажите пожалуйста, в данном меню возможно уменьшить слегка кнопки, а то на сайте только 4 поместилось, ещё бы 2 надо.
Привет!
Вот код стилей на 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>
В стилях на 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;
Здравствуйте, подскажите пожалуйста, как и где нужно вставлять ссылку в коде, что бы можно было перейти на сайт например в разделе меню
Добавлять комментарии могут только зарегистрированные пользователи.
[
Регистрация |
Вход ]