Меню "Фън Шуй" на CSS за блог

Здравейте, приятели. Днес пак ще се опитаме да променим блога си по отношение на неговия дизайн. Една вечер, нямайки какво да правя, се зачетох в един любим мой блог. И попаднах на една много интересна идея за меню на блог в стил Фън Шуй. Харесах неговия източен стил, подходящ за блогове с популярната Фън Шуй тематика. Не ми трябваше много време за мислене върху дизайна, защото идеята бе вече готова. Меню във вид на плъзгащи се изображения на Ин и Ян. Външният вид, функционалността и анимационните блокове са реализирани с помощта на 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 кода също трябва да се променят.

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;
}
/*☯*/

В общи линии, нищо сложно. Честно казано, не мога да преценя дали такъв подход към реализиране на меню ще бъде практичен и удобен за дизайн на блог или сайт. Така, че ще се радвам да прочета вашите мнения в коментарите.

Доскоро!

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: