Awebdesign's Blog

Всплывающая панель на ява-скрипт и CSS3

(Перевод Виктории Шидловской урока Джона Филлипса на spyrestudios.com)

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

Что мы будем делать:

Разметка HTML

Начнем с шапки документа. Здесь главное — ссылки на наш файл CSS и файл jQuery из библиотеки Google. Позже мы вернемся к шапке и пропишем код ява-скрипта.

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Vertical Sliding Info Panel With jQuery</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	<script type="text/javascript"
src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
</head>
</html>

В теле документа мы создадим div и назовем его «container». Этот div будет содержать весь наш контент, Lorem Ipsum в данном случае. Пока что это не панель.

<div id="container">
	<h1>Vertical Sliding Info Panel With jQuery</h1>
		<h2>The Sliding Panel And Trigger Button On The Left
Have Absolute Positioning</h2>
<p>This is an example of simple page that's centered
and has a vertical sliding panel on the far left (try it! click on
the 'infos' tab that's on the left!). We used jQuery to create this
sliding panel (and CSS3 rounded corners because it looks cool)</p>
<p>
<a href="http://spyrestudios.com/
how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/"
title="How To Create A Vertical Info Panel With jQuery">Click here
to return to the tutorial on SpyreStudios</a></p>
	<div>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh
imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt
gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare
accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum
fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare.
Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus,
at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
	</div>
</div>

Дальше примемся за нашу всплывающую панель. Здесь добавим несколько параграфов, h3 и линков.

<div>
	<h3>Sliding Panel</h3>
	<p>Here's our sliding panel/drawer made using jQuery with the 
toggle function and some CSS3 for the rounded corners</p>
	<p>This panel could also be placed on the right. This could be 
particularly useful if, <a href="http://spyrestudios.com" 
title="SpyreStudios">like me</a>, you have a left-aligned website layout.</p>

	<h3>A Little Something About Me</h3>
	<img src="images/jon_image.jpg" alt="Jon Phillips" />
	<p>My name's Jon, I'm a freelance designer, blogger, musician. 
I run SpyreStudios and I specialize in WordPress blogs, CSS, XHTML and PHP</p>

<div style="clear:both;"></div>
<div>
	<div>
	<h3>Navigation</h3>
		<ul>
<li><a href="http://spyrestudios.com/" title="home">Home</a></li>
<li><a href="http://spyrestudios.com/about/" title="about">About</a></li>
<li><a href="http://spyrestudios.com/portfolio/" title="portfolio">Portfolio</a></li>
<li><a href="http://spyrestudios.com/contact/" title="contact">Contact</a></li>
<li><a href="http://spyrestudios.com" title="blog">Blog</a></li>
		</ul>
	</div>

	<div>
		<h3>Social Stuff</h3>
		<ul>
<li><a href="http://twitter.com/jophillips" title="Twitter">Twitter</a></li>
<li><a href="http://designbump.com/user/147" title="DesignBump">DesignBump</a></li>
<li><a href="http://digg.com/users/jophillips" title="Digg">Digg</a></li>
<li><a href="http://delicious.com/jon.phillips" title="Del.Icio.Us">Del.Icio.Us</a></li>
<li><a href="http://designmoo.com/users/jonphillips" title="DesignMoo">DesignMoo</a></li>
		</ul>
	</div>
</div>
<div style="clear:both;"></div>

</div>
<a href="#">infos</a>

Завершим наш HTML-документ тэгами body и html.

CSS

Как вы можете видеть, наш CSS очень прост, добавлены только сругленные углы и кнопка trigger, которая запускает выезд панели. Заметьте также, что у панели и trigger-а абсолютное позиционирование по левому краю.

body {
background:#1a1a1a;
text-align:left;
color:#666;
width:700px;
font-size:14px;
font-family:georgia, 'time new romans', serif;
margin:0 auto;
padding:0;
}

a:focus {
outline: none;
}

h1 {
font-size: 34px;
font-family: verdana, helvetica, arial, sans-serif;
letter-spacing:-2px;
color:#9FC54E;
font-weight:700;
padding:20px 0 0;
}

h2 {
font-size: 24px;
font-family: verdana, helvetica, arial, sans-serif;
color:#444444;
font-weight: 400;
padding: 0 0 10px;
}

h3 {
font-size:14px;
font-family:verdana, helvetica, arial, sans-serif;
letter-spacing:-1px;
color:#fff;
font-weight: 700;
text-transform:uppercase;
margin:0;
padding:8px 0 8px 0;
}

img{
float: right;
margin: 3px 3px 6px 8px;
padding: 5px;
background: #222222;
border: 1px solid #333333;
}

p {
color:#cccccc;
line-height:22px;
padding: 0 0 10px;
margin: 20px 0 20px 0;
}

img {
border:none;
}

#container {
clear: both;
margin: 0;
padding: 0;
}

