Меню Библиотека

Pepa Tabakova

понеделник

Здравейте, всички. Ето още едно интересно меню Библиотека, наричано още Лавица за книги. Меню с доста необичаен дизайн и в същото време с много полезни връзки, които могат да бъдат вписани в него. Видах го в един чужд блог. Преправих нещичко, подредих го и съм щастлива да го споделя с вас. Искам веднага да направя уточнение.
Кодът на менюто Библиотека не съдържа скриптове на библиотеки на трети страни и други скрити скриптове. Но ефектът е впечатляващ. Първоначално се опитах да го направя с три книги, но не останах доволна от резултата. Тогава опитах с шест книги, като си помислих, че този избор вече ще бъде последен. Но се спрях на вариант с пет книги. Целият трик в това меню е, че когато кликнете върху желаната книга, тя "слиза" от рафта и след това, под курсор, се отваря страница с името и съдържанието ѝ. Като пример взех имената на етикетите от моя блог. Ако вече имате меню в блога и не искате да се откажете от него, можете да инсталирате тази Библиотека, за да показвате в нея линкове към любимите ви блогове, които четете, като ги разделяте по теми. И още приложения могат да се намерят. Ако се изкушите да опитате, копирайте целия код в текстови файл на компютъра си и използвайте този инструмент, за да видите как изглежда менюто, което възхвалявах досега. Ще уточним настройките малко по-долу.

Код

<style>

ul.topUL {padding:0; margin:30px; list-style:none; width:250px; margin:30px auto; position:relative; z-index:100; font-family:verdana, arial, sans-serif;}

ul.topUL > li {float:left; margin-right:1px; position:relative; z-index:10;}

ul.topUL > li a.p1 {display:block; width:43px; border:2px solid #333; border-width:1px 3px; height:248px; color:#fff; top:0; left:0; text-decoration:none; position:relative;

-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

-webkit-transition: 0.25s;

-moz-transition: 0.25s;

-o-transition: 0.25s;

transition: 0.25s;

}

ul.topUL > li > a span {display:block; width:43px; white-space:nowrap; position:absolute; left:0px; top:200px;

-webkit-transform: rotate(-90deg);

-moz-transform: rotate(-90deg);

-o-transform: rotate(-90deg);

transform: rotate(-90deg);

}

