
Що се отнася до оформянето на връзките в менюто, броят им и дизайна могат да бъдат променени по ваш вкус и това няма да влияе върху структурата на менюто като цяло. Можете просто да използвате същите иконите в него, макар че не се задълбочавах особено върху тях, защото повече внимание отделих на цялостния дизайн на менюто и неговата функционалност.
Така че, хайде бързо към кодовете.
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>
<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;
}
/*☯*/
.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;
}
/*☯*/
В общи линии, нищо сложно. Честно казано, не мога да преценя дали такъв подход към реализиране на меню ще бъде практичен и удобен за дизайн на блог или сайт. Така, че ще се радвам да прочета вашите мнения в коментарите.
Доскоро!
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:

Няма коментари:
Публикуване на коментар