CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 293   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

42

Выдвигающаяся панель на CSS

Jemand 42133
CSS, CSS3

1. CSS

#button {
	position: fixed;
	top: 353px;
	left: 0;
	background: #0094d6;
	width: 28px;
	height: 50px;
	font: 40px Georgia;
	color: #fff;
	text-align: center;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-border-radius: 0 5px 5px 0;
	-moz-border-radius: 0 5px 5px 0;
	border-radius: 0 5px 5px 0;
	}
#s_panel {
	position: fixed;
	top: 153px;
	left: -100px;
	background: #ff7700;
	width: 100px;
	height: 150px;
	padding: 100px 0 0 0;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-border-radius: 0 5px 0 0;
	-moz-border-radius: 0 5px 0 0;
	border-radius: 0 5px 0 0;
	}
#button:hover {
	left: 100px;
}
#button:hover #s_panel {
	left: 0;
}

2. HTML

<div id="button"> »
	<div id="s_panel">
		: )
	</div>
</div>

Демо

Рекламная пауза

» 42 комментария

  1. Прикольно..

  2. А есть вариант реализации на OnClick ?
    а то это не работает на планшетах, там нет мыши чтоб наводить…..

  3. Привет!
    Подскажите а как можно только с помощью css реализовать красивую кнопку “наверх”, удастся ли сделать так, чтоб она появлялась только при прокрутке страницы на определенное количество пикселей вниз. Буду благодарен за развернутый ответ или отдельный пост на эту тему.

  4. пришлось делать на jQ
    засада в том что многие отрубают жабаскрипт
    и тогда меню не работает

  5. Наконец то)ура ура ура.ваш сайт снова заработал)Вопросик-как сделать эту замечательную панель двойной?я хочу так-с одной стороны прошедший матч,с другой следующий?левая панелька живет и здравствует а как вторую сделать подскажите пожалуйста?

    • CSS

      #button_l {
      	position: fixed;
      	top: 353px;
      	left: 0;
      	background: #0094d6;
      	width: 28px;
      	height: 50px;
      	font: 40px Georgia;
      	color: #fff;
      	text-align: center;
      	-webkit-transition-duration: 0.3s;
      	-moz-transition-duration: 0.3s;
      	-o-transition-duration: 0.3s;
      	transition-duration: 0.3s;
      	border-radius: 0 5px 5px 0;
      	}
      #s_panel_l {
      	position: fixed;
      	top: 153px;
      	left: -100px;
      	background: #ff7700;
      	width: 100px;
      	height: 150px;
      	padding: 100px 0 0 0;
      	-webkit-transition-duration: 0.3s;
      	-moz-transition-duration: 0.3s;
      	-o-transition-duration: 0.3s;
      	transition-duration: 0.3s;
      	border-radius: 0 5px 0 0;
      	}
      #button_l:hover {
      	left: 100px;
      	}
      #button_l:hover #s_panel_l {
      	left: 0;
      	}
      #button_r {
      	position: fixed;
      	top: 353px;
      	right: 0;
      	background: #0094d6;
      	width: 28px;
      	height: 50px;
      	font: 40px Georgia;
      	color: #fff;
      	text-align: center;
      	-webkit-transition-duration: 0.3s;
      	-moz-transition-duration: 0.3s;
      	-o-transition-duration: 0.3s;
      	transition-duration: 0.3s;
      	border-radius: 5px 0 0 5px;
      	}
      #s_panel_r {
      	position: fixed;
      	top: 153px;
      	right: -100px;
      	background: #ff7700;
      	width: 100px;
      	height: 150px;
      	padding: 100px 0 0 0;
      	-webkit-transition-duration: 0.3s;
      	-moz-transition-duration: 0.3s;
      	-o-transition-duration: 0.3s;
      	transition-duration: 0.3s;
      	border-radius: 0 5px 0 0;
      	}
      #button_r:hover {
      	right: 100px;
      	}
      #button_r:hover #s_panel_r {
      	right: 0;
      	}
      

      HTML

      <div id="button_l"> »
      	<div id="s_panel_l">
      		: )
      	</div>
      </div>
      
      <div id="button_r"> «
      	<div id="s_panel_r">
      		: )
      	</div>
      </div>
      
  6. Странно- написал коммент,он был опубликован, утром зашел его нет(Попробую еще раз-подскажите пожалуйста,как сделать ДВЕ таких панельки,с двух сторон.Спасибо

  7. Третий раз пишу коммент,надеюсь он не пропадет)вопрос таков,как сделать ДВЕ панельки таких?одну справа другую слева?первая живет и здравствует,как сделать такую же слева?СПАСИБО,рад что вас сайт снова заработал

  8. все ломается(((вставляю и почему то правый контейнер уходит в панель.и вторая панель находится в первом(

  9. Сразу прошу прощения за глупый вопрос но я туплю.
    Как подцепить картинку заместо синего фона со стрелочками.

  10. Почему когда я вставляю скрипт в пустой документ он работает, а когда в заполненный – нет?

  11. подскажите -стоит fixed но при прокруте страницы панелька вниз тоже кнопочка( видимо в ксс пробелмы?

  12. и еще при наведнеи на одну панельку(слева) выезжает и правая как исправить?

  13. К эксплорере не работает. Висит посередине страницы. Как исправить?

  14. IE 6, 7, 8. Костыль какой-то нужен?

  15. Как сделать что бы такая панель выезжала сверху вниз??
    заранее спасибо.

    • Например так:

      
      <html>
      <head>
      	<title>Выдвигающаяся панель на CSS</title>
      <style>
      #button {
      	position: fixed;
      	top: 0;
      	left: 153px;
      	background: #0094d6;
      	width: 100px;
      	height: 28px;
      	font: bold 27px Georgia;
      	color: #fff;
      	text-align: center;
      	-webkit-transition-duration: 0.3s;
      	-moz-transition-duration: 0.3s;
      	-o-transition-duration: 0.3s;
      	transition-duration: 0.3s;
      	-webkit-border-radius: 0 0 5px 5px;
      	-moz-border-radius: 0 0 5px 5px;
      	border-radius: 0 0 5px 5px;
      	}
      #s_panel {
      	position: fixed;
      	left: 153px;
      	top: -250px;
      	background: #ff7700;
      	width: 100px;
      	height: 150px;
      	padding: 100px 0 0 0;
      	-webkit-transition-duration: 0.3s;
      	-moz-transition-duration: 0.3s;
      	-o-transition-duration: 0.3s;
      	transition-duration: 0.3s;
      	}
      #button:hover {
      	top: 250px;
      }
      #button:hover #s_panel {
      	top: 0;
      }
      </style>
      </head>
      <body>
      <div id="button"> ⇓
      	<div id="s_panel">
      		: )
      	</div>
      </div>
      </body>
      </html>
      
      
  16. Извините, а куда вставить html код чтобы меню так выдвигалось?

  17. я извеняюсь как ее подключить что бы работа ?

  18. здравствуйте,очень понравилась ваша панель,хочу использовать на сайте,но столкнулся с проблемой,при добавлении большого обьема текста,текст уходит вниз за границы оранжевого блока,наверху слишком большой отступ если его убрать как раз текст влезет.как убрать отступ сверху? Менял значения top,margin результат с косяками,синий блок со стрелками оказывается внизу,оранжевый блок ползет вверх

  19. подскажите куда вводить CSS составляющую


Оставить комментарий