Разтварящо се меню с бутон

Добър ден, приятели. Бутон за меню в горния десен ъгъл на блога е едно просто и чудесно решение за спестяване на място в страничната колона на блога. Този елемент на навигация ще отговаря на абсолютно всеки дизайн. Когато кликнете върху бутона, се отваря прозорец с елементи от менюто и бутони за социални мрежи - Facebook, Instagram, Twitter.

Менюто е адаптирано и за мобилната версия на блога.
Кодът на менюто с бутон е сравнително голям, но нека това да не ви плаши. Разгледайте го как изглежда, като впишете кода в моя любим инструмент. В горния десен ъгъл ще се появи бутонът на менюто. Кликнете върху него и менюто ще се разтвори. Бутонът изглежда така:

Код

<style>

@font-face{font-family:Roboto;font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUSZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype')}

.fontroboto{font-family:Roboto,sans-serif}

.fontweight500{font-weight:500;}

.btn-sidebaramp{background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 25 25' width='34' height='34' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23333333' d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-repeat:no-repeat;background-size:34px 34px;background-position:center center;background-color:transparent;width:48px;height:70px;line-height:70px;border:none;position:fixed;top:0;right:10px;z-index:1001;cursor:pointer}

.ampsidebar{width:300px;background:#00626B}

svg.amp-close-image{position:absolute;top:15px;left:16px;cursor:pointer}

.ampsidebar nav ul{margin-top:30px}

.ampsidebar nav li:first-child{padding-top:0}

.ampsidebar nav li a{font-size:16px;padding:10px 20px;color:#efefef}

.ampsidebar nav li a:hover,.ampsidebar nav li a:visited{color:#fff}

.ampsidebar button{margin-left:20px}

.social-follow,.follow_sidebar,.logo_sidebar{text-align:center}

.logo_sidebar{height:auto;margin:40px auto 0;font-size:24px;color:#fff;letter-spacing:-1px;word-spacing:-5px;line-height:1}

.follow_sidebar{line-height:normal;letter-spacing:normal;text-transform:uppercase;color:#fff;font-size:.94rem;padding-top:1.5rem}

.social-follow{margin:.5rem 0 1rem;-webkit-box-pack:initial;-ms-flex-pack:initial;justify-content:initial;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;padding-left:0}

.social-follow li{display:inline-block;margin-right:0;}

.social-follow li .gp svg{vertical-align:4px}

svg:not(:root){overflow:hidden}

.ampstart-icon,.ampstart-sidebar .ampstart-icon{fill:#fff}

.liststyle0{list-style:none}

.p0{padding:0}

.m0{margin:0}

.p1{padding:.5rem}

.inline-block{display:inline-block}

.displayblock,.sidebar-mask.open{display:block}

:active,:focus{outline:0}

a{text-decoration:none}

.ampsidebar.p0.mystyle{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform 233ms cubic-bezier(0,0,.21,1);transition:-webkit-transform 233ms cubic-bezier(0,0,.21,1);transition:transform 233ms cubic-bezier(0,0,.21,1);transition:transform 233ms cubic-bezier(0,0,.21,1),-webkit-transform 233ms cubic-bezier(0,0,.21,1)}

.ampsidebar.p0{right:0;-webkit-transform:translateX(100%);transform:translateX(100%)}

.ampsidebar{position:fixed;top:0;max-height:100vh;height:100vh;max-width:80vw;min-width:45px;outline:0;overflow-y:auto;z-index:2147483647;-webkit-overflow-scrolling:touch;will-change:transform}

.sidebar-mask{position:fixed;top:0;left:0;width:100vw;height:100vh;opacity:.2;background-image:none;background-color:#000;z-index:2147483646}

.flow{overflow:hidden;position:relative}

</style>

<div class='ampsidebar fontroboto p0' id='side-bar'>

<svg aria-label='Close Sidebar' class='amp-close-image' height='20' onclick="myFunction1()" role='button' tabindex='0' viewbox='0 0 24 24' width='20'>

<path d='M19,3H16.3H7.7H5A2,2 0 0,0 3,5V7.7V16.4V19A2,2 0 0,0 5,21H7.7H16.4H19A2,2 0 0,0 21,19V16.3V7.7V5A2,2 0 0,0 19,3M15.6,17L12,13.4L8.4,17L7,15.6L10.6,12L7,8.4L8.4,7L12,10.6L15.6,7L17,8.4L13.4,12L17,15.6L15.6,17Z' fill='#fff'></path>

</svg>

<div class='logo_sidebar fontweight500 displayblock'>

МЕНЮ

</div>

<nav>

<ul class='p0 liststyle0'>

<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='#' title='карта'>Карта на блога</a></li>

<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='#' rel='nofollow noopener' title='автор'>За автора</a></li>

<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='#' title='сътрудничество'>Сътрудничество</a></li>

<li class='liststyle0 m0 p0'><a class='fontweight500 displayblock' href='#' rel='nofollow noopener' target='_blank' title='контакт'>Форма за контакт</a></li>

</ul>

</nav>

<h3 class='follow_sidebar fontroboto fontweight500 displayblock'>Присъединете се</h3>

<ul class='social-follow m0 displayblock'>

<li class='p0'>

<a aria-label='Link to Facebook' class='inline-block p1' href='https://www.facebook.com/#' rel='nofollow noopener' target='_blank'><svg height='30' viewbox='0 0 56 55' width='30' xmlns='http://www.w3.org/2000/svg'>Facebook<path class='ampstart-icon ampstart-icon-fb' d='M47.5 43c0 1.2-.9 2.1-2.1 2.1h-10V30h5.1l.8-5.9h-5.9v-3.7c0-1.7.5-2.9 3-2.9h3.1v-5.3c-.6 0-2.4-.2-4.6-.2-4.5 0-7.5 2.7-7.5 7.8v4.3h-5.1V30h5.1v15.1H10.7c-1.2 0-2.2-.9-2.2-2.1V8.3c0-1.2 1-2.2 2.2-2.2h34.7c1.2 0 2.1 1 2.1 2.2V43'></path></svg></a>

</li>

<li class='p0'>

<a aria-label='Link to Instagram' class='inline-block p1' href='https://www.instagram.com/#' rel='nofollow noopener' target='_blank'><svg height='30' viewbox='0 0 54 54' width='30' xmlns='http://www.w3.org/2000/svg'>instagram<path class='ampstart-icon ampstart-icon-instagram' d='M27.2 6.1c-5.1 0-5.8 0-7.8.1s-3.4.4-4.6.9c-1.2.5-2.3 1.1-3.3 2.2-1.1 1-1.7 2.1-2.2 3.3-.5 1.2-.8 2.6-.9 4.6-.1 2-.1 2.7-.1 7.8s0 5.8.1 7.8.4 3.4.9 4.6c.5 1.2 1.1 2.3 2.2 3.3 1 1.1 2.1 1.7 3.3 2.2 1.2.5 2.6.8 4.6.9 2 .1 2.7.1 7.8.1s5.8 0 7.8-.1 3.4-.4 4.6-.9c1.2-.5 2.3-1.1 3.3-2.2 1.1-1 1.7-2.1 2.2-3.3.5-1.2.8-2.6.9-4.6.1-2 .1-2.7.1-7.8s0-5.8-.1-7.8-.4-3.4-.9-4.6c-.5-1.2-1.1-2.3-2.2-3.3-1-1.1-2.1-1.7-3.3-2.2-1.2-.5-2.6-.8-4.6-.9-2-.1-2.7-.1-7.8-.1zm0 3.4c5 0 5.6 0 7.6.1 1.9.1 2.9.4 3.5.7.9.3 1.6.7 2.2 1.4.7.6 1.1 1.3 1.4 2.2.3.6.6 1.6.7 3.5.1 2 .1 2.6.1 7.6s0 5.6-.1 7.6c-.1 1.9-.4 2.9-.7 3.5-.3.9-.7 1.6-1.4 2.2-.7.7-1.3 1.1-2.2 1.4-.6.3-1.7.6-3.5.7-2 .1-2.6.1-7.6.1-5.1 0-5.7 0-7.7-.1-1.8-.1-2.9-.4-3.5-.7-.9-.3-1.5-.7-2.2-1.4-.7-.7-1.1-1.3-1.4-2.2-.3-.6-.6-1.7-.7-3.5 0-2-.1-2.6-.1-7.6 0-5.1.1-5.7.1-7.7.1-1.8.4-2.8.7-3.5.3-.9.7-1.5 1.4-2.2.7-.6 1.3-1.1 2.2-1.4.6-.3 1.6-.6 3.5-.7h7.7zm0 5.8c-5.4 0-9.7 4.3-9.7 9.7 0 5.4 4.3 9.7 9.7 9.7 5.4 0 9.7-4.3 9.7-9.7 0-5.4-4.3-9.7-9.7-9.7zm0 16c-3.5 0-6.3-2.8-6.3-6.3s2.8-6.3 6.3-6.3 6.3 2.8 6.3 6.3-2.8 6.3-6.3 6.3zm12.4-16.4c0 1.3-1.1 2.3-2.3 2.3-1.3 0-2.3-1-2.3-2.3 0-1.2 1-2.3 2.3-2.3 1.2 0 2.3 1.1 2.3 2.3z'></path></svg></a>

</li>

<li class='p0'>

<a aria-label='Link to Twitter' class='inline-block p1' href='https://twitter.com/#' rel='nofollow noopener' target='_blank'><svg height='30' viewbox='0 0 53 49' width='30' xmlns='http://www.w3.org/2000/svg'>Twitter<path class='ampstart-icon ampstart-icon-twitter' d='M45 6.9c-1.6 1-3.3 1.6-5.2 2-1.5-1.6-3.6-2.6-5.9-2.6-4.5 0-8.2 3.7-8.2 8.3 0 .6.1 1.3.2 1.9-6.8-.4-12.8-3.7-16.8-8.7C8.4 9 8 10.5 8 12c0 2.8 1.4 5.4 3.6 6.9-1.3-.1-2.6-.5-3.7-1.1v.1c0 4 2.8 7.4 6.6 8.1-.7.2-1.5.3-2.2.3-.5 0-1 0-1.5-.1 1 3.3 4 5.7 7.6 5.7-2.8 2.2-6.3 3.6-10.2 3.6-.6 0-1.3-.1-1.9-.1 3.6 2.3 7.9 3.7 12.5 3.7 15.1 0 23.3-12.6 23.3-23.6 0-.3 0-.7-.1-1 1.6-1.2 3-2.7 4.1-4.3-1.4.6-3 1.1-4.7 1.3 1.7-1 3-2.7 3.6-4.6'></path></svg></a>

</li>

</ul>

</div>

<div aria-label='Open' class='btn-sidebaramp p0' onclick="myFunction1()" role='button' tabindex='0'></div>

<div class="sidebar-mask" onclick="myFunction1()" hidden='' id='sidebar-mask'></div>

<script>

function myFunction1() {

var element = document.getElementById("side-bar");

element.classList.toggle("mystyle");

var element = document.getElementById("sidebar-mask");

element.classList.toggle("open");

var body = document.body;

body.classList.toggle("flow");

}

</script>

Настройки

Настройката на менюто е съвсем лесна. Копирайте кода в компютъра си. И тук всичко е елементарно.

➤Редовете, маркирани в червено са местата, където ще въведете адресите на вашите страници и заглавия им;

➤Можете да промените фона на блока # 00626B по свое усмотрение;

➤Инсталирайте готовия код в притурка - HTML / JavaScript, която сложете където и да е в темата на блога;



Менюто ще изглежда прилично, където и да го позиционирате. Имам и друга публикация за разтварящо се меню. Ако сте пропуснали, погледнете я. Може би ще се интересувате и от тази опция.

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

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