XHTML
- Kod: Zaznacz wszystko
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2" />
<meta name="author" content="Buda" />
<title>tytul</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
<script type="text/javascript" src="menu.js"></script>
</head>
<body>
<div class="strona">
<div class="strona1">
<div class="logo">
LOGO
</div>
<div class="menu">
<ul>
<li><p></p></li>
<li><a href="123.html">Główna</a></li>
<dl id="menu0">
<dt><li><a>Wystawy</a></li></dt>
<dd>
<dl>
<dt><li><a>Białystok</a><li></dt>
<dt><li><a>Gdynia</a><li></dt>
<dt><li><a>Kraków</a><li></dt>
<dt><li><a>Lublin</a><li></dt>
<dt><li><a>Rzeszów</a><li></dt>
<dt><li><a>Warszawa</a><li></dt>
<dt><li><a>Wrocław</a><li></dt>
</dl>
</dd>
</dl>
<li><a href="12.html">Firmy</a></li>
<li><a href="1234.html">Kontakt</a></li>
<li><a href="******">Forum</a></li>
</ul>
</div>
<div class="tresc">
<h2>tytuł 1</h2>
<div class="underline">
</div>
<p>
There's a lady who's sure all that glitters is gold
And she's buying a stairway to heaven.
When she gets there she knows, if the stores are all closed
With a word she can get what she came for.
Ooh, ooh, and she's buying a stairway to heaven.
There's a sign on the wall but she wants to be sure
'Cause you know sometimes words have two meanings.
In a tree by the brook, there's a songbird who sings,
Sometimes all of our thoughts are misgiven.
Ooh, it makes me wonder,
Ooh, it makes me wonder.
There's a feeling I get when I look to the west,
And my spirit is crying for leaving.
In my thoughts I have seen rings of smoke through the trees,
And the voices of those who standing looking.
Ooh, it makes me wonder,
Ooh, it really makes me wonder.
And it's whispered that soon if we all call the tune
Then the piper will lead us to reason.
And a new day will dawn for those who stand long
And the forests will echo with laughter.
If there's a bustle in your hedgerow, don't be alarmed now,
It's just a spring clean for the May queen. Yes, there are two paths you can go by, but in the long run
There's still time to change the road you're on.
And it makes me wonder.
Your head is humming and it won't go, in case you don't know,
The piper's calling you to join him,
Dear lady, can you hear the wind blow, and did you know
Your stairway lies on the whispering wind.
And as we wind on down the road
Our shadows taller than our soul.
There walks a lady we all know
Who shines white light and wants to show
How everything still turns to gold.
And if you listen very hard
The tune will come to you at last.
When all are one and one is all
To be a rock and not to roll.
And she's buying a stairway to heaven.
</p>
<h2>tytuł 2</h2>
<div class="underline">
</div>
<p>New blood joins this earth
And quikly he's subdued
Through constant pain disgrace
The young boy learns their rules
With time the child draws in
This whipping boy done wrong
Deprived of all his thoughts
The young man struggles on and on he's known
A vow unto his own
That never from this day
His will they'll take away
What I've felt
What I've known
Never shined through in what I've shown
Never be
Never see
Won't see what might have been
What I've felt
What I've known
Never shined through in what I've shown
Never free
Never me
So I dub thee unforgiven
They dedicate their lives
To running all of his
He tries to please them all
This bitter man he is
Throughout his life the same
He's battled constantly
This fight he cannot win
A tired man they see no longer cares
The old man then prepares
To die regretfully
That old man here is me
What I've felt
What I've known
Never shined through in what I've shown
Never be
Never see
Won't see what might have been
What I've felt
What I've known
Never shined through in what I've shown
Never free
Never me
So I dub the unforgiven
You labeled me
I'll label you
So I dub the unforgiven
</p>
</div>
<div class="stopka">
<p>Designed by: ********</p>
</div>
</div>
</div>
<script type="text/javascript">
// <![CDATA[
new Menu('menu0');
// ]]>
</script>
</body>
</html>
CSS:
- Kod: Zaznacz wszystko
* {
margin: 0;
padding: 0;
}
body {
background: #e2e2e2 url('tlo.png') repeat;
font: normal 90% Tahoma,sans-serif;
}
.strona {
width: 1000px;
text-align: center;
background: #e2e2e2;
border: 2px solid #b1b1b1;
margin: 30px auto auto auto;
}
.strona1 {
margin: 10px;
border: 1px solid #969696;
background: white;
}
a {
text-decoration: none;
color: black;
}
a:hover {
color: green;
text-decoration: underline;
}
li {
list-style: none;
}
.logo {
text-align: center;
margin-top: 20px;
margin-bottom: 50px;
height: 100px;
}
.menu {
text-align: left;
display: block;
float: left;
margin: 55px 0 100% 0;
padding: 0;
width: 150px;
height: 300px;
}
.menu a {
text-decoration: none;
display: block;
padding: 5px;
margin-left: 10px;
margin-bottom: 10px;
border-bottom: 1px solid gray;
border-right: 2px solid gray;
border-left: 5px solid gray;
border-top: 1px solid gray;
height: 20px;
background: #dadada;
}
.menu a:hover {
background: white;
display: block;
text-decoration: underline;
border-left: 5px solid #aeaeae;
border-right: none;
}
.menu p {
text-align: left;
padding: 5px;
margin-bottom: 10px;
margin-left: 35px;
width: 80%;
font-size: 2em;
}
.wystawy {
margin: 0;
padding: 0;
border: none;
}
.underline {
border-bottom: 1px solid #259086;
width: 200px;
margin-left: 20px;
margin-bottom: 20px;
}
.tresc {
text-align: justify;
background: transparent;
margin-left: 170px;
margin-top: 70px;
border-left: 1px solid gray;
}
.tresc p {
font-family: "Gisha",sans-serif;
letter-spacing: 0.1em;
margin: 10px;
margin-left: 20px;
margin-bottom: 50px;
margin-right: 70px;
text-indent: 2em;
}
.tresc h2 {
color: #259086;
margin-left: 20px;
letter-spacing: 0.5em;
}
.stopka {
text-align: center;
margin-top: 20px;
}
.stopka p {
}
JS
- Kod: Zaznacz wszystko
/**
* @author Sławomir Kokłowski {@link http://www.kurshtml.boo.pl}
* @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!)
*/
function Menu(id, style, otworz, wysun, czasRozwin, czasZwin, czasOtworz, czasZamknij, nieInicjalizuj)
{
if (typeof czasRozwin == 'undefined' || czasRozwin < 0) czasRozwin = 25;
if (typeof czasZwin == 'undefined' || czasZwin < 0) czasZwin = 25;
if (typeof czasOtworz == 'undefined' || czasOtworz < 0) czasOtworz = 250;
if (typeof czasZamknij == 'undefined' || czasZamknij < 0) czasZamknij = 500;
var url = unescape(window.location.href.replace(/#.*/, ''));
var base = window.location.protocol + '//' + window.location.host + window.location.pathname.replace(/[^\/\\]+$/, '');
if (style)
{
if (style.indexOf(':') < 0)
{
document.getElementById(id).className += ' ' + style;
}
else
{
style = style.replace(/(^\s+|(\s|;)+$)/g, '').split(/\s*;\s*/);
for (var i = 0; i < style.length; i++)
{
style[i] = style[i].split(/\s*:\s*/);
for (var j = 0, c, property = ''; j < style[i][0].length; j++)
{
c = style[i][0].charAt(j);
property += c == '-' ? style[i][0].charAt(++j).toUpperCase() : c.toLowerCase();
}
eval('document.getElementById("' + id + '").style.' + property + ' = "' + style[i][1].replace(/"/g, '\\"') + '"');
}
}
}
for (var i = 0; i < document.getElementById(id).getElementsByTagName('dt').length; i++)
{
var dd = new Array();
var el = document.getElementById(id).getElementsByTagName('dt')[i].nextSibling;
var nodeName;
while (el && (nodeName = el.nodeName.toLowerCase()) != 'dt')
{
if (nodeName == 'dd')
{
el._dt = document.getElementById(id).getElementsByTagName('dt')[i];
if (otworz)
{
el.onmouseover = function()
{
clearTimeout(this._dt._timoutID);
this._dt._displayed = false;
this._dt.onclick();
}
el.onmouseout = function()
{
clearTimeout(this._dt._timoutID);
var dt = this._dt;
this._dt._timoutID = setTimeout(function () { dt._displayed = true; dt.onclick(); }, czasZamknij);
};
}
dd[dd.length] = el;
}
el = el.nextSibling;
}
document.getElementById(id).getElementsByTagName('dt')[i]._dd = dd;
document.getElementById(id).getElementsByTagName('dt')[i]._timoutID = null;
document.getElementById(id).getElementsByTagName('dt')[i]._displayed = false;
document.getElementById(id).getElementsByTagName('dt')[i].onclick = function()
{
clearTimeout(this._timoutID);
if (!this._displayed)
{
var el = this.parentNode.getElementsByTagName('dt')[0];
while (el)
{
if (el.nodeName.toLowerCase() == 'dt' && el != this)
{
el._displayed = false;
if (czasZwin) display(el, 0);
else display(el);
}
el = el.nextSibling;
}
}
this._displayed = !this._displayed;
if (this._displayed && czasRozwin || !this._displayed && czasZwin) display(this, 0);
else display(this);
};
if (otworz)
{
document.getElementById(id).getElementsByTagName('dt')[i].onmouseover = function()
{
clearTimeout(this._timoutID);
var dt = this;
this._timoutID = setTimeout(function () { dt._displayed = false; dt.onclick(); }, czasOtworz);
};
document.getElementById(id).getElementsByTagName('dt')[i].onmouseout = function()
{
clearTimeout(this._timoutID);
var dt = this;
this._timoutID = setTimeout(function () { dt._displayed = true; dt.onclick(); }, czasZamknij);
};
}
}
start(document.getElementById(id).getElementsByTagName('dt')[0]);
function start(dt)
{
var hide = true;
var el = dt;
while (el)
{
var nodeName = el.nodeName.toLowerCase();
if (nodeName == 'dt')
{
dt = el;
hide = true;
}
if (nodeName == 'dt' || nodeName == 'dd')
{
if (!nieInicjalizuj && el.getElementsByTagName('a').length)
{
var active = el.getElementsByTagName('a')[0].href && unescape(el.getElementsByTagName('a')[0].href.replace(/#.*/, '')) == url;
if (!active)
{
var rel = el.getElementsByTagName('a')[0].getAttribute('rel');
if (rel)
{
var matches = (' ' + rel + ' ').match(/\s+Collection\(([^)]+)\)\s+/i);
if (matches)
{
matches = matches[1].split(',');
for (var k = 0, pos = -1; k < matches.length; k++)
{
if (matches[k].charAt(0) == '[' && (pos = matches[k].lastIndexOf(']')) > 0)
{
if (new RegExp(unescape(matches[k].substring(1, pos)), matches[k].substring(pos + 1)).test(url))
{
active = true;
break;
}
}
else
{
if (/^[\/\\]/.test(matches[k])) matches[k] = window.location.protocol + '//' + window.location.host + matches[k];
else if (!/^[a-z0-9]+:/i.test(matches[k])) matches[k] = base + matches[k];
if (unescape(matches[k].replace(/[\/\\]\.([\/\\])/g, '$1').replace(/[^\/\\]+[\/\\]\.\.[\/\\]/g, '').replace(/#.*/, '')) == url)
{
active = true;
break;
}
}
}
}
}
}
if (active)
{
el.className = (el.className ? el.className + ' ' : '') + 'active';
dt._displayed = true;
display(dt);
hide = false;
var el_parentNode = el.parentNode;
while (el_parentNode != document.getElementById(id))
{
if (el_parentNode.nodeName.toLowerCase() == 'dd')
{
var el_sibling = el_parentNode.previousSibling;
while (el_sibling)
{
if (el_sibling.nodeName.toLowerCase() == 'dt')
{
el_sibling._displayed = true;
display(el_sibling)
break;
}
el_sibling = el_sibling.previousSibling;
}
}
el_parentNode = el_parentNode.parentNode;
}
}
}
}
if (nodeName == 'dd')
{
if (hide) el.style.display = 'none';
start(el.getElementsByTagName('dt')[0]);
}
el = el.nextSibling;
}
}
function display(dt, i)
{
if (typeof i == 'undefined')
{
for (var i = 0; i < dt._dd.length; i++)
{
dt._dd[i].style.display = dt._displayed ? 'block' : 'none';
if (!dt._displayed)
{
for (var j = 0; j < dt._dd[i].getElementsByTagName('dt').length; j++)
{
dt._dd[i].getElementsByTagName('dt')[j]._displayed = false;
display(dt._dd[i].getElementsByTagName('dt')[j]);
}
}
}
}
else if (i < dt._dd.length)
{
var dir = wysun ? !dt._displayed : dt._displayed;
var n = dir ? i : dt._dd.length - 1 - i;
dt._dd[n].style.display = dt._displayed ? 'block' : 'none';
if (!dt._displayed)
{
for (var j = 0; j < dt._dd[n].getElementsByTagName('dt').length; j++)
{
dt._dd[n].getElementsByTagName('dt')[j]._displayed = false;
display(dt._dd[n].getElementsByTagName('dt')[j]);
}
}
dt._timoutID = setTimeout(function() { display(dt, i + 1); }, dt._displayed ? czasRozwin : czasZwin);
}
}
}
I chciałbym aby wysuwane menu
- Kod: Zaznacz wszystko
<dt><li><a>Białystok</a><li></dt>
<dt><li><a>Gdynia</a><li></dt>
<dt><li><a>Kraków</a><li></dt>
<dt><li><a>Lublin</a><li></dt>
<dt><li><a>Rzeszów</a><li></dt>
<dt><li><a>Warszawa</a><li></dt>
<dt><li><a>Wrocław</a><li></dt>
miało inny styl np: żeby nie miało np: ramki.
Nie mam pojęcia jak odnieść się do tego miejsca.
Wstawiałem nowego diva, odwoływałem się do .menu dt/dl/dd i nic to nie dało,
prosił bym o pomoc.
pozdrawiam