ul.topUL > li.b1 > a {background:#562; border-color:#340;

background: -moz-linear-gradient(0, #562, #784 50%, #562 100%);

background: -webkit-gradient(linear, 0 0, 100% 0, from(#562), color-stop(50%, #784), color-stop(100%, #562));

}

ul.topUL > li.b2 > a {background:#366; border-color:#144;

background: -moz-linear-gradient(0, #366, #688 50%, #366 100%);

background: -webkit-gradient(linear, 0 0, 100% 0, from(#366), color-stop(50%, #688), color-stop(100%, #366));

}

ul.topUL > li.b3 > a {background:#246; border-color:#024;

background: -moz-linear-gradient(0, #246, #579 50%, #246 100%);

background: -webkit-gradient(linear, 0 0, 100% 0, from(#246), color-stop(50%, #579), color-stop(100%, #246));

}

ul.topUL > li.b4 > a {background:#741; border-color:#520;

background: -moz-linear-gradient(0, #741, #a74 50%, #741 100%);

background: -webkit-gradient(linear, 0 0, 100% 0, from(#741), color-stop(50%, #a74), color-stop(100%, #741));

}

ul.topUL > li.b5 > a {background:#623; border-color:#401;

background: -moz-linear-gradient(0, #623, #956 50%, #623 100%);

background: -webkit-gradient(linear, 0 0, 100% 0, from(#623), color-stop(50%, #956), color-stop(100%, #623));

}

ul.topUL ul.sub {padding:0; list-style:none; position:absolute; left:-51px; top:230px; width:0; overflow:hidden; height:250px; margin:0 0 20px 0;

-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

-webkit-transition: 0s;

-moz-transition: 0s;

-o-transition: 0s;

transition: 0s;

transition-delay:0s;

-o-transition-delay: 0s;

-moz-transition-delay: 0s;

-ms-transition-delay: 0s;

-webkit-transition-delay: 0s;

}

ul.topUL > li.b1 > ul {background:#784;}

ul.topUL > li.b2 > ul {background:#688;}

ul.topUL > li.b3 > ul {background:#579;}

ul.topUL > li.b4 > ul {background:#a74;}

ul.topUL > li.b5 > ul {background:#956;}

ul ul li.content {width:0; height:190px; position:absolute; left:0; top:10px; background:#eee; padding:40px 0 0 0; text-indent:20px; font-size:11px; color:#444; overflow:hidden;

-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

-webkit-transition: 0s;

-moz-transition: 0s;

-o-transition: 0s;

transition: 0s;

transition-delay: 0s;

-o-transition-delay: 0s;

-moz-transition-delay: 0s;

-ms-transition-delay: 0s;

-webkit-transition-delay: 0s;

}

ul ul li b {display:block;}

ul ul li a {text-decoration:none; color:#444; padding-left:20px; line-height:20px;}

ul ul li a:hover {color:#000; text-decoration:underline;}

ul ul li.cover {width:0; height:220px; position:absolute; padding-top:30px; text-indent:10px; font-size:14px font-weight:bold; color:#fff; left:0; top:0; z-index:100; overflow:hidden; white-space:nowrap;}

ul ul li.cover i {font-weight:normal; font-style:normal; font-size:10px; line-height:40px; padding-left:10px;}

ul ul li.cover em {display:block; font-weight:normal; font-style:normal; margin-top:120px; font-size:10px; line-height:40px;}

ul.topUL > li.b1 li.cover {background:#562;

background: -moz-linear-gradient(0, #562, #784 100%);

background: -webkit-gradient(linear, 0 0, 100% 0, from(#562),color-stop(100%, #784));

}

ul.topUL > li.b2 li.cover {background:#366;

background: -moz-linear-gradient(0, #366, #688 100%);

background: -webkit-gradient(linear, 0 0, 100% 0, from(#366),color-stop(100%, #688));

}

ul.topUL > li.b3 li.cover {background:#246;background: -moz-linear-gradient(0, #246, #579 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#246),color-stop(100%, #579));

}

ul.topUL > li.b4 li.cover {background:#741;

background: -moz-linear-gradient(0, #741, #a74 100%);

background: -webkit-gradient(linear, 0 0, 100% 0, from(#741),color-stop(100%, #a74));

}

ul.topUL > li.b5 li.cover {background:#623;

background: -moz-linear-gradient(0, #623, #956 100%);

background: -webkit-gradient(linear, 0 0, 100% 0, from(#623),color-stop(100%, #956));

}

ul.topUL > li:hover {direction:ltr; z-index:100;}

ul.topUL > li:hover a.p1 {top:230px;left:-100px;

-o-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);

-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);

-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);

box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);

-webkit-transition: 0.5s;

-moz-transition: 0.5s;

-o-transition: 0.5s;

transition: 0.5s;

transition-delay: 0s;

-o-transition-delay: 0s;

-moz-transition-delay: 0s;

-ms-transition-delay: 0s;

-webkit-transition-delay: 0s;

}

ul.topUL li:hover ul {width:200px;

-o-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);

-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);

-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);

box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);

-webkit-transition: 0.5s;

-moz-transition: 0.5s;

-o-transition: 0.5s;

transition: 0.5s;

transition-delay: 0.5s;

-o-transition-delay: .5s;

-moz-transition-delay: 0.5s;

-ms-transition-delay: 0.5s;

-webkit-transition-delay: 0.5s;

}

ul.topUL li:hover ul li.cover {width:200px;

-webkit-transition: 0.25s;

-moz-transition: 0.25s;

-o-transition: 0.25s;

transition: 0.25s;

}

ul.topUL li:hover ul li.content {width:190px;

background: -moz-linear-gradient(0, #ddd, #fff 50%);

background: -webkit-gradient(linear, 0 0, 100% 0, from(#ddd), color-stop(50%, #fff));

-webkit-transition: 0.5s;

-moz-transition: 0.5s;

-o-transition: 0.5s;

transition: 0.5s;

}

ul.topUL li:hover ul:hover {overflow:visible;}

ul.topUL li.b1:hover ul:hover li.cover {border-right:4px solid #451;}

ul.topUL li.b2:hover ul:hover li.cover {border-right:4px solid #255;}

ul.topUL li.b3:hover ul:hover li.cover {border-right:4px solid #135;}

ul.topUL li.b4:hover ul:hover li.cover {border-right:4px solid #630;}

ul.topUL li.b5:hover ul:hover li.cover {border-right:4px solid #512;}

ul.topUL li.b1:hover ul:hover li.cover {border-right:4px solid #451;}

ul.topUL li.b2:hover ul:hover li.cover {border-right:4px solid #255;}

ul.topUL li.b3:hover ul:hover li.cover {border-right:4px solid #135;}

ul.topUL li.b4:hover ul:hover li.cover {border-right:4px solid #630;}

ul.topUL li.b5:hover ul:hover li.cover {border-right:4px solid #512;}

ul.topUL li:hover ul:hover li.cover {left:-2px; width:1px; height:235px; top:-15px; padding-top:45px;

-o-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);

-moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);

-webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);

box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);

-webkit-transition: 0.25s;

-moz-transition: 0.25s;

-o-transition: 0.25s;

transition: 0.25s;

}

.shelf {clear:left; width:260px; height:20px; background:#620; margin:0 auto;

background: -moz-linear-gradient(90deg, #620, #950 20%, #620 30%);

background: -webkit-gradient(linear, 0 100%, 0 0 , from(#620), color-stop(20%, #950), color-stop(30%, #620));

-o-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);

-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);

-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);

box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);

}

</style>

<li class="b1"><a class="p1" href="#">Етикетите в блога</a>

<li class="cover">Етикетите в блога Блог за блоговеПовече</li>

Публикации

<a href="#">1. Етикети в блога</a>

<a href="#">2. Рубрики в блога</a>

<a href="#">3. Редактиране на етикети</a>

<a href="#">4. Списък на етикетите</a>

<a href="#">5. Всичко за етикетите</a>

<a href="#">6. Меню за етикетите</a>

</li>

</ul>

</li>

<li class="b2"><a class="p1" href="#">Притурки за блога</a>

<li class="cover">Притурки за блога Блог за блоговеПовече</li>

Публикации

<a href="#">1. Сходни публикации</a>

<a href="#">2. Контактна форма</a>

<a href="#">3. Последни публикации</a>

<a href="#">4. Социални бутони</a>

<a href="#">5. Последни коментари</a>

<a href="#">6. Статистика в блога</a>

</li>

</ul>

</li>

<li class="b3"><a class="p1" href="#">Меню за Blogger</a>

<li class="cover">Меню за Blogger Блог за блоговеПовече</li>

Публикации

<a href="#">1. Фиксирано меню</a>

<a href="#">2. Меню - акордеон</a>

<a href="#">3. Анимирано меню</a>

<a href="#">4. Фиксирано меню</a>

<a href="#">5. Вертикално меню</a>

<a href="#">6. Хоризонтално меню</a>

</li>

</ul>

</li>

<li class="b4"><a class="p1" href="#">Публикация и текст</a>

<li class="cover">Публикация и текст Блог за блоговеПовече</li>

Публикации

<a href="#">1. Карта на блога</a>

<a href="#">2. Фон на страница</a>

<a href="#">3. Защищённая паролем страница</a>

<a href="#">4. Оформяне на главна страница</a>

<a href="#">5. Подстраници в блога</a>

</li>

</ul>

</li>

<li class="b5"><a class="p1" href="#">Изображенията в блога</a>

<li class="cover">Изображенията в блога Блог за блоговеПовече</li>

Публикации

<a href="#">1. Изображенията в блога</a>

<a href="#">2. Слайдер</a>

<a href="#">3. Слайдер - акордеон</a>

<a href="#">4. Галерея от изображения</a>

<a href="#">5. Рамки за изображения</a>

</li>

</ul>

</li>

</ul>

➤Участъкът от кода, който е маркиран с червен цвят, е отговорен за стиловете на лавицата. Можете да промените цвета, ширината, височината. Или премахнете онова, което смятате за напълно ненужно;

➤С височината на книгите, не ви съветвам да експериментирате, тъй като трябва да промените и много значения в кода. Ако се чувствате уверени, можете да си поиграете с цветовете на книгите. Но тук искам да отбележа, че освен свойството за цвят background:#246; border-color:#024; се използва и свойството gradient;

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

➤Инсталирането на менюто е най-елементарното действие - Оформление – добавяне на притурка HTML / JS притурка вписване на кода преместване на желаното място;

➤Добавянето или премахването на книги е трудна работа, защото много от значенията в кода трябва също да се променят. Съветвам кодът да остане така;

Успех, приятели! Очаквам мнения и коментари.

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

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

4 Komentar

peSho 5 март 2019 г. в 9:14

Страхотно меню. Ще си го запазя за някой бъдещ проект ако имам време!

+1 Благодаря! :)
- Пепа 5 март 2019 г. в 10:34 ?
  
  Благодаря, запазете го, ще намерите време. Сигурна съм. Искам да съм полезна и надявам се, че ще имам още полезни публикации.
Reply ?
Пелагия Василева 6 март 2019 г. в 6:25

Впечатлена съм, много е атрактивно. Благодаря за споделените възможности.
- Пепа 6 март 2019 г. в 6:26 ?
  
  Благодаря за комплимента. Заповядайте пак!
Reply ?

Cancel

4 Komentar

PEPA TABAKOVA