Интересный вариант меню книжная полка

Всем, доброго времени суток. Подхватила меня "менюшная" тема и по сему опять предлагаю вам очередной вариант. Меню под названием книжная полка. Достаточно необычное по дизайну и при этом с массой полезных ссылок, которые можно в нём разместить. Я подглядела его на этом сайте. Что - то перекроила, подстроила и с радостью делюсь с  вами.



Хочу сразу оговориться. Код меню книжная полка без всяких сторонних библиотек и заумных скриптов. Но эффект впечатляет. Изначально я пробовала сделать 3 книги, результатом осталась не довольна . Потом взяла 6 книг и посчитала, что это перебор уже будет. Остановилась на варианте из 5. 

Вся фишка заключается в том, что при нажатии на нужную книгу, она снимается с полки и потом при подведении курсора, открывается страниччка с названием и содержанием.

В качестве примера сделала названия по ярлыкам своего блога. Если у вас уже есть менюшка в блоге и не хочется с ней расставаться, можно установить этот вариант, отобразить в нём ссылки на любимые блоги, которые вы читаете, разбив их по тематике. В блоге библиотекаря, вообще прекрасно впишется. Допустим, на обложка Л. Толстой, а  при развороте его произведения со ссылкой на страницу, где о нём речь. Стоит обратить внимание, что такое меню можно установить на блогах с кулинарными рецептами, Очень много вариантов. 

Ну давайте уже посмотрите на тестовом блоге его в работе, что я тут расхваливаю.

Демонстрация

Если появился соблазн попробовать, скопируйте весь код целиком к себе в блокнот и ниже разберём его немного.

<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>
<ul class="topUL">
<li class="b1"><a class="p1" href="#"><span>всё про ярлыки</span></a>
<ul class="sub">
<li class="cover">Всё про ярлыки<br /><i>шпаргалки блогерши</i><em>Подробнее</em></li>
<li class="content">
<b>статьи</b><br />
<a href="#">1. Гаджет ярлыки</a><br />
<a href="#">2. Дизайн гаджета ярлыки</a><br />
<a href="#">3. Как изменить или удалить ярлыки</a><br />
<a href="#">4. Меню для ярлыков</a><br />
<a href="#">5. Список ярлыков</a><br />
<a href="#">6. Всё об ярлыках</a><br />
</li>
</ul>
</li>
<li class="b2"><a class="p1" href="#"><span>гаджеты для блога</span></a>
<ul class="sub">
<li class="cover">гаджеты для блога<br /><i>шпаргалки блогерши</i><em>Подробнее</em></li>
<li class="content">
<b>статьи</b><br />
<a href="#">1. Дизайн окна поиска</a><br />
<a href="#">2. Слайдер новостей</a><br />
<a href="#">3. Виджет последних постов</a><br />
<a href="#">4. Кнопка вверх-вниз</a><br />
<a href="#">5. Всплывающее окно</a><br />
<a href="#">6. Полоса прокрутки</a><br />
</li>
</ul>
</li>
<li class="b3"><a class="p1" href="#"><span>коды меню для блога</span></a>
<ul class="sub">
<li class="cover">Коды меню<br /><i>шпаргалки блогерши</i><em>Подробнее</em></li>
<li class="content">
<b>статьи</b><br />
<a href="#">1. Выдвигаюшееся меню</a><br />
<a href="#">2. Меню - аккордеон</a><br />
<a href="#">3. Анимированное меню</a><br />
<a href="#">4. Фиксированное меню</a><br />
<a href="#">5. Вертикальное меню</a><br />
<a href="#">6. Круглое горизонтальное меню</a><br />
</li>
</ul>
</li>
<li class="b4"><a class="p1" href="#"><span>Страницы в блоге</span></a>
<ul class="sub">
<li class="cover">Страницы в блоге<br /><i>шпаргалки блогерши</i><em>Подробнее</em></li>
<li class="content">
<b>Категории</b><br />
<a href="#">1. Карта блога</a><br />
<a href="#">2. Красивый фон страницы</a><br />
<a href="#">3. Защищённая паролем страница</a><br />
<a href="#">4. Оформление главной страницы</a><br />
<a href="#">5. О страницах блога</a><br />
</li>
</ul>
</li>
<li class="b5"><a class="p1" href="#"><span>всё про картинки блога</span></a>
<ul class="sub">
<li class="cover">всё про картинки<br /><i>шпаргалки блогерши</i><em>Подробнее</em></li>
<li class="content">
<b>Статьи</b><br />
<a href="#">1. Блок картинок</a><br />
<a href="#">2. Слайдер последних постов</a><br />
<a href="#">3. Слайдер - аккордеон</a><br />
<a href="#">4. Галерея изображений</a><br />
<a href="#">5.Рамки для фотографий</a><br />
</li>
</ul>
</li>
</ul>
<div class="shelf"></div>


