Erik Ginnerskov wrote in dk.edb.internet.webdesign.html:
> Pernille Lau wrote:
>
> > Men er der nogen herinde som ved hvordan jeg kan få undersiden Vi
> > tilbyder frem, nede i mmenu2 delen - uden at ødelægge mouseover
> > effekten ???
>
> Er det noget lignende dette, du gerne vil lave:
>
>
http://www.hintzmann.dk/demos/mhalist/example4.html
>
Ja - både og. Min kode er sådan en menu, stort set - jeg har bare behov for
at man kan trykke på menuknappen MENU 1 og så komme til dens side.
Altså hvis vi nu forestiller os at MENU 1 knappen i det eksempel du har
sendt mig hedder Vi tilbyder - så er det meningen at man skal kunne trykke
her og læse en introduktion til VI tilbyder's undersider som kommer ude i
folde ud menu'erne.
Håber du forstår hvad jeg mener?
> > <ul id="dd">
> [klip en masse mere kode]
>
ok - det kommer her... vil helst ikke ligge siden ud til offentlig
beskuelse endnu, da jeg laver dn for et firma.
Men her er i første omgang javascriptet til menu'en:
<script type="text/javascript">
var TimeOut = 300;
var currentLayer = null;
var currentitem = null;
var currentLayerNum = 0;
var noClose = 0;
var closeTimer = null;
// Open Hidden Layer
function mopen(n)
{
var l = document.getElementById("menu"+n);
var mm = document.getElementById("mmenu"+n);
if(l)
{
mcancelclosetime();
l.style.visibility='visible';
if(currentLayer && (currentLayerNum != n))
currentLayer.style.visibility='hidden';
currentLayer = l;
currentitem = mm;
currentLayerNum = n;
}
else if(currentLayer)
{
currentLayer.style.visibility='hidden';
currentLayerNum = 0;
currentitem = null;
currentLayer = null;
}
}
// Turn On Close Timer
function mclosetime()
{
closeTimer = window.setTimeout(mclose, TimeOut);
}
// Cancel Close Timer
function mcancelclosetime()
{
if(closeTimer)
{
window.clearTimeout(closeTimer);
closeTimer = null;
}
}
// Close Showed Layer
function mclose()
{
if(currentLayer && noClose!=1)
{
currentLayer.style.visibility='hidden';
currentLayerNum = 0;
currentLayer = null;
currentitem = null;
}
else
{
noClose = 0;
}
currentLayer = null;
currentitem = null;
}
// Close Layer Then Click-out
document.onclick = mclose;
</script>
Selve menu'en:
<ul id="dd">
<li>
<a href="#" class="menu" id="mmenu1"
onmouseover="mopen(1);"
onmouseout="mclosetime();">Forside</a>
</li>
<li>
<a href="#" class="menu" id="mmenu2"
onmouseover="mopen(2);"
onmouseout="mclosetime();">Vi tilbyder</a>
<div class="submenu" id="menu2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime();">
<a href="#">Teknisk Service</a>
<a href="#">Hosting/Internet</a>
</div>
</li>
<li><a href="#" class="menu" id="mmenu3"
onmouseover="mopen(3);"
onmouseout="mclosetime();">Produkter</a>
<div class="submenu" id="menu3"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime();">
<a href="#">Bærbar</a>
<a href="#">Stationær PC</a>
<a href="#">Printer</a>
<a href="#">Skærm</a>
<a href="#">Tilbehør</a>
<a href="#">Programpakker</a>
</div>
</li>
<li><a href="#" class="menu" id="mmenu4"
onmouseover="mopen(4);"
onmouseout="mclosetime();">Om os</a>
<div class="submenu" id="menu4"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime();">
<a href="#">Idegrundlag</a>
<a href="#">Mission</a>
</div>
</li>
<li><a href="#" class="menu" id="mmenu5"
onmouseover="mopen(5);"
onmouseout="mclosetime();">Kursus</a>
<div class="submenu" id="menu5"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime();">
<a href="#">Administrator</a>
<a href="#">Datasikkerhed</a>
<a href="#">IT værktøjer</a>
<a href="#">Powerpoint</a>
</div>
</li>
<li><a href="#" class="menu" id="mmenu6"
onmouseover="mopen(6);"
onmouseout="mclosetime();">Kontakt</a>
<div class="submenu" id="menu6"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime();">
<a href="#">Sådan finder du os</a>
</div>
</li>
</ul>
Og Css'en på menu'en
#menu{
float:left;
width:110px;
height:470px;
background-color:red;
margin-top:8px;
margin-left:0px;
text-align:left;
}
#dd
{ margin: 0;
margin-top:20px;
padding: 0;
width:110px;
float:left;
}
#dd li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px verdana, arial;
}
#dd li a.menu
{ display: block;
text-align: center;
background: #7F2D2F;
padding: 6px ;
margin: 0px 0px 4px 0px;
color: #ffffff;
width: 98px;
text-decoration: none;
}
#dd li a.menu:hover
{ background: #BA4346;}
..submenu
{
margin-left:110px;
width:120px;
text-align:left;
margin-top:-24px;
background: #BA4346;
visibility: hidden;
position: absolute;
}
..submenu a
{ display: block;
font: 10px verdana, arial;
text-align: left;
text-decoration: none;
padding: 6px;
color:#ffffff;
}
.submenu a:hover
{ background: #7F2D2F;
color: #ffffff;
}
Hilsen
Pernille
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! =>
http://www.html.dk/tutorials