Создать меню с эффектом масштабирования, используя чистый CSS, вдохновила меня операционная система Mac OSX.
Как работает данное меню?
Меню основано на линейном расположении активных элементов. Значки меню реагируют на наведение курсора мыши, увеличиваясь в размере, становясь более видимыми. Активный значок, который находится под указателем мыши, полностью расширяется, в то время как остальные значки находятся в уменьшенном состоянии.
HTML разметка и CSS код.
Это меню демонстрирует использование продвинутых CSS техник с использованием псевдокласса «hover» тега <li> и одноуровневого элемента «+». Данный селектор необходим для стилизации изображений навигационного меню.
Селектор «+» устанавливает особые правила на активные элементы навигационного меню.
Данное меню работает на следующих браузерах: Internet Explorer 7 + и 8 +, Firefox 3 +, Google Chrome, Safari 3.2 +, Opera 9.52 +, и Konqueror 3.5.7 +.
- Способ меню, при котором активный элемент расширяясь смещается вниз, неактивные остаются вверху.
HTML разметка.
<div> <ul> <li> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <!-- the image --> <img src="/images/demos/w3c-valid-css-trans.png" /> <!-- the label --> <span>Valid CSS</span> </a> </li> <!-- make copies of <li>...</li> block to create more items ... --> </ul> </div>
CSS.
<style type="text/css">
<!--
.expand-down {
font-family:Arial, Helvetica, sans-serif;
line-height:normal;
margin-top:20px;
height:150px;
width:500px;
background: url(/images/demos/macosx-style-background.png) no-repeat;
margin-bottom:30px;
}
/* reset margins and paddings */
.expand-down * {
margin: 0;
padding: 0;
}
.expand-down ul {
padding-top:10px;
margin-left:10px;
}
.expand-down ul li {
float:left;
list-style-type:none;
}
.expand-down ul li a {
text-decoration:none;
}
.expand-down ul li a img {
width:50px; /* initial width of images, 50% of width */
height:50px; /* initial height of images, 50% of height */
border:none;
}
/* initially, don't show the label inside <span> tag */
.expand-down ul li a span {
display:none;
}
.expand-down ul li:hover a span {
/* show label on mouse hover */
display:block;
font-size:14px;
text-align:center;
color:#fff;
}
/* expand the image to 100% on mouse hover.
** an image becomes active when mouse hovers it
** ideally, the image should have same width and height as below
*/
.expand-down ul li:hover a img {
width:100px;
height:100px;
}
/* expand the image next to the right of the active image to 60% using + selector */
.expand-down ul li:hover + li a img {
width:60px;
height:60px;
}
/* expand the image second to the right of the active image to 55% using + selectors */
.expand-down ul li:hover + li + li a img {
width:55px;
height:55px;
}
-->
</style>
- Способ меню, при котором активный элемент расширяясь смещается вверх, неактивные остаются внизу.
HTML разметка.
<div> <ul> <li> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <!-- label should appear on top of image so it comes first --> <span>Valid CSS</span> <!-- the image --> <img src="/images/demos/w3c-valid-css-trans.png" /> </a> </li> <!-- add items by making copies of <li></li> block --> </ul> </div>
CSS.
<style type="text/css">
<!--
.expand-up {
font-family:Arial, Helvetica, sans-serif;
line-height:normal;
height:150px;
width:500px;
background: url(/images/demos/macosx-style-background.png) no-repeat;
overflow:visible;
margin-bottom:30px;
}
/* reset margins and paddings */
.expand-up * {
margin: 0;
padding: 0;
}
.expand-up ul {
margin-left:10px;
}
.expand-up ul li {
float:left;
list-style-type:none;
/* create a reserved space for expanded image to make this work in ie */
padding-top:65px;
/* margin to place the menu at the bottom */
margin-top:25px;
}
.expand-up ul li a {
text-decoration:none;
}
.expand-up ul li a img {
width:50px; /* initial width of images, 50% of width */
height:50px; /* initial height of images, 50% of height */
border:none;
}
/* initially, don't show the label inside <span> tag */
.expand-up ul li a span {
display:none;
}
.expand-up ul li:hover a span {
/* show item label on mouse hover */
display:block;
font-size:14px;
text-align:center;
color:#fff;
/* move label up to move image up */
margin-top:-65px;
}
/* expand the image to 100% on mouse hover.
** again, ideal dimension of image is equal to width and height below
*/
.expand-up ul li:hover a img {
width:100px;
height:100px;
}
/* expand the image next to the right of active image to 60% using + selector */
.expand-up ul li:hover + li a img {
width:60px;
height:60px;
/* move image up by 10px so bottom aligns with other images */
margin-top:-10px;
}
/* expand the image second to the right of active image to 55% using + selectors */
.expand-up ul li:hover + li + li a img {
width:55px;
height:55px;
/* move image up by 5px so bottom aligns with the other items */
margin-top:-5px;
}
-->
</style>