Problem med meny i IE7

EvilCat · 29. januar 2007

Hei. Jeg har designet og gjort ferdig struktur i css og inkludert for meny. Etter å ha testet det i Opera så ser det riktig ut.

Se siden i Opera: Utkast Design 2007

Men så testet jeg det i IE7 og det viser seg helt anerledes i menyen der noen som

gjentate ganger forvirrer meg

Noen som vet hvorfor eller hva som er feil? Trenger hjelp til å rette opp feilen.

Html

Klikk for å se/fjerne innholdet nedenfor

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Rycon AS</title>
<link href="rycon.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
cssdropdownRoot = document.getElementById("cssdropdown");
for (x=0; x<cssdropdownRoot.childNodes.length; x++) {
node = cssdropdownRoot.childNodes[x];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}

if (window.attachEvent)
window.attachEvent("onload", startList)
else
window.onload=startList;

//--><!]]></script>

</head>

<body onload="MM_preloadImages('copyright/button1.png')">
<div id="top_hjelp">//<a href="#">Sitemap</a> //<a href="#">Høykontrast</a> //<a href="#">Skriftstørrelse </a> //<a href="#">English</a> //<a href="#">Norsk</a></div>
<div id="top">
<div align="left"><img src="copyright/ryc_logo.png" width="200" height="89" /></div>
</div>
<div id="box">
<div id="meny1"></div>
<div id="header"><img src="copyright/header_v1.2.png" width="600" height="319" /></div>
<div id="meny2">
<ul class="topmenu" id="dmenu">
<li class="topmenuli"><a href="?main=nyheter" class="topmenutitle">Nyheter</a>
</li>

<li class="topmenuli"><a href="?main=varer_og_tjenester" class="topmenutitle">Varer og tjenester</a>

  <ul class="submenuul">
 <li class="submenuli"><a href="?main=dekkhotell">Dekkhotell</a></li>
 <li class="submenuli"><a href="Vjobbfrukt">Jobbfrukt</a></li>
 <li class="submenuli"><a href="?main=kopiering">Kopiering</a></li>
 <li class="submenuli"><a href="?main=webtjeneste">Webtjeneste</a></li>
 <li class="submenuli"><a href="?main=tegnsprak">Tegnspråk</a></li>
</ul>

</li>

<li class="topmenuli"><a href="?main=om_rycon" class="topmenutitle">Om Rycon</a>

  <ul class="submenuul">
 <li class="submenuli"><a href="?main=attforingsavdeling">Attføringsavdeling</a></li>
 <li class="submenuli"><a href="?main=produksjonavdeling">Produksjonavdeling</a></li>
 <li class="submenuli"><a href="?main=prosjektavdeling">Prosjektavdeling</a></li>
 <li class="submenuli"><a href="?main=tolkeavdeling">Tolkeavdeling</a></li>
</ul>

</li>

<li class="topmenuli"><a href="?main=medarbeidere" class="topmenutitle">Medarbeidere</a>
</li>

<li class="topmenuli"><a href="?main=kontakt" class="topmenutitle">Kontakt</a>
</li>
</ul>
</div>
<div id="content">
 <?php

function listFiles($folder, $exclude = array('.','..'))
{//funksjonen lister opp alle filer i mappa
if (is_dir($folder))
   {
       if ($dh = opendir($folder))
       {
           while ((($file = readdir($dh)) !== false))
           {
           if(in_array($file, $exclude)){continue;}
              $files[] = $file;
           }
      closedir($dh);
       }
      
       
   }
   
   return $files; // inneholder alle filer i mappa $folder
}


if($_GET['main'])
{
    $safe = str_replace(array('.','..'), '', $_GET['main']) . '.php';
    $thisFolder = './';// folder å sjekke etter om filene eksisterer i
    $filesInFolder = listFiles($thisFolder);
    //hvis fila finnes i ___DEN GITTE__ mappa
    //gitt at fila heter $_GET['main'] + ".php"
       if(in_array($safe , $filesInFolder))
       {
           include $safe;
           //hvsis fks sida er index.php?main=noe og noe.php finnes, vil noe.php bli inkludert
       }
       
       //else{} fila finnes ikke i denne mappa
}
else
{// $_GET['main'] er ikke satt, inkludér forside?
   //Nei! først sjekker vi om brukeren har kommed hit via ei lenke
   if($_SERVER['HTTP_REFERER'])
   {//feilmelding hvis brukeren kom gjennom ei lenke
    echo 'Det har skjedd en teknisk feil. Venneligs forsett med surfingen.';
   }
   else
   {
   //bruker kom ikke gjennom lenke, og ingenting er satt i adresselinja. Inkludér forside
   include 'hovedside.php'; // ikke glem å skifte ut
   }

}
?>
</div>
<div id="footer">
<p class="style1 style1">Ryensvingen 11B, 0680 Oslo - Tlf. 23 24 45 20 - Ttlf. 23 24 45 25 - Fax. 23 24 45 30<br />
 Copyright © Rycon AS 2007</p>
