Sie sind auf Seite 1von 11

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.

01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Slide Out Navigation : &lt;default&gt;</title>
<script type='text/javascript' src='js/jquery-1.4.2.js'></script>
<style type="text/css">
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 10px;
list-style: none;
z-index:999999;
width:auto;
}
ul#navigation li {
display:inline;
float:left;
width:102px;
}
ul#navigation li a {
display: block;
float:left;
color:#000000;
margin-top: -2px;
height: 25px;
width:100px;
background-repeat:no-repeat;
background-position:50% 10px;
background-color:#e7f2f9;
border:1 solid #bddcef;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

ul#navigation li a:hover{
background-color:#cae3f2;
}
ul#navigation .home a{
background-image: url(png/settings.png);
}
ul#navigation .about a{
background-image: url(png/notes.png);
}
ul#navigation .search a{
background-image: url(png/notes.png);
}
ul#navigation .podcasts a{
background-image: url(png/ipod.png);
}
ul#navigation .rssfeed a{
background-image: url(png/weather.png);
}
ul#navigation .photos a{
background-image: url(png/maps.png);
}
ul#navigation .contact a{
background-image: url(png/chat.png);
}
</style>
</head>

<body>
<ul id="navigation">
<li class="home"><a href="">Home</a></li>
<li class="about"><a href="">About</a></li>
<li class="search"><a href="">Search</a></li>
<li class="photos"><a href="">Photos</a></li>
<li class="rssfeed"><a href="">Rss Feed</a></li>
<li class="podcasts"><a href="">Podcasts</a></li>
<li class="contact"><a href="">Contact</a></li>
</ul>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Spry Content Slideshow Wanderlust : &lt;default&gt;</title>
<link type='text/css' href='Spry-UI-1.7/css/ContentSlideShow/wanderlust/wanderlust-
brown.css' rel='stylesheet'/>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryDOMUtils.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryDOMEffects.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryWidget.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryPanelSelector.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryPanelSet.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryFadingPanels.js'></script>
<script type='text/javascript' src='Spry-UI-
1.7/includes/SpryContentSlideShow.js'></script>
</head>

<body>
<div id="ImageSlideShow">
<div class="article">
<div class="photo"> <img
src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-14.jpg"
alt="San Francisco, CA" />
<div class="caption">San Francisco, CA</div>
</div>
<div class="story">
<div class="banner">
<div class="title">Palace of Fine Arts</div>
<div class="subTitle">Flowers of Spring, California</div>
</div>
<div class="content">
<p>The Palace of Fine Arts was initially built for the Pan-Pacific Exposition in the
1930s, heralding San Francisco's rebirth after the 1906 earthquake.</p>
<button type="button"><span><span><span>Click for
Details</span></span></span></button>
</div>
</div>
</div>
<div class="article">
<div class="photo"> <img
src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-8.jpg"
alt="Horses" />
<div class="caption">Horses</div>
</div>
<div class="story">
<div class="banner">
<div class="title">Marin County, California</div>
<div class="subTitle">Bay Area's Best Secret</div>
</div>
<div class="content">
<p>A few short miles from downtown San Francisco, horses roam in the fields of
Marin County, California.</p>
<button type="button"><span><span><span>More
Info</span></span></span></button>
</div>
</div>
</div>
<div class="article">
<div class="photo"> <img
src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-4.jpg"
alt="Open Space" />
<div class="caption">Open Space</div>
</div>
<div class="story">
<div class="banner">
<div class="title">Marin County</div>
<div class="subTitle">Parkland</div>
</div>
<div class="content">
<p>Marin County is blessed with acres of open spaces, both public and private. </p>
<button type="button"><span><span><span>Get Packing!
</span></span></span></button>
</div>
</div>
</div>
<div class="article">
<div class="photo"> <img
src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-1.jpg"
alt="Orchids" />
<div class="caption">Orchids</div>
</div>
<div class="story">
<div class="banner">
<div class="title">Flower Garden</div>
<div class="subTitle">Flora tour in Golden Gate Park</div>
</div>
<div class="content">
<p>Orchids from all over the world can be seen in the Arboretum in Golden Gate
Park.</p>
<button type="button"><span><span><span>Find out More!
</span></span></span></button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var ImageSlideShow = new Spry.Widget.ContentSlideShow("#ImageSlideShow", {
widgetClass: "WLBSlideShow",
displayInterval: 4000,
transitionDuration: 2000
});
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>iUI : Yellow &amp; Blue</title>
<script type='text/javascript' src='iui-0.31/iui.js'></script>
<link type='text/css' href='iui-0.31/iui.css' rel='stylesheet'/>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
background: #ffffff;
color: #000000;
}

body .toolbar {
border-bottom-color: #2d3642;
border-top-color: #6d84a2;
padding: 10px;
height: 45px;
}

body ul li {
font-size : 20px;
}

.toolbar h1 {
font-size : 20px;
color: #ffff99;
}

.button {
height: 30px;
line-height: 30px;
font-size: 12px;
color: #ffff99;
}
</style>
</head>

<body>
<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
<a class="button" href="#searchForm">Search</a>
</div>

<ul id="albums" title="Albums" selected="true">


<li><a href="#TheBeatles">The Beatles</a></li>
<li><a href="#BelleSebastian">Belle & Sebastian</a></li>
<li><a href="#CrowdedHouse">Crowded House</a></li>
<li><a href="#JohnMayer">John Mayer</a></li>
<li><a href="#Zero7">Zero 7</a></li>
</ul>
<ul id="TheBeatles" title="The Beatles">
<li><a href="#songs">Abbey Road</a></li>
<li><a href="#songs">Help!</a></li>
<li><a href="#songs">Rubber Soul</a></li>
<li><a href="#songs">Sgt. Pepper's</a></li>
<li><a href="#songs">White Album</a></li>
</ul>
<ul id="BelleSebastian" title="Belle & Sebastian">
<li><a href="#songs">Boy With The Arab Strap</a></li>
<li><a href="#songs">Dear Catastrophe Waitress</a></li>
<li><a href="#songs">The Life Pursuit</a></li>
</ul>
<ul id="CrowdedHouse" title="Crowded House">
<li><a href="#songs">Crowded House</a></li>
<li><a href="#songs">Temple of Low Men</a></li>
<li><a href="#songs">Together Alone</a></li>
<li><a href="#songs">Woodface</a></li>
</ul>
<ul id="JohnMayer" title="John Mayer">
<li><a href="#songs">Continuum</a></li>
<li><a href="#songs">Heavier Things</a></li>
<li><a href="#songs">Room for Squares</a></li>
</ul>
<ul id="Zero7" title="Zero 7">
<li><a href="#songs">The Garden</a></li>
<li><a href="#songs">Simple Things</a></li>
<li><a href="#songs">When it Falls</a></li>
</ul>
<ul id="songs" title="Songs">
<li><a href="#player">Song 1</a></li>
<li><a href="#player">Song 2</a></li>
<li><a href="#player">Song 3</a></li>
<li><a href="#player">Song 4</a></li>
<li><a href="#player">Song 5</a></li>
<li><a href="#player">Song 6</a></li>
<li><a href="#player">Song 7</a></li>
<li><a href="#player">Song 8</a></li>
<li><a href="#player">Song 9</a></li>
<li><a href="#player">Song 10</a></li>
<li><a href="#player">Song 11</a></li>
</ul>
<div id="player" class="panel" title="Now Playing">
<h2>If this weren't just a demo, you might be hearing a song...</h2>
</div>
<div id="searchResults" class="panel" title="Search">
<h2>Search results go here...</h2>
</div>
<form id="searchForm" class="dialog" action="#searchResults">
<fieldset>
<h1>Music Search</h1>
<a class="button toolButton goButton" href="#searchResults">Search</a>

