In diesem Tutorial werden wir mit Jquery und CSS3 schnell und einfach einen Seitenslider erstellen. Mit CSS3 haben wir die Möglichkeit manche interessanten Sachen im Webdesign einfacher zu gestalten.
Das HTML
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”de” lang=”de”>
<head>
<title>Seitenslider </title>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″ />
<meta name=”description” content=”" />
<meta name=”author” content=”" />
<meta name=”keywords” content=”" />
<script type=”text/javascript” src=”http://jqueryjs.googlecode.com/files/jquery-1.3.2.js”></script>
<link href=”style.css” type=”text/css” rel=”stylesheet” />
<script type=”text/javascript”>
$(document).ready(function(){
$(“.trigger”).click(function(){
$(“.panel”).toggle(“fast”);
$(this).toggleClass(“active”);
return false;
});
});
</script>
</head>
Im ersten Bereich habe ich die jquery eingebaut damit unser Slider dann auch das macht was wir wollen. Es ist keine Hexerei die Anforderungen für Jquery zu schreiben. Wenn ihr mal nicht weiter kommt dann schaut einmal auf der Jquery Homepage nach dort bekommt ihr immer Hilfe.
Weiter geht es.
<div id=”container”>
<h1>Verticaler Sliderbutton mit Infofunktion </h1>
<h2>Hier lassen wir nun einen Sliderbutton seine Arbeit machen </h2>
<p>Wir werden den Button mit CSS3 gestalten. </p>
<div class=”content”>
<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>
<div class=”panel”>
<h3>Dein neuer Slider </h3>
<p>Schnell und einfach gemacht. </p>
<p>Diesen Slider können wir auch für ander Anwendungen nutzen. Z. B. einen Bereich für die Überstzunmg einer Seite. </p>
<h3>Hier kann der erste Text stehen </h3>
<img class=”#” alt=”Dein Bild ” />
<p>Wieder Platz für deinen Text </p>
<div style=”clear:both;”></div>
<div class=”columns”>
<div class=”colleft”>
<h3>Navigation</h3>
<ul>
<li><a href=”#” title=”home”>Home</a></li>
<li><a href=”#” title=”about”>About</a></li>
<li><a href=”#” title=”portfolio”>Portfolio</a></li>
<li><a href=#” title=”contact”>Contact</a></li>
<li><a href=# title=”blog”>Blog</a></li>
</ul>
</div>
<div class=”colright”>
<h3>Social Media </h3>
<ul>
<li><a href=”#” title=”Twitter”>Twitter</a></li>
<li><a href=”#” title=”Facebook”>Facebook</a></li>
<li><a href=”h#” title=”Sonstiges”>Sonstiger</a></li>
<li><a href=”#” title=”Sonstiges “>Sonstiges </a></li>
<li><a href=”#” title=”Noch mehr”>Noch mehr </a></li>
</ul>
</div>
</div>
<div style=”clear:both;”></div>
</div>
<a class=”trigger” href=”#”>infos</a>
Ich habe hier jetzt keine besondere HTML aufgebaut sondern nur eine einfache Sache damit ihr seht wie man es machen kann. Es soll euch nur einfach die Idee vermitteln. Wir machen jetzt weiter mit der CSS. Hier habe ich etwas mehr geschrieben aber keine Sorge jeder Punkt erklärt sich von alleine.
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;
}
Wie ihr seht habe ich hier einige CSS3 Befehle drin. Zwar haben wir das Problem das noch immer nicht alle Browser CSS3 erkennen aber das macht nicht denn die meisten User verwenden schon aktuelle Browser. Für die alten Browser könnt ih noch die Befehle schreiben und schon sollte es auch in dem IE6 passen.
Quelle: Jürgen Schmidt