</div>
</div>
</body>
</html>

Css

Klikk for å se/fjerne innholdet nedenfor

html { 
 padding:0px;
 margin:0px;
}

body {
margin: 0px;
margin:0px;
padding:0px;
background-color: #FFFFFF;
text-align: right;
background-image: url(copyright/bg00544.png);
}

#meny1 {
margin: 0px;
padding: 0px;
height: 15px;
width: 600px;
background-color: transparent;
}

#meny2 {
margin: 0px;
padding: 0px;
height: 25px;
width: 600px;
background-color: #D0A11D;
font-family: Verdana, Arial, Helvetica, sans-serif;
float: right;
}

#header {
background-color: #D0A11D;
margin: 0px;
padding: 0px;
height: 319px;
float: left;
width: 600px;
border-top: 6px solid #D0A11D;
}

#top_hjelp {
width: 100%;
height: 20px;
margin: 0px 10px 0px -30px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #102052;
}

#top {
width: 100%;
height: 50px;
margin: 0px 0px 0px 50px;
}

p,pre, h1 {
margin:0px 10px 10px 10px;
}

a {
color: #102052;
font-size: 14px;
text-decoration: none;
background-color: transparent;
}

a:hover
{
color: #FFFFFF;
font-size: 14px;
background-color: #A95422;
text-decoration: none;
}

pre {
color: #333333;
font-size: 11px;
background-color:transparent;
font-family: Arial, Helvetica, sans-serif;
}

/*  positioning-layers statisch und absolut */

#box {
width:600px;
margin: 0px auto;
padding:0px;
text-align:left;
float: none;
background-color: transparent;
}

#side-a {
width:150px;
padding:0px;
float:left;
background-color:#FFFFFF;
height: 350px;
border-bottom: 6px solid #D0A11D;
}

#content {
width:600px;
padding:0px;
float:left;
background-color:#FFFFFF;
overflow: auto;
height: 350px;
border-bottom: 6px solid #D0A11D;
}

#side-b {
width:600px;
padding:0px;
float:left;
height: 380px;
background-color: #FFFFFF;
}

#side-c {
width:376px;
padding:0px;
float:left;
background-color:#FFFFFF;
height: 170px;
border-top: 2px solid #D0A11D;
}

#footer {
width: 600px;
color: #102052;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
border-top: 6px solid #D0A11D;
background-color: transparent;
background-image: url(copyright/footerbg_v1.2.png);
}

#masterdiv {
background-color: #FFFFFF;
border-left: 5px;
height: 100px;
margin: 0px 0px 0px 10px;
}

#menu2 {
background-color: #FFFFFF;
border-left: 0px;
height: 30px;
margin: 0px 0px 0px 4px;
}

#menu3 {
border: 5px 0px 0px;
border-left: 4px solid #FFFFFF;
border-right: 4px solid #FFFFFF;
border-bottom: 4px solid #FFFFFF;
border-top: 6px solid #FFFFFF;
background-color: #FFFFFF;
height: 60px;
}

#edialog {
background-color: #E0E0E0;
height: 81px;
border: 5px 0px 0px;
border-left: 4px solid #FFFFFF;
border-right: 4px solid #FFFFFF;
border-bottom: 4px solid #FFFFFF;
border-top: 4px solid #FFFFFF;
}

#banner1 {
border: 5px 0px 0px;
border-left: 2px solid #D0A11D;
border-right: 2px solid #D0A11D;
border-bottom: 2px solid #D0A11D;
border-top: 2px solid #D0A11D;
background-color: #E0E0E0;
height: 366px;
width: 150px;
float: none;
left: 996px;
top: 78px;
display: block;
position: absolute;
}

#banner2 {
border: 5px 0px 0px;
border-left: 2px solid #D0A11D;
border-right: 2px solid #D0A11D;
border-bottom: 2px solid #D0A11D;
border-top: 2px solid #D0A11D;
background-color: #E0E0E0;
height: 366px;
width: 150px;
float: none;
position: absolute;
left: 996px;
top: 453px;
}