<label>Artist:</label>
<input type="text"/>
<label>Song:</label>
<input type="text"/>
</fieldset>
</form>
</body>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>!Yahoo Style Menu : &lt;default&gt;</title>
<script type='text/javascript'
src='Yahoo_Style_Menu/ActiveContentDropDown.js'></script>
</head>

<body>
<div id="f_source_navigation" style="position:relative; top:20px; left:0px;
width:640px;">
<!-- Don't change any part of the DIV code (Press Ctrl+Shift+F to edit) -->
<!-- saved from url=(0014)about:internet -->
<div id='menu' style='display:none;'>
<div><a href='http://f-source.com'>Flash menu</a></div>
<div class='submenu'>
<div><a href='http://f-source.com' target='_blank'>SubButton1-1</a></div>
<div><a href='http://f-source.com'>SubButton1-2</a></div>
<div><a href='http://f-source.com'>SubButton1-3</a></div>
<div><a href='http://f-source.com'>SubButton1-4</a></div>
</div>
<div><a href='http://f-source.com'>Button2</a></div>
<div class='submenu'>
<div><a href='http://f-source.com'>SubButton2-1</a></div>
<div><a href='http://f-source.com'>SubButton2-2</a></div>
<div><a href='http://f-source.com'>SubButton2-3</a></div>
<div><a href='http://f-source.com'>SubButton2-4</a></div>
</div>
<div><a href='http://f-source.com'>Button3</a></div>
<div class='submenu'>
<div><a href='http://f-source.com'>SubButton3-1</a></div>
<div><a href='javascript:alert(message)'>Test JavaScript</a></div>
<div><a href='http://f-source.com/buy/adobeMenu/'>Drop down menu</a></div>
<div><a href='http://f-source.com/dreamweaver-extensions/'>Dreamweaver
extensions</a></div>
<div><a href='http://webstunning.com/flv-player/'>FLV Player</a></div>
</div>
<div><a href='http://f-source.com'>Button4</a></div>
<div class='submenu'>
<div><a href='http://f-source.com'>SubButton4-1</a></div>
<div class='submenu'>
<div><a href='http://f-source.com'>SubButton4-1-1</a></div>
<div class='submenu'>
<div><a href='http://f-source.com'>SubButton4-1-1-1</a></div>
<div><a href='http://f-source.com'>SubButton4-1-1-2</a></div>
<div><a href='http://f-source.com'>SubButton4-1-1-3</a></div>
<div><a href='http://f-source.com'>SubButton4-1-1-4</a></div>
</div>
<div><a href='http://f-source.com'>SubButton4-1-2</a></div>
<div><a href='http://f-source.com'>SubButton4-1-3</a></div>
<div><a href='http://f-source.com'>SubButton4-1-4</a></div>
</div>
<div><a href='http://f-source.com'>SubButton4-2</a></div>
<div><a href='http://f-source.com'>SubButton4-3</a></div>
<div><a href='http://f-source.com'>SubButton4-4</a></div>
</div>
<div><a href='http://f-source.com'>&lt;b&gt;Button5&lt;/b&gt;</a></div>
<div ><a href='http://www.google.com/search?q=' target='_blank'>Search</a></div>
</div>
<!-- Flash Object code (EMBED tag will be generated automatically) -->
<div id="f-source-menu" style="position:relative;" >
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ver
sion=9,0,28,0" id="Yahoo_Style_Menu" width="640" height="37" >
<param name="movie" value="Yahoo_Style_Menu/menu.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="FlashVars"
value="flashlet={bg_Pic_URL:'None',xml_Path:'',stretch_width_to:'640px',_Transparenc
yShadow:27,_removeSubDelay:500,_minSubWidth:60,_max_height:550,showSearchFiel
d:false,searchFieldWidth:100,searchTextColor:#000000,mainSoundURL:,clickSoundUR
L:,subSoundURL:,_mainButtonHeight:37,_menuColor:#8b7bea,_mainFont:'Arial,
Helvetica, sans-
serif',_mainFontSize:13,_mainButtonTextColor:#ffffff,_mainButWidthExt:1,_mainHighl
ightColor:#6f5dd3,_TransparencyMain:100,_subButtonHeight:20,_subMenuColor:#4f3b
bf,_subFont:'Arial, Helvetica, sans-
serif',_subFontSize:10,_subButtonTextColor:#ffffff,_subHighlightColor:#8b7bea,_Trans
parencySub:100,_pos_type:'relative',_pos_centered:false,_pos_top:20,_pos_left:0,_pos_i
nsert:'the insertion point',_pos_z:0,_file_folder:'Yahoo_Style_Menu'}" />
<noscript>
The <a href="http://f-source.com/">flash menu</a> provided by f-source.com. All
Rights Reserved
</noscript>
</object>
<script type="text/javascript">var connected; var message="Hello!"; if (connected)
{ Run_f_source_menu() }else{ alert("The file MenuScript.js could not be loaded!") }
</script>
</div>
</div>
</body>
</html></html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Spry Image Slideshow - Basic : 250 x 200 Sidebar Slideshow</title>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryDOMUtils.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryDOMEffects.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryWidget.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryPanelSet.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryFadingPanels.js'></script>
<script type='text/javascript' src='Spry-UI-1.7/includes/SpryImageLoader.js'></script>
<script type='text/javascript' src='Spry-UI-
1.7/includes/SpryImageSlideShow.js'></script>
<script type='text/javascript' src='Spry-UI-
1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin.js'></script>
<link type='text/css' href='Spry-UI-1.7/css/SpryImageSlideShow.css' rel='stylesheet'/>
<style type="text/css">
#ImageSlideShow.ImageSlideShow {
width: 250px;
height: 200px;
border: solid 1px #000000;
}