#container a{
float: right;
background: #9FC54E;
border: 1px solid #9FC54E;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px;
font-weight: 700;
}

#container a:hover{
float: right;
background: #a0a0a0;
border: 1px solid #cccccc;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px;
font-weight: 700;
}

.content {
font-style:normal;
font-family:helvetica, arial, verdana, sans-serif;
color:#ffffff;
background:#333333;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
margin: 30px 0 50px;
padding: 15px 0;
}

.content p {
margin: 10px 0;
padding: 15px 20px;
}

.panel {
position: absolute;
top: 50px;
left: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}

.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.trigger{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(images/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.trigger:hover{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(images/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.active.trigger {
background:#222222 url(images/minus.png) 85% 55% no-repeat;
}

.columns{
clear: both;
width: 330px;
padding: 0 0 20px 0;
line-height: 22px;
}

.colleft{
float: left;
width: 130px;
line-height: 22px;
}

.colright{
float: right;
width: 130px;
line-height: 22px;
}

ul{
padding: 0;
margin: 0;
list-style-type: none;
}

ul li{
padding: 0;
margin: 0;
list-style-type: none;
}

Если хотите поставить кнопку открытия панели и саму панель вправо, просто перепишите код, вместо

a.trigger{
position: absolute;
top: 80px; left: 0;
}

.panel {
position: absolute;
top: 50px; left: 0;
}

нужно написать так:

a.trigger{
position: absolute;
top: 80px; right: 0;
}

.panel {
position: absolute;
top: 50px; right: 0;
}

Также перенесите скругленные углы, вместо

border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;

нужно написать так:

border:1px solid #444444;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;

Если вы хотите, чтобы trigger и панель оставались всегда видимыми при прокрутке окна, пропишите фиксированное позиционирование:

a.trigger{
position: fixed;
top: 80px; left: 0;
}

.panel {
position: fixed;
top: 50px; left: 0;
}

Чтобы изменить прозрачность панели, измените код здесь:

filter: alpha(opacity=85);
opacity: .85;

jQuery

Ну и, наконец, нужно ввести в действие ява-скрипт, иначе у нас кроме неработающей кнопки ничего не будет. Как мы уже поняли из разметки, кнопка имеет класс .trigger, а панель — класс .panel. Следующий код должен стоять прямо перед закрывающим тэгом вот так:


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertical Sliding Info Panel With jQuery</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" 
src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$(".trigger").click(function(){
		$(".panel").toggle("fast");
		$(this).toggleClass("active");
		return false;
	});
});
</script>
</head>

Этот код будет сообщать браузеру о том, когда закрывать и открывать (toggle) панель, а также о том, когда панель активна. Благодаря этому зеленый значок плюса будет меняться на красный минуса.

Вы также можете скачать zip-архив со всеми необходимыми файлами этого урока по jQuery и CSS3

комментария 3

Subscribe to comments with RSS.

  1. portuguese products said, on 13.02.2014 at 3:58 пп

    Hello there, I discovered your website via Google whilst looking for a comparable matter,
    your website came up, it seems to be good. I’ve bookmarked
    it in my google bookmarks.
    Hello there, just was alert to yoyr blog via Google, and located that it is truly informative.
    I’m gonna watch out for brussels. I will appreciate in the
    event you proceed this in future. Numerous other people will probably be benefited from your writing.
    Cheers!

    Нравится

  2. uncle BOO said, on 09.12.2010 at 7:08 пп

    Я где-то находил комент автора, что в IE6 он это не проверял. У меня в IE6 и не работает. Мозила и Опера последние — ништяк пашет. Обновляю IE, но может кто-нить решение под IE6 подгонит?

    Нравится


Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: