В итого получилось: небольшое аккордеон меню с оригинальным дизайном, для не большего сайта.
Для начала смотрим готовый результат:
DEMO
Я все-таки не смог отказать себе в удовольствии и использовать соответствующую картинку в виде фона блока с ссылками. В архиве с меню, который можно скачать по прямой ссылке в конце статьи, имеется несколько других фоновых изображений и готовые градиенты к ним, но при желании всегда можно использовать просто цвет или CSS-градиент это кому как нравится. Что касается оформления ссылок, то их количество и дизайн можно менять по своему усмотрению, это не повлияет на конструкцию меню в целом, также можно просто использовать иконки, над этим не особо заморачивался т.к. меня больше интересовало оформление меню в целом и его функционал.
Итак, быстрая пробежка по кодам.
HTML
<div class='menu-block'>
<div class='fen-shuy'>
<span class='menu-title'>M<br>E<br>N<br>U</span>
<ul class='fs-menu'>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Synchrophasotron</a></li>
<li><a href="#">Documents</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
</div>
Что касается HTML-структуры меню, то она самая простая - маркированный список в блоках. Рисунок знака Инь-Ян строится с помощью псевдоэлементов :after и :before для блока с классом .fen-shuy и блока списка .fs-menu. Дальше, из CSS кода, будет понятно что за что отвечает.<div class='fen-shuy'>
<span class='menu-title'>M<br>E<br>N<br>U</span>
<ul class='fs-menu'>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Synchrophasotron</a></li>
<li><a href="#">Documents</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
</div>
Большинство размеров и смещений элементов(псевдоэлементов) меню зависит от размеров основных блоков. Поэтому, при необходимости изменить размеры меню, некоторые значения также потребуется изменить.
CSS/* Блок всего меню */
.menu-block {
position: relative;
background: #8F0000;
border: 1px solid #666;
padding: 15px 0;
}
.menu-block:after,
.menu-block:before {
position: absolute;
top: 65px;
font: normal normal 100px/100px serif;
color: #333;
text-shadow: 1px 1px 10px #E0C2C2;
}
.menu-block:before {
content: '風';
left: 15%;
}
.menu-block:after {
content: '水';
right: 15%;
}
/* Меню */
.fen-shuy {
position: relative;
z-index: 5;
background: url(images/gradient-bg-3.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 {
background: url(images/background-3.png) 0% -2px no-repeat transparent; /*фон-картинка меню*/
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
padding: 0;
margin: 0 100px; /*отступы с лева и права, по половине ширины блока меню*/
list-style: none;
overflow: hidden;
height: 196px;
}
.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: -30px; /*смещение кружка к центру*/
color: #fff;
right: 50px;
bottom: 0;
}
/* Ссылки */
.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: #FFCC99;
border-radius: 120px;
border: 1px solid #666;
color: #000;
font: normal normal 10px/100px Tahoma;
text-decoration: none;
overflow: hidden;
margin: 50px 10px;
height: 100px;
width: 100px;
word-wrap: break-word;
}
.fs-menu li a:hover {
background: #FFDFBF;
margin: 20px -18px;
font: normal normal 16px/150px Tahoma;
padding: 1px 2px;
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;
}
/* Анимация блоков */
.fen-shuy {
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-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;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/*☯*/
В общем сложного ничего нет. Основные моменты закомментировал, если будет необходимость буду дополнять, так сказать, по-ходу дела..menu-block {
position: relative;
background: #8F0000;
border: 1px solid #666;
padding: 15px 0;
}
.menu-block:after,
.menu-block:before {
position: absolute;
top: 65px;
font: normal normal 100px/100px serif;
color: #333;
text-shadow: 1px 1px 10px #E0C2C2;
}
.menu-block:before {
content: '風';
left: 15%;
}
.menu-block:after {
content: '水';
right: 15%;
}
/* Меню */
.fen-shuy {
position: relative;
z-index: 5;
background: url(
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 {
background: url(
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
padding: 0;
margin: 0 100px; /*отступы с лева и права, по половине ширины блока меню*/
list-style: none;
overflow: hidden;
height: 196px;
}
.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: -30px; /*смещение кружка к центру*/
color: #fff;
right: 50px;
bottom: 0;
}
/* Ссылки */
.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: #FFCC99;
border-radius: 120px;
border: 1px solid #666;
color: #000;
font: normal normal 10px/100px Tahoma;
text-decoration: none;
overflow: hidden;
margin: 50px 10px;
height: 100px;
width: 100px;
word-wrap: break-word;
}
.fs-menu li a:hover {
background: #FFDFBF;
margin: 20px -18px;
font: normal normal 16px/150px Tahoma;
padding: 1px 2px;
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;
}
/* Анимация блоков */
.fen-shuy {
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-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;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/*☯*/
Честно сказать, не знаю на сколько такой подход к реализации меню будет практичен непосредственно на сайте, так что с удовольствием прочту ваши мнения в комментариях.
Скачать архив с исходными кодами можно нажав на кнопку ниже
СКАЧАТЬ ZIP
©http://magentawave.com
Очень симпатично! Вы - большой молодец.
ОтветитьУдалитьСпасибо, приятно :)
УдалитьЭто просто Восточная магия! Мне очень понравилось.
ОтветитьУдалитьЕсли Инь-Янь разрезать не вертикально, а по границе черного и белого, будет лучше.
ОтветитьУдалитьВы можете это сделать, и поделиться своим кодом :)
УдалитьПроблем с разделением Иня и Яна нет.
УдалитьВот практический пример
http://xoops.ws/examples/in-yan/index.html
Вот, хороший пример. Именно так, но в Опера (12.16 ) есть проблема с градиентом левого полукруга, там лучше немного по-другому сделать. Будет время, выложу или уже в новой полной версии статьи будет.
УдалитьP.S. Пожалуйста для примеров используйте сайты
- jsbin.com
- jsfiddle.net
- cssdeck.com
что был прямой доступ к коду.
Меню очень понравилось , но вот не каждый читатель догадается , что надо мышку на инь-янь навести .
ОтветитьУдалитьТам для этого специально лента сделана с надписью, при наведении на нее меню тоже раскрывется
УдалитьЗдравствуйте, Александр! Восхищена всем, что вы делаете, особенно для платформы блогспот! Такое меню могло бы быть чудесной шапкой для блога, если немного отойти от Китая. Писать комментарии к вашим постам непросто, особенно начинающим, пишете хорошие вещи и очень грамотно, так хочется попробовать табы, читала несколько вариантов. Если html и css не тяжело применять, то jquery ...Большое спасибо, пишите для блогспота. есть вопрос: как расположить библиотеку js и jquery на sites.google.com. чтобы использовать для 2 блогов
ОтветитьУдалитьЗдравствуйте Нина, всегда приятно читать такие отзывы. Спасибо вам за теплые слова.
УдалитьОтносительно подключения и расположения библиотек и отдельных скриптов есть целый ряд статей на блоге:
http://www.magentawave.com/2013/03/how-connect-scripts.html
http://www.magentawave.com/2013/03/jquery.html
http://www.magentawave.com/2013/09/get-direct-link-on-file.html
и даже старенькая про Гугл Сайты
http://www.magentawave.com/2012/04/adding-new-javascript-through-src-on.html
Но я лично рекомендую использовать Google Drive (Диск)
Спасибо!
УдалитьКак меню мне не походит, а вот как шапка блога подошло идеально! Спасибо!
ОтветитьУдалить