/* minimum menu requirements for functionality */

.topmenuul{
list-style-type:none;
margin:0;
padding:0;
}

.topmenuli{
list-style-type:none;
float:left;
margin: -10px 0px 0px -10px;
padding: 0px 5px 5px 5px;
}

.topmenutitle{
display:inline;
width:130px;
margin: 5px 0px 0px 5px;
padding: 5px 5px 5px 5px;
}

.submenuul{
list-style-type:none;
position:absolute;
margin: 0px 0px 0px 5px;
padding:5px 5px 5px 5px;
display:none;
background-color: #D0A11D;
}

.submenuli a{
display:block;
width:140px;
}

li:hover ul , li.over ul{ /* lists nested under hovered list items */
display: block;
}

#dmenu li>ul { 
top: auto;
left: auto;
}

#content {
clear: none;

}

#div1 {
width: 130px;
height: 350px;
float: left;
}

#div2 {
width: 460px;
height: 350px;
float: left;
}

Takker forhånd

Endret 29. januar 2007 av EvilCat

29. januar 2007

Lurer litt på dette jeg også, virker som IE7 ødelegger mange slike menyer.

Vurderer å innføre IE7 på de 1000 pc-ene som elevene bruker her, men så langt er veldig liten sjangs med så mye feil i IE7.

EvilCat · 29. januar 2007

Lurer litt på dette jeg også, virker som IE7 ødelegger mange slike menyer.
Vurderer å innføre IE7 på de 1000 pc-ene som elevene bruker her, men så langt er veldig liten sjangs med så mye feil i IE7.

7822494[/snapback]

Hei =Øyvind=

Jeg har forstått det slik at det ofte ikke fungerer 100% med ulike meny man lager i IE7 eller IE6. Det er ganske irriterende men det må jo alltids finnes en løsning på dette. Har lest et sted i forumet at man kan for eksempel bruke en slags hack kode som tolker slik "". Men det har jeg også testet og virker ikke helt. Det blir bare krøll med siden.

Så jeg finner ikke løsning på dette etter mange timers letting rundt

Håper noen der ute som vet dette og kan hjelpe med å løse det.

Men tror du det finnes en annen meny med css lik som den på siden som fungerer i IE7?

Endret 29. januar 2007 av EvilCat

nPulz · 29. januar 2007

Hei du kan bruke en slik funksjon som er skrevet over hos EvilCat, samt legge inn en ekstra kodesnutt på hver kode som skal leses i firefox, slik at IE ikke leser denne og går over på det andre stilarket.

Om du legger til "html>body" før #div .class i cssen, så vil ikke IE lese denne og gå videre.

Feks:

#content {
width: 430px;
margin: 0 140px 20px 155px;
padding: 0 14px 20px 14px;
line-height: 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000;
border-left: 1px solid #E9E9E9;
border-right: 1px solid #E9E9E9;
}

html>body #content { /*IE Hack, endre størrelse på denne for at den skal endres i FireFox*/
 width: 470px;

Endret 29. januar 2007 av nPulz

EvilCat · 29. januar 2007

Hei du kan bruke en slik funksjon som er skrevet over hos EvilCat, samt legge inn en ekstra kodesnutt på hver kode som skal leses i firefox, slik at IE ikke leser denne og går over på det andre stilarket.

Om du legger til "html>body" før #div .class i cssen, så vil ikke IE lese denne og gå videre.

Feks:
#content {
width: 430px;
margin: 0 140px 20px 155px;
padding: 0 14px 20px 14px;
line-height: 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000;
border-left: 1px solid #E9E9E9;
border-right: 1px solid #E9E9E9;
}

html>body #content { /*IE Hack, endre størrelse på denne for at den skal endres i FireFox*/
 width: 470px;
7822568[/snapback]

Hei nPulz.

Prøvde endre på det som du foreslo, men hjalp heller ikke. Det viser bare enda verre på siden Men takk for hjelpen. Jeg skal prøve gå gjennom koden i css engang til og se og endre litt der.

nPulz · 29. januar 2007

Kan du legge ut koden her, hvor du la inn den koden jeg skrev ovenfor ?

EvilCat · 29. januar 2007

Kan du legge ut koden her, hvor du la inn den koden jeg skrev ovenfor ?

7822936[/snapback]

Hello nPulz

Her er koden jeg endra med din kode fra øverst.

Html

Klikk for å se/fjerne innholdet nedenfor

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Rycon AS</title>
<link href="rycon.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
cssdropdownRoot = document.getElementById("cssdropdown");
for (x=0; x<cssdropdownRoot.childNodes.length; x++) {
node = cssdropdownRoot.childNodes[x];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}

if (window.attachEvent)
window.attachEvent("onload", startList)
else
window.onload=startList;

//--><!]]></script>

</head>

<html>
<body>
<div id="top_hjelp">//<a href="#">Sitemap</a> //<a href="#">Høykontrast</a> //<a href="#">Skriftstørrelse </a> //<a href="#">English</a> //<a href="#">Norsk</a></div>
<div id="top">
<div align="left"><img src="copyright/ryc_logo.png" width="200" height="89" /></div>
</div>
<div id="box">
<div id="meny1"></div>
<div id="header"><img src="copyright/header_v1.2.png" width="600" height="319" /></div>
<div id="meny2">
<ul class="topmenu" id="dmenu">
<li class="topmenuli"><a href="?main=nyheter" class="topmenutitle">Nyheter</a>
</li>

<li class="topmenuli"><a href="?main=varer_og_tjenester" class="topmenutitle">Varer og tjenester</a>

  <ul class="submenuul">
 <li class="submenuli"><a href="?main=dekkhotell">Dekkhotell</a></li>
 <li class="submenuli"><a href="Vjobbfrukt">Jobbfrukt</a></li>
 <li class="submenuli"><a href="?main=kopiering">Kopiering</a></li>
 <li class="submenuli"><a href="?main=webtjeneste">Webtjeneste</a></li>
 <li class="submenuli"><a href="?main=tegnsprak">Tegnspråk</a></li>
</ul>

</li>

<li class="topmenuli"><a href="?main=om_rycon" class="topmenutitle">Om Rycon</a>

  <ul class="submenuul">
 <li class="submenuli"><a href="?main=attforingsavdeling">Attføringsavdeling</a></li>
 <li class="submenuli"><a href="?main=produksjonavdeling">Produksjonavdeling</a></li>
 <li class="submenuli"><a href="?main=prosjektavdeling">Prosjektavdeling</a></li>
 <li class="submenuli"><a href="?main=tolkeavdeling">Tolkeavdeling</a></li>
</ul>

</li>

<li class="topmenuli"><a href="?main=medarbeidere" class="topmenutitle">Medarbeidere</a>
</li>

<li class="topmenuli"><a href="?main=kontakt" class="topmenutitle">Kontakt</a>
</li>
</ul>
</div>
<div id="content">
 <?php

function listFiles($folder, $exclude = array('.','..'))
{//funksjonen lister opp alle filer i mappa
if (is_dir($folder))
   {
       if ($dh = opendir($folder))
       {
           while ((($file = readdir($dh)) !== false))
           {
           if(in_array($file, $exclude)){continue;}
              $files[] = $file;
           }
      closedir($dh);
       }
      
       
   }
   
   return $files; // inneholder alle filer i mappa $folder
}


if($_GET['main'])
{
    $safe = str_replace(array('.','..'), '', $_GET['main']) . '.php';
    $thisFolder = './';// folder å sjekke etter om filene eksisterer i
    $filesInFolder = listFiles($thisFolder);
    //hvis fila finnes i ___DEN GITTE__ mappa
    //gitt at fila heter $_GET['main'] + ".php"
       if(in_array($safe , $filesInFolder))
       {
           include $safe;
           //hvsis fks sida er index.php?main=noe og noe.php finnes, vil noe.php bli inkludert
       }
       
       //else{} fila finnes ikke i denne mappa
}
else
{// $_GET['main'] er ikke satt, inkludér forside?
   //Nei! først sjekker vi om brukeren har kommed hit via ei lenke
   if($_SERVER['HTTP_REFERER'])
   {//feilmelding hvis brukeren kom gjennom ei lenke
    echo 'Det har skjedd en teknisk feil. Venneligs forsett med surfingen.';
   }
   else
   {
   //bruker kom ikke gjennom lenke, og ingenting er satt i adresselinja. Inkludér forside
   include 'hovedside.php'; // ikke glem å skifte ut
   }

}
?>
</div>
<div id="footer">
<p class="style1 style1">Ryensvingen 11B, 0680 Oslo - Tlf. 23 24 45 20 - Ttlf. 23 24 45 25 - Fax. 23 24 45 30<br />
 Copyright © Rycon AS 2007</p>