Участок кода, который отмечен цветом отвечает за стили полки. Можно поменять цвет, ширину, высоту. Или убрать совсем за ненадобностью. С высотой книг, не советую экспериментировать, так как нужно многие значения менять. Если уверены, можно с цветом книг поиграться. Но тут нужно обратить внимание, что помимо основного, например background:#246; border-color:#024; используется свойство gradient. Попробуйте, если есть желание, воспользоваться любым генератором градиента. Просто вбейте в поиск.

Вместо решёток синего цвета, вставьте адреса страниц, куда будет осуществляться переход по ссылке. Соответственно, все названия книг, и всех ссылок в открывающейся странице пишите свои. Это, наверное, самое нудный этап в настройках меню книжная полка, но оно того стоит.

Можно добавлять ещё строки вида

 <a href="#">6. Полоса прокрутки</a><br />

но в разумных пределах

Приготовьте заранее их где - нибудь в блокноте. Установка меню самая элементарная - дизайн - гаджет HTML/JS.  Добавлять или убирать книги, дело хлопотное, тоже нужно много значений менять. Пусть уж так будет.

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

Вт и всё. До встречи и добра всем.

хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :

24 комментария:

  1. Ой. как классно! Мне очень понравилась книжная полка-меню, Вика. Оригинальненько!

    ОтветитьУдалить
    Ответы
    1. Согласна, Люба. Оригинально и функционально. А главное код без лишнего всего.

      Удалить
    2. Вика, ты умничка! Классная менюшка, особенно для нас, библиотекарей. Пока еще не придумала, что мне туда всунуть. Вот думаю, может убрать полосочки названий статичных страниц и сделать вместо них твою кн. полку. По рубрикам мне много всего вбивать придется...

      Удалить
  2. Интересное меню в форме книжной полке! Оригинально!

    ОтветитьУдалить
    Ответы
    1. Да, Ирина. Его можно по всяким другим назначениям применять.

      Удалить
  3. Ой, какие красивые. Очень нравится! Попозже , наверняка, под что-то пригодится... Даже не видела никогда ничего такого))).

    ОтветитьУдалить
    Ответы
    1. Валерия, вот представила твой блог и подумала, можно по советам - рубрикам ссылки в одном месте вставить.

      Удалить
    2. Ага, надо будет подумать).

      Удалить
  4. Спасибо, Вика! Прикольная менюшка. Пригодится.

    ОтветитьУдалить
    Ответы
    1. Елена, а я и не сомневаюсь. Вы уж точно найдёте для него нужное применение.

      Удалить
  5. Спасибо,Вика,красиво то как! Буду разбираться)

    ОтветитьУдалить
    Ответы
    1. Зоя, тут самое нудное все эти ссылки прописать с названиями. А каков функционал. Но мне нравиттся оно и за то, что код совершенно лёгкий.

      Удалить
  6. Очень интересное и красивое меню

    ОтветитьУдалить
  7. Посмотрела на тестовом блоге - красота!

    ОтветитьУдалить
    Ответы
    1. Наталья, согласна, красивое меню и достаточно функциальное.

      Удалить
  8. Только бы не запутаться)

    ОтветитьУдалить
    Ответы
    1. Зоя, сначала подготовьте названия и адреса страниц куда будут вести ссылки. Попробуйте сначала изменить только одну книгу. Так легче и понятнее будет. Я в менюшке ссылки на свои статьи не указала, так для наглядности сделала.

      Удалить
  9. Очень симпатичное смотрится, но я пока вообще на рубрикации зависла. У меня мечта сделать рубрики . Не по ярлыкам, а именно несколько основных глобальных рубрик. Но как это осуществить на блогспоте не знаю. Буквально вчера нашла один такой блог на блогспоте. Но вот как они это сделали, не знаю

    ОтветитьУдалить
    Ответы
    1. Вика, не совсем поняла, что именно ты имеешь под словом рубрики. Дай ссылку на блог. посмотреть.

      Удалить
  10. Меню - моя слабость! Вроде уже все показал, но... Очень красивое. Может лучшее (по красоте) в Вашей коллекции!!!

    ОтветитьУдалить
  11. Меню - моя слабость! Вроде уже все показал, но... Очень красивое. Может лучшее (по красоте) в Вашей коллекции!!!

    ОтветитьУдалить
  12. Light Knight, спасибо. Мне приятно, что меню многим понравилось. Оригинальное и с возможностью разместить много ссылок.

    ОтветитьУдалить
  13. ВИКА, ну сделала я. Но.. там возникли проблемы в эстетике самого блога. :) В общем я отправлю тебе на почту письмо с моим кодом и опишу проблему именно мою. А так - замечательно!Пока выглядит так https://bibliomir83.blogspot.com/

    ОтветитьУдалить
  14. Ирина, отправляй письмо. Только я не совсем поняла как это сделать Мою книжную полку.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск