-----------------------------------------------------------
<!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>
<body>
<div id="container">
<h1>Vertical Sliding Info Panel With jQuery </h1>
<h1>Projektowanie stron internetowych </h1>
<h1>WEB-kleszewski</h1>
<h2>Boczny panel informacyjny wysuwany w jQuery </h2>
<p><a href="http://www.strony.internetowe.jupe.pl/" title="Strony internetowe">Strony internetowe projektowanie Adam Kleszewski</a></p>
<div class="content">
<p>W dobie globalizacji informacji szybki i bezproblemowy dostęp do niej to bardzo ważna sprawa.Usługi projektowania stron internetowych umożliwiły posiadanie własnego "kącika" <strong>strony internetowe</strong>j.Praktycznie dla każdego.Czy warto z tego skorzystać i mieć własną stronę internetową.Zdecydowanie tak <br />
<br />
Liczba osób które korzystają z globalnej sieci internet dawno przekroczyła najśmielsze oczekiwania jego twórców.Każdy kto szuka informacji na interesujący go temat swoje pierwsze kroki kieruje właśnie do sieci internet .Aby tam bardzo wygodnie za pomocą paru kliknięć dotrzeć do informacji bez względu na ich miejsce położenia co jest największym argumentem przemawiającym na korzyść sieci internet.<br />
<br />
Projektowanie stron internetowych umożliwło również wykorzystanie niesamowitego potęcjału dotarcia ze swoimi :towarami usługami i innymi dobrami na sprzedarz do niezliczonej rzeszy odbiorców na całym świecie co jeszcze przed erą internetu byłoby totalna abstrakcja. <a href="http://www.strony.internetowe.jupe.pl/projektowanie-stron-internetowych" target="_blank">Czytaj więcej</a></p>
</div>
</div>
<div class="panel">
<h3>Sliding Panel<br />
Wysuwany panel boczny</h3>
<p>To jest sliding panel wysuwany panel boczny wykorzystujący jQuery i CSS3</p>
<h3>Parę słów o mniee</h3>
<img class="right" src="images/adam_kleszewski.jpg" alt="Adam Kleszewski" />
<p>Mam na imię Adam.Zajmuję się projektowaniem serwisów internetowych z wykorzystaniem: CSS3,HTML5,PHP,jQuery,JAVA SCRIPT,MYSQL,JOOMLA,FLASH</p>
<div style="clear:both;"></div>
<div class="columns">
<div class="colleft">
<h3>Nawigacja</h3>
<ul>
<li><a href="http://www.strony.internetowe.jupe.pl/projektowanie-stron-internetowych" target="_blank" title="strony internetowe">Strony internetowe</a></li>
<li><a href="http://www.strony.internetowe.jupe.pl/oferta-strony-internetowe" target="_blank" title="oferta">Oferta</a></li>
<li><a href="http://www.strony.internetowe.jupe.pl/tego-nie-robie-oferta-strony-internetowe" target="_blank" title="tego nie robię">Tego nie robię</a></li>
<li><a href="http://www.strony.internetowe.jupe.pl/witam-na-blogu" target="_blank" title="Mój blog">Mój Blog</a></li>
</ul>
</div>
<div class="colright">
<h3>Ciekawe linki</h3>
<ul>
<li><a href="http://www.strony.internetowe.jupe.pl/tutoriale-jquery" target="_blank" title="Tutoriale">Tutoriale jQuery</a></li>
<li><a href="http://www.strony.internetowe.jupe.pl/tutoriale-css/tutoriale/tutoriale-css" target="_blank" title="Tutoriale">Tutoriale css</a></li>
<li><a href="http://http://www.strony.internetowe.jupe.pl/tutoriale-php" target="_blank" title="tutoriale">Tutoriale php</a></li>
<li><a href="http://http://www.strony.internetowe.jupe.pl/tutoriale-javascript/tutoriale/java-script" title="tutoriale">Java script</a></li>
</ul>
</div>
</div>
<div style="clear:both;"></div>
</div>
<a class="trigger" href="#">MENU</a>
</body>
</html>
dodajemy stylizacje w css3
---------------------------------------------
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: 26px;
text-align:center;
font-family: verdana, helvetica, arial, sans-serif;
letter-spacing:-2px;
color:#9FC54E;
font-weight:700;
padding:20px 0 0;
}
h2 {
font-size: 24px;
text-align:center;
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;
font-family: georgia, "time new romans", serif;
}
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;
}
hr{
background-color: #333333;
height: 1px;
}
Plik jQuery jest dołanczany"zewnętrznie" na postawie podanego adresu internetowego.Nie będziemy go omawiać .Wystarczy podać adres aby jego struktura zadziałała
Brak komentarzy:
Prześlij komentarz