</div>
</div>
</body>
</html>

Css

Klikk for å se/fjerne innholdet nedenfor

html { 
 padding:0px;
 margin:0px;
}

body {
margin: 0px;
margin:0px;
padding:0px;
background-color: #FFFFFF;
text-align: right;
background-image: url(copyright/bg00544.png);
}

#meny1 {
margin: 0px;
padding: 0px;
height: 15px;
width: 600px;
background-color: transparent;
}

#meny2 {
margin: 0px;
padding: 0px;
height: 25px;
width: 600px;
background-color: #D0A11D;
font-family: Verdana, Arial, Helvetica, sans-serif;
float: right;
}

#header {
background-color: #D0A11D;
margin: 0px;
padding: 0px;
height: 319px;
float: left;
width: 600px;
border-top: 6px solid #D0A11D;
}

#top_hjelp {
width: 100%;
height: 20px;
margin: 0px 10px 0px -30px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #102052;
}

#top {
width: 100%;
height: 50px;
margin: 0px 0px 0px 50px;
}

p,pre, h1 {
margin:0px 10px 10px 10px;
}

a {
color: #102052;
font-size: 14px;
text-decoration: none;
background-color: transparent;
}

a:hover
{
color: #FFFFFF;
font-size: 14px;
background-color: #A95422;
text-decoration: none;
}

pre {
color: #333333;
font-size: 11px;
background-color:transparent;
font-family: Arial, Helvetica, sans-serif;
}

/*  positioning-layers statisch und absolut */

#box {
width:600px;
margin: 0px auto;
padding:0px;
text-align:left;
float: none;
background-color: transparent;
}

#side-a {
width:150px;
padding:0px;
float:left;
background-color:#FFFFFF;
height: 350px;
border-bottom: 6px solid #D0A11D;
}

#content {
width: 600px;
margin: 0 140px 20px 155px;
padding: 0 14px 20px 14px;
line-height: 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000;
border-left: 1px solid #E9E9E9;
border-right: 1px solid #E9E9E9;
}

#content { /*IE Hack, endre størrelse på denne for at den skal endres i FireFox*/
width: 470px;

#side-b {
width:600px;
padding:0px;
float:left;
height: 380px;
background-color: #FFFFFF;
}

#side-c {
width:376px;
padding:0px;
float:left;
background-color:#FFFFFF;
height: 170px;
border-top: 2px solid #D0A11D;
}

#footer {
width: 600px;
color: #102052;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
border-top: 6px solid #D0A11D;
background-color: transparent;
background-image: url(copyright/footerbg_v1.2.png);
}

#banner1 {
border: 5px 0px 0px;
border-left: 2px solid #D0A11D;
border-right: 2px solid #D0A11D;
border-bottom: 2px solid #D0A11D;
border-top: 2px solid #D0A11D;
background-color: #E0E0E0;
height: 366px;
width: 150px;
float: none;
left: 996px;
top: 78px;
display: block;
position: absolute;
}

#banner2 {
border: 5px 0px 0px;
border-left: 2px solid #D0A11D;
border-right: 2px solid #D0A11D;
border-bottom: 2px solid #D0A11D;
border-top: 2px solid #D0A11D;
background-color: #E0E0E0;
height: 366px;
width: 150px;
float: none;
position: absolute;
left: 996px;
top: 453px;
}

/* minimum menu requirements for functionality */

.topmenuul{
list-style-type:none;
margin:0;
padding:0;
}

.topmenuli{
list-style-type:none;
float:left;
margin: -10px 0px 0px -10px;
padding: 0px 5px 5px 5px;
}

.topmenutitle{
display:inline;
width:130px;
margin: 5px 0px 0px 5px;
padding: 5px 5px 5px 5px;
}

.submenuul{
list-style-type:none;
position:absolute;
margin: 0px 0px 0px 5px;
padding:5px 5px 5px 5px;
display:none;
background-color: #D0A11D;
}

.submenuli a{
display:block;
width:140px;
}

li:hover ul , li.over ul{ /* lists nested under hovered list items */
display: block;
}

#dmenu li>ul { 
top: auto;
left: auto;
}

#div1 {
width: 130px;
height: 350px;
float: left;
}

#div2 {
width: 460px;
height: 350px;
float: left;
}

Mulig jeg har gjort feil her men finner ikke det fram :/

