Спрятанное меню

kolhoz · January 12, 2015

Всем привет и с прошедшими праздниками! Как можно реализовать следующее спрятанное меню как на этом сайте

Switch74 · January 12, 2015

блок/обертка с:

position:fixed;right:0px;top:0px;bottom:0px;width:0px;overflow:hidden;

внутрь кладем блок с менюхой прижатый к левому краю любимым способом

через js или css выдвигаем, путем изменения width для блока/обертки

kolhoz · January 12, 2015

блок/обертка с:
position:fixed;right:0px;top:0px;bottom:0px;width:0px;overflow:hidden;
внутрь кладем блок с менюхой прижатый к левому краю любимым способом
через js или css выдвигаем, путем изменения width для блока/обертки

Понял. попробую сейчас

kolhoz · January 12, 2015

Извините, а куда вставить иконку, которая будет иконкой меню как на том сайте? я не могу понять. простенький пример можно?

Switch74 · January 12, 2015

иконку можно поставить куда хотите, она так же должна быть fixed да бы ее было видно всегда

если хочется все сделать одним блоком, можно добавить обертку для кнопки и меню, но тогда fixed переедит на нее, у обертки меню и кнопки делаем absolute и все будет хорошо

kolhoz · January 12, 2015

<!DOCTYPE html><html><head>	<meta charset="utf-8">	<meta http-equiv="X-UA-Compatible" content="IE=edge">	<title></title>	<link rel="stylesheet" href=""><style>.navwrapper {	background: aquamarine;	position: fixed;	right: 0px;	top: 0px;	bottom: 0px;	width: 0px;	overflow: hidden;}</style></head><body>	<div class="navwrapper"><img src="1.jpg" alt="">	<ul class="menu">		<li><a href="/">Главная</a></li>		<li><a href="/">Главная</a></li>		<li><a href="/">Главная</a></li>		<li><a href="/">Главная</a></li>		<li><a href="/">Главная</a></li>	</ul></div>Контент страницы</body></html>

вот что получилось. Если даже иконке сделать fixed почему-то не видна она. подскажите пожалуйста как исправить?

с position знаком плохо так что не наезжайте на новичка)

Switch74 · January 12, 2015

у вас получается все скрыто из-за

width: 0px;overflow: hidden;

вот что у меня получилось

правка http://jsfiddle.net/aepvyu3h/1/

Sign In

Спрятанное меню

Question

kolhoz

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Switch74

Link to comment

Share on other sites

kolhoz

Link to comment

Share on other sites

kolhoz

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

kolhoz

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information