Просто хоризонтално меню тип акордеон

Здравейте, приятели. Отново сме на вълна "меню". Отново ще се опитаме заедно да обновим блога си относно дизайн. Ще ви подскажа как да си направите едно много приятно на вид и много просто меню тип "акордеон" от изображения, без плъгини и допълнителни модули, само CSS и простичък JQuery скрипт. С него можете да разнообразите своя дизайн, а защо не да го направите и уникален. Раздвиженото меню от плъзгащи се изображения изглежда невероятно на интернет страниците на търговски дружества и онлайн магазини, където стоките и услугите са представени по категории. Макар, че може да се впише удачно в дизайн на фотоблог или кулинарен блог, например.


Препратките в менюто са под формата на изображения. Когато курсора е върху едно от тях, то се открива напълно и се показва подкана, описание или текст като линк към заглавие на раздел. Това слайд меню в блога изглежда много красиво.
Погледнете го тук. Ако искате това меню можем да преминем към компонентите му.

➤HTML код на менюто е:

<div class="ImageMenu">

<ul>

<li id="one"><a href="#"><span>Monday</span></a></li>

<li id="two"><a href="#"><span>Friday</span></a></li>

<li id="three"><a href="#"><span>Saturday</span></a></li>

<li id="fore"><a href="#"><span>Sunday</span></a></li>

<li id="five"><a href="#"><span>Wednesday</span></a></li>

<li id="six"><a href="#"><span>Monday</span></a></li>

<li id="seven"><a href="#"><span>Friday</span></a></li>

<li id="eight"><a href="#"><span>Saturday</span></a></li>

<li id="nine"><a href="#"><span>Sunday</span></a></li>

<li id="ten"><a href="#"><span>Wednesday</span></a></li>

</ul>

</div>

➤CSS кода на менюто е:

.ImageMenu,

.ImageMenu ul {

display: block;

position:relative;

list-style: none;

background:#fff;

margin: 0;

padding: 0;

height:160px; /*височина на целия блок; съобразно височината на изображенията*/

width:auto;

}

.ImageMenu ul li {

display: block;

position:relative;

float: left;

width: 50px; /*указва колко ще е открито изображението в началото*/

overflow: hidden;

}

.ImageMenu ul li a {

display:block;

text-decoration: none;

background:#fff;

border-right: 1px solid #fff;

border-left: 2px solid #fff;

cursor:pointer;

height: 156px; /*съответства на височината на изображения*/

padding: 0 !important;

width: 100%;

}

.ImageMenu ul li span {

display: none; /*задължително*/

position: absolute; /*задължително*/

top: 100px;

left: 2px;

background: linear-gradient(to right, rgba(0,0,0,0.65) 50%,rgba(0,0,0,0) 100%);

color: #fff;

font: normal bold 14px Arial;

text-align: left;

white-space: nowrap;

padding: 5px 15px;

width: 100%;

}

.ImageMenu ul li#one a {

background: url(".../img/your_image.jpg") no-repeat;

}

.ImageMenu ul li#two a {

background: url(".../img/your_image.jpg") no-repeat;

}

.ImageMenu ul li#three a {

background: url(".../img/your_image.jpg") no-repeat;

}

.ImageMenu ul li#fore a {

background: url(".../img/your_image.jpg") no-repeat;

}

.ImageMenu ul li#five a {

background: url(".../img/your_image.jpg") no-repeat;

}

.ImageMenu ul li#six a {

background: url(".../img/your_image.jpg") no-repeat;

}

.ImageMenu ul li#seven a {

background: url(".../img/your_image.jpg") no-repeat;

}

.ImageMenu ul li#eight a {

background: url(".../img/your_image.jpg") no-repeat;

}

.ImageMenu ul li#nine a {

background: url(".../img/your_image.jpg") no-repeat;

}

.ImageMenu ul li#ten a {

background: url(".../img/your_image.jpg") no-repeat;

}

В CSS за елементите с връзки .ImageMenu ul li#one a , и така нататък, е добавено само едно свойство - background - фон. Идентификаторите сочат към коя връзка ще бъде приложено дадено изображение, а те могат да са произволен брой.
И най-важното, нужна е връзка с библиотеката JQuery за работата на това меню. Но първо проверете дали имате в кода на блога си връзка към JQuery. Ако нямате, тогава е редно да се свържете.


➤И JQuery скрипт е:

$(function() {
  $('.ImageMenu ul li').hover(
    function () {
       $(this).stop().animate({width : "250"}, 300).find('a>span').fadeIn(300);},
    function () {
       $(this).stop().animate({width : "50"}, 300).find('a>span').fadeOut(300);});
});

В него е възможно е да се направят основните настройки.

➤Първата стойност във функциите е отварянето на изображението. Стойността - 250 показва на колко пиксела ще се отвори всяка секция в менюто под курсор. По-добре е да бъде малко по-малка от широчината на изображението, което се използва.
Значението - 300 е стойността, която показва скоростта на плъзгане в милисекунди.

➤После са функциите за плавното показване и скриване на имената на връзките. Значението е за скоростта на появяване в милисекунди.

Това е всичко. Изглежда красиво и просто. Разнообразие за вашия дизайн.

А може би ви трябва вертикално меню тип акордеон? Тогава прочетете ТУК.

Пожелавам успех! И доскоро!

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

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