nPulz · 29. januar 2007

Hei igjen, ser at du ikke har tilføyd "html>body" foran #div

Koden vil se slik ut

html>body #div {

}

Endret 29. januar 2007 av nPulz

EvilCat · 29. januar 2007

Hei igjen, ser at du ikke har tilføyd "html>body" foran #div

Koden vil se slik ut
html>body #div {

}
7823962[/snapback]

Hei igjen.

Å det ja, var jeg glemte. skal se på det når jeg kommer hjem fra jobben. Hvis problemet forsetter poster jeg her igjen. Takk for hjelpen

Endret 29. januar 2007 av EvilCat

Hackerboy · 29. januar 2007

Detble oppdaget problemer med IE7 den første timen den ble testet så det kommer ikke som noen sjokk at det er mange problemer med denne nettleseren.

EvilCat · 30. januar 2007

Hei igjen, ser at du ikke har tilføyd "html>body" foran #div

Koden vil se slik ut
html>body #div {

}
7823962[/snapback]

Hello

Jobbet igår med den koden du forklarte. Ser ut til at det ikke virket helt 100%. Etter å ha testet på servern funket det ikke helt. Det ble bare krøll med #content i css :/

Så fant ut en bedre løsning og fikk det til slutt til å virke på en annen måte.

Hvis du lurer på hvordan jeg gjorde det se under neste svar jeg skrev

takk for din hjelp likevel

EvilCat · 30. januar 2007

Etter mange timers jobbing fant jeg en løsning på dette. Jeg deler gjerne koden til dere alle som har bruk for det. Denne funker 100% med alle browser selv med IE7

Her er koden:

Html

Klikk for å se/fjerne innholdet nedenfor

<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="http://www.javascriptkit.com">Dekkhotell</a>'
menu1[1]='<a href="http://www.freewarejava.com">Jobbfrukt</a>'
menu1[2]='<a href="http://codingforums.com">Kopiering</a>'
menu1[3]='<a href="http://www.cssdrive.com">Webtjeneste</a>'
menu1[4]='<a href="http://www.cssdrive.com">Tegnspråk</a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="http://cnn.com">Attføringsavdeling</a>'
menu2[1]='<a href="http://msnbc.com">Produksjonavdeling</a>'
menu2[2]='<a href="http://news.bbc.co.uk">Prosjektavdeling</a>'
menu2[3]='<a href="http://news.bbc.co.uk">Tolkeavdeling</a>'
 
var menuwidth='165px' //default menu width
var menubgcolor='#D0A11D'  //menu bgcolor
var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)

dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>

<a href="default2.htm" onClick="return dropdownmenu(this, event, menu2, '200px')" onMouseout="delayhidemenu()">Nyheter</a>
   
   <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Varer og tjenester</a>
   
   <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()">Om Rycon</a>
   
   <a href="default2.htm" onClick="return dropdownmenu(this, event, menu2, '200px')" onMouseout="delayhidemenu()">Medarbeidere</a>
   
   <a href="default2.htm" onClick="return dropdownmenu(this, event, menu2, '200px')" onMouseout="delayhidemenu()">Kontakt</a>

Css

Klikk for å se/fjerne innholdet nedenfor

<style type="text/css">

#dropmenudiv{
position:absolute;
border:1px solid #D0A11D;
border-bottom-width: 0;
line-height:18px;
z-index:100;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: left;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #D0A11D;
padding: 1px 0;
text-decoration: none;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #A95422;
}

</style>

Forklaring:

Husk å plassere javascriptet først før head. Dermed Css før <script> så kan du legge til html koden etter #div altså inni diven hvor du måtte ønske å plassere menyen.

Dersom du ønsker å endre undermeny, gå til javascriptet, se etter

//Contents for menu 1

var menu1=new Array()

menu1[0]='<a href="http://www.javascriptkit.com">Dekkhotell</a>'

menu1[1]='<a href="http://www.freewarejava.com">Jobbfrukt</a>'

menu1[2]='<a href="http://codingforums.com">Kopiering</a>'

menu1[3]='<a href="http://www.cssdrive.com">Webtjeneste</a>'

menu1[4]='<a href="http://www.cssdrive.com">Tegnspråk</a>'

//Contents for menu 2, and so on

var menu2=new Array()

menu2[0]='<a href="http://cnn.com">Attføringsavdeling</a>'

menu2[1]='<a href="http://msnbc.com">Produksjonavdeling</a>'