#ImageSlideShow .ISSClip {
background-color: #000000;
}
</style>
</head>

<body>
<ul id="ImageSlideShow">
<li><a
href="http://labs.adobe.com/technologies/spry/demos/gallery/galleries/china/images/chin
a_01.jpg"><img
src="http://labs.adobe.com/technologies/spry/demos/gallery/galleries/china/thumbnails/c
hina_01.jpg" alt="" /></a></li>
<li><a
href="http://labs.adobe.com/technologies/spry/demos/gallery/galleries/china/images/chin
a_02.jpg"><img
src="http://labs.adobe.com/technologies/spry/demos/gallery/galleries/china/thumbnails/c
hina_02.jpg" alt="" /></a></li>
<li><a
href="http://labs.adobe.com/technologies/spry/demos/gallery/galleries/china/images/chin
a_03.jpg"><img
src="http://labs.adobe.com/technologies/spry/demos/gallery/galleries/china/thumbnails/c
hina_03.jpg" alt="" /></a></li>
<li><a
href="http://labs.adobe.com/technologies/spry/demos/gallery/galleries/china/images/chin
a_04.jpg"><img
src="http://labs.adobe.com/technologies/spry/demos/gallery/galleries/china/thumbnails/c
hina_04.jpg" alt="" /></a></li>
<li><a
href="http://labs.adobe.com/technologies/spry/demos/gallery/galleries/china/images/chin
a_05.jpg"><img
src="http://labs.adobe.com/technologies/spry/demos/gallery/galleries/china/thumbnails/c
hina_05.jpg" alt="" /></a></li>
</ul>
<script type="text/javascript">
var ImageSlideShow = new Spry.Widget.ImageSlideShow("#ImageSlideShow", {
widgetID: "ImageSlideShow",
injectionType: "replace",
autoPlay: true,
displayInterval: 4000,
transitionDuration: 2000,
componentOrder: ["view"],
plugIns: [ ]
});
</script>
</body>
</html>

Das könnte Ihnen auch gefallen