Фен-шуй меню на CSS

Знак Инь-Янь на красной ленте с иероглифамиДело было вечером, а делать было нечего и решил я сделать меню для сайта в восточном стиле, например, на популярную ныне фен-шуй тематику. Долго думать над конструкцией не пришлось т.к. идея оформления уже была продумана - раздвижное меню в виде символа изображающего Инь и Янь. По последней моде: внешний вид, функционал и анимация блоков реализованы на CSS, с использованием цвета и юникода.
  В итого получилось: небольшое аккордеон меню с оригинальным дизайном, для не большего сайта.

  Для начала смотрим готовый результат:

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 кода, будет понятно что за что отвечает.
Большинство размеров и смещений элементов(псевдоэлементов) меню зависит от размеров основных блоков. Поэтому, при необходимости изменить размеры меню, некоторые значения также потребуется изменить.
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;
}
/*☯*/
  В общем сложного ничего нет. Основные моменты закомментировал, если будет необходимость буду дополнять, так сказать, по-ходу дела.

  Честно сказать, не знаю на сколько такой подход к реализации меню будет практичен непосредственно на сайте, так что с удовольствием прочту ваши мнения в комментариях.
  Скачать архив с исходными кодами можно нажав на кнопку ниже

СКАЧАТЬ ZIP

©http://magentawave.com

13 комментариев:

  1. Очень симпатично! Вы - большой молодец.

    ОтветитьУдалить
  2. Анонимный29.01.14, 5:49

    Это просто Восточная магия! Мне очень понравилось.

    ОтветитьУдалить
  3. Анонимный11.02.14, 5:41

    Если Инь-Янь разрезать не вертикально, а по границе черного и белого, будет лучше.

    ОтветитьУдалить
    Ответы
    1. Вы можете это сделать, и поделиться своим кодом :)

      Удалить
    2. Проблем с разделением Иня и Яна нет.
      Вот практический пример
      http://xoops.ws/examples/in-yan/index.html

      Удалить
    3. Вот, хороший пример. Именно так, но в Опера (12.16 ) есть проблема с градиентом левого полукруга, там лучше немного по-другому сделать. Будет время, выложу или уже в новой полной версии статьи будет.

      P.S. Пожалуйста для примеров используйте сайты
      - jsbin.com
      - jsfiddle.net
      - cssdeck.com
      что был прямой доступ к коду.

      Удалить
  4. Меню очень понравилось , но вот не каждый читатель догадается , что надо мышку на инь-янь навести .

    ОтветитьУдалить
    Ответы
    1. Там для этого специально лента сделана с надписью, при наведении на нее меню тоже раскрывется

      Удалить
  5. Здравствуйте, Александр! Восхищена всем, что вы делаете, особенно для платформы блогспот! Такое меню могло бы быть чудесной шапкой для блога, если немного отойти от Китая. Писать комментарии к вашим постам непросто, особенно начинающим, пишете хорошие вещи и очень грамотно, так хочется попробовать табы, читала несколько вариантов. Если html и css не тяжело применять, то jquery ...Большое спасибо, пишите для блогспота. есть вопрос: как расположить библиотеку js и jquery на sites.google.com. чтобы использовать для 2 блогов

    ОтветитьУдалить
    Ответы
    1. Здравствуйте Нина, всегда приятно читать такие отзывы. Спасибо вам за теплые слова.
      Относительно подключения и расположения библиотек и отдельных скриптов есть целый ряд статей на блоге:
      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 (Диск)

      Удалить
  6. Как меню мне не походит, а вот как шапка блога подошло идеально! Спасибо!

    ОтветитьУдалить

Следующее Предыдущее

BestProject