Як створити "вислизати" меню на css.

Всім привіт! У цій статті я покажу, як створити "вислизати" меню на CSS.

Насправді, все дуже просто, тому я приведу код і, якщо ви знаєте html і css, то без проблем зможете в ньому розібратися. Якщо ж ви відчуваєте проблеми з даними мовами, рекомендую придбати курс "Верстка сайту з нуля". Отже, поїхали!

код HTML:

 
lang="En"gt; 
 
charset="UTF-8"gt; 
Slide out menu 
rel="Stylesheet"href="Main.css"gt; 
 
 
class="Nav-side"gt; 
 зміст 
href="#"class="Nav-toggle"gt; 
 
class="Wrapper"gt; 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod autem beatae, sit debitis cupiditate obcaecati id sed, ea molestias, tenetur voluptates deleniti velit vel consequatur molestiae dolore quos hic perspiciatis expedita dignissimos temporibus possimus quidem sequi incidunt quibusdam. Eum dolore, deleniti repudiandae reprehenderit suscipit quos aperiam, sed. Facilis, quod recusandae? 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod autem beatae, sit debitis cupiditate obcaecati id sed, ea molestias, tenetur voluptates deleniti velit vel consequatur molestiae dolore quos hic perspiciatis expedita dignissimos temporibus possimus quidem sequi incidunt quibusdam. Eum dolore, deleniti repudiandae reprehenderit suscipit quos aperiam, sed. Facilis, quod recusandae? 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod autem beatae, sit debitis cupiditate obcaecati id sed, ea molestias, tenetur voluptates deleniti velit vel consequatur molestiae dolore quos hic perspiciatis expedita dignissimos temporibus possimus quidem sequi incidunt quibusdam. Eum dolore, deleniti repudiandae reprehenderit suscipit quos aperiam, sed. Facilis, quod recusandae?

код CSS:

body { 
 font:1em"Helvetica", sans-serif- 
 line-height:1.4- 
 font-weight:200- 
} 
 
.wrapper { 
 margin-left:50px- 
} 
 
.nav-side { 
 position:fixed- 
 left:0- 
 top:0- 
 height:100% - 
 width:100% - 
 max-width:250px- 
 background: cornflowerblue- 
 box-sizing: border-box- 
 padding:20px- 
 color:# fff- 
 margin-left:-250px- 
 transition: margin 200ms ease-in-out- 
} 
 
.nav-side.nav-open { 
 margin-left:0- 
 box-shadow:1px1px3px rgba(0,0,0,.1) - 
} 
 
.nav-toggle { 
 position: absolute- 
 right:-40px- 
 top:0- 
 width:40px- 
 height:40px- 
 background-color: cornflowerblue- 
 line-height:40px- 
 text-decoration: none- 
 text-align: center- 
 border-bottom-right-radius:3px- 
 box-shadow:1px03px rgba(0,0,0,.1) - 
} 
 
.nav-toggle:before { 
 content:` 2192`- 
 font-weight:600- 
 color:# fff- 
} 
 
.nav-side.nav-open .nav-toggle:before { 
 content:` 2190`- 
}

код jаvascript (JQuery):

$(`.nav-side .nav-toggle`).on(`Click`,function(e){ 
 e.preventDefault() - 
 $(this).parent().toggleClass(`Nav-open`) - 
}) -

От і все! Як бачите, все дуже просто. Більшість коду тут - оформлення самого блоку. Все, що важливо, це те, що ми відсунули наш контент трохи вправо, щоб там помістилася наша кнопка зі стрілкою. Далі ми прибрали за межі видимості наш блок меню і витягуємо його тоді, коли відбувається клік по кнопці зі стрілкою, просто додавши потрібний клас.

На цьому у мене все! Дякую за увагу!

Поділися в соціальних мережах:

Схожі