menu kontekstowe

[rastman]

Witam,
szukam prostego skryptu menu kontekstowego, jednowymiarowego(bez drzewka podmenu) w technologii js/css . Polecacie coś?

[darek_w]

Witam,
Czy mógłbyś pokazać jakieś istniejące menu gdzieś w internecie lub opisz dokładniej - bo z tego co zrozumiałem to może wystarczy Ci lista rozwijana <select><option</option></select>
Darek.

[rastman]

chodzi mi o menu kontekstowe(rozwijane), nie formularz. Np na stronie sheraton.pl po najechaniu na niektóre linki menu pojawia się menu kontekstowe

[darek_w]

Kod XHTML:

Kod: Zaznacz cały

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Moja wspaniała strona</title>
    <link rel="stylesheet" type="text/css" href="styl.css" />
	<script type="text/javascript" src="script.js"></script>
  </head>
<body>
<div class="body">
<div class="menu">
<h1 id="m1">Hotele</h1>
<ul id="l1">
	<li><a href="index.html">Sheraton</a></li>
	<li><a href="index.html">Hilton</a></li>
</ul>
<h1 id="m2">Lotniska</h1>
<ul id="l2">
	<li><a href="index.html">Warszawa</a></li>
	<li><a href="index.html">Katowice</a></li>
</ul>
</div>
</div>
</body>
</html>

Style CSS:

Kod: Zaznacz cały

body {
	margin: 0px;
	padding: 0px;
	background-color: #fff;
}
div.menu {
	border: 2px solid #f00;
	width: 120px;
	margin: 150px auto;
}
div.menu ul{
	display: none;
	list-style-type: none;
	margin-left: 0px;
	padding-left: 0px;
}

JavaScript:

Kod: Zaznacz cały

var ObjM1, ObjL1, ObjM2, ObjL2;
var d = document;
//-------------------------------------------------
function Rozwin()
{
	var ObjCurr = eval("ObjL" + this.id.charAt(1));
	ObjCurr.style.display = "block";
	this.onclick = Zwin;
}
//-------------------------------------------------
function Zwin()
{
	var ObjCurr= eval("ObjL" + this.id.charAt(1));
	ObjCurr.style.display = "none";
	this.onclick=Rozwin;
}
//-------------------------------------------------
function Zaznacz()
{
	this.style.backgroundColor="#ccc";
	}
	
function Odznacz()
{
	this.style.backgroundColor="#fff";
	}
//-------------------------------------------------
window.onload = function()
{
	ObjM1 = d.getElementById("m1");
	ObjL1 = d.getElementById("l1");
	ObjM2 = d.getElementById("m2");
	ObjL2 = d.getElementById("l2");
	
	ObjM1.onclick = Rozwin;
	ObjM1.onmouseover = Rozwin;
	ObjM1.onmouseout = Zwin;
	ObjM2.onclick = Rozwin;
	ObjM2.onmouseover = Rozwin;
	ObjM2.onmouseout = Zwin;
}
//-------------------------------------------------

Mam nadzieję ze to Ci troszkę pomoże.
Pozdrawiam.
Darek

[darek_w]

Posiedziałem chwilkę i napisałem "rozsuwane" menu bez użycia js.
Sądzę że to powinno załatwić Twoją sprawę.
XHTML:

Kod: Zaznacz cały

<!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="pl" lang="pl">
  <head>
    <title>menu rozsuwane</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
<body>
<div id="box">
<div id="hotele">
	<ul>
		<li>Hotele:</li>
		<li>Sheraton</li>
		<li>Hilton</li>
	</ul>
</div>
<div id="lotniska">
	<ul>
		<li>Lotniska:</li>
		<li>Warszawa</li>
		<li>Katowice</li>
	</ul>
</div>
</div>
</body>
</html>

CSS

Kod: Zaznacz cały

body{
font-family: Georgia, serif;
font-weight: bold;
}
ul{
list-style-type: none;
}
li{
padding-bottom: 20px;
}
li:hover{
color: #ccc;
}
#box{
width: 250px;
margin: 100px auto 0 auto;
}
div #hotele{
cursor: pointer;
background: #eee;
width: 180px;
height: 50px;
overflow: hidden;
}
div #lotniska{
cursor: pointer;
margin-top: 20px;
background: #eee;
width: 180px;
height: 50px;
overflow: hidden;
}
div #hotele:hover{
height: auto;
}
div #lotniska:hover{
height: auto;

}

Pozdrawiam
Darek