Gå til innhold

hjelp til neddrops meny! (Fikset)

NisseMannH4X

Anbefalte innlegg

NisseMannH4X

NisseMannH4X

Skrevet
Skrevet (endret)

Hei, tenkte jeg skulle prøve å lage denne nedropsmenyen her .

 

det hele virker svært enkelt, men noe jeg ikke skjønnte.

 

Har nå denne Css fila:

 

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}

ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
} 

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}

li:hover ul, li.over ul { 
display: block; }

<ul id="nav">

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

 

Men så står det:

 

A tiny jot of JavaScript is required to kick IE back into action (line wraps marked » — Ed.):

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
 }
 node.onmouseout=function() {
 this.className=this.className.replace»
(" over", "");
  }
  }
 }
}
}
window.onload=startList;

 

 

Hvor skal jeg gjøre av denne koden med javascript? Håper noen kan hjelpe... :w00t:

Endret av NisseMannH4X
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
mohuhau

mohuhau

Skrevet
Skrevet

Du kan enten putte den i en egen fil, eller du kan legge den mellom to <script>-tager i headeren.

 

Eks1:

<script type="text/javascript" src="iedropdown.js"></script>

Eks2:

<script type="text/jacascript">
startList = function() {
....
window.onload=startList;
</script>

Lenke til kommentar
NisseMannH4X

NisseMannH4X

Skrevet
  • Forfatter
Skrevet (endret)

Får ikke det til å funke... Se her

 

Får ikke noen "dropdowns" Funker i Opera men ikke i IE, det er javascripten som liksom skal få den til å funke i ie......

 

Er ikke dette riktig satt inn?

 

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>DropDownMenu</title>
<link href="style_dropdown.css" rel="stylesheet" type="text/css">
<script type="text/jacascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace»
(" over", "");
 }
 }
}
}
}
window.onload=startList;
</script>
</head>

Endret av NisseMannH4X
Lenke til kommentar
NisseMannH4X

NisseMannH4X

Skrevet
  • Forfatter
Skrevet

Fikk til dropdown menyen her

 

Men når jeg skulle legge den inn på en siden fikk jeg et problem.... Menyen virker men den "detter" ikke opp igken etter at man har fjerna musa fra menyen. Hvorfor?

 

Her virker det ikke

 

Tror ikke det er CSS feil siden jeg har samme fil begge steder.

 

Her er html koden for test2.php (Bruker tables, Dreamweaver)

 

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--



function MM_preloadImages() { //v3.0
 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
   var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
   if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<link href="example.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace»
(" over", "");
 }
 }
}
}
}
window.onload=startList;
</script>
</head>

<body bgcolor="155970">
<div align="center">
 <table width="772" border="0" cellpadding="0" cellspacing="0" height="607">
   <!--DWLayoutTable-->
   <tr> 
     <td height="278" colspan="5" valign="top"><img src="header.jpg" width="772" height="278"></td>
   </tr>
   <tr> 
     <td height="22" colspan="5" valign="top">
<ul id="nav">
 <li>Sunfishes 
         <ul>
           <li><a href="">Blackbanded» sunfish</a></li>
           <li><a href="">Shadow bass</a></li>
           <li><a href="">Ozark bass</a></li>
           <li><a href="">White crappie</a></li>
         </ul>
       </li>

       <li>Grunts 
         <ul>
           <li><a href="">Smallmouth grunt </a></li>
           <li><a href="">Burrito</a></li>
           <li><a href="">Pigfish</a></li>
         </ul>
       </li>

       <li>Remoras 
         <ul>
           <li><a href="">Whalesucker</a></li>
           <li><a href="">Marlinsucker</a></li>
           <li><a href="">Ceylonese remora</a></li>
           <li><a href="">Spearfish remora</a></li>
           <li><a href="">Slender suckerfish</a></li>
         </ul>
       </li>
<ul id="nav"><!--DWLayoutEmptyCell--> </td>
   </tr>
   <tr> 
     <td height="7" colspan="5" valign="top"><img src="header2.jpg" width="772" height="7"></td>
   </tr>
   <tr> 
     <td width="8" height="281" valign="top" background= "left.jpg"></td>
     <td width="480" valign="top" bgcolor="#33CCFF"> 
       <?php include("nyheter/show_news.php"); ?>
     </td>
     <td width="10" valign="top" background="right.jpg" bgcolor="#33CCFF"> </td>
     <td width="267" valign="top" bgcolor="#33CCFF"><p> </p>
       <p> </p></td>
     <td width="7" valign="top" background="right.jpg" bgcolor="#33CCFF"> </td>
   </tr>
   <tr> 
     <td height="19" colspan="5" valign="top"><!--DWLayoutEmptyCell--> </td>
   </tr>
 </table>
</div>
</body>
</html>

Lenke til kommentar
mohuhau

mohuhau

Skrevet
Skrevet

Det er en god ide å validere sidene sine før du spør om hjelp da validatoren ofte finner feil som kan være litt vanskelige å oppdage når du går gjennom koden. Da må du også ha med en doctype. Dvs at du legger denne koden i toppen av html-dokumentet ditt, før <html>:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

 

Grunnen til at menyen ikke virker som den skal kan være pga at du har mer enn en id. Id-en skal kun settes en gang i et dokument. Denne feilen + noen andre hadde validatoren gitt beskjed om til deg.

Lenke til kommentar
mohuhau

mohuhau

Skrevet
Skrevet

Den første feilmeldingen: required attribute "ALT" not specified betyr at du mangler alt tag på et bilde. Alle bilder skal ha en alternativ tekst som vises dersom bildet ikke kan lastes eller dersom brukeren har slått av bildevisning osv...

 

Den andre: document type does not allow element "UL" here; assuming missing "LI" start-tag Dette betyr at du har en ul en plass den ikke kan være. Dette kommer av at du har en liste (ul) tidliggere som ikke er avsluttet. Denne listen skal du egentlig avslutte her, og ikke lage en. Det korrekte her blir da å bytte ut <ul> med </ul>.

Lenke til kommentar
NisseMannH4X

NisseMannH4X

Skrevet
  • Forfatter
Skrevet

har endra en del emn lurte på om du bare kunne ratta på det siste som er igjen? Jeg kan ikke så mye kode skjønner du. Er bare noen feil igjen nå...

 

validering

 

Den biten kode som inneholder feil:

 

      <td width="772" height="171" valign="top"><img src="header.jpg" width="772" height="278"></td>
   </tr>
   <tr> 
     <td height="21" valign="top">
<ul id=nav>
 <li>Sunfishes 
         <ul>
           <li><a href="">Blackbanded» sunfish</a></li>
           <li><a href="">Shadow bass</a></li>
           <li><a href="">Ozark bass</a></li>
           <li><a href="">White crappie</a></li>
         </ul>
       </li>

       <li>Grunts 
         <ul>
           <li><a href="">Smallmouth grunt </a></li>
           <li><a href="">Burrito</a></li>
           <li><a href="">Pigfish</a></li>
         </ul>
       </li>

       <li>Remoras 
         <ul>
           <li><a href="">Whalesucker</a></li>
           <li><a href="">Marlinsucker</a></li>
           <li><a href="">Ceylonese remora</a></li>
           <li><a href="">Spearfish remora</a></li>
           <li><a href="">Slender suckerfish</a></li>
         </ul>
       </li>
<!--DWLayoutEmptyCell--> </td>
   </tr>
   <tr> 
     <td height="248" valign="top" bgcolor="#33CCFF"><!--DWLayoutEmptyCell--> </td>
   </tr>
 </table>
</div>
</body>
</html>

Lenke til kommentar
mohuhau

mohuhau

Skrevet
Skrevet

Du må framdeles avslutte <ul>-en din. Altså legge til </ul> rett etter den siste </li>, og rett før <!--DWLayoutEmptyCell-->. Men problemet med dropdown-menyen ligger ikke her, men i javascript koden din. Dersom du ser på koden på denne siden og på siden med bare menyen kan du se en vesentlig forskjell. På siden med problemer har du denne linjen: 

 this.className=this.className.replace»
(" over", "");

Dettet skal egentlig stå på en linje, men alistapart legger til en » når linjene brekkes. Du må altså bare bytte denne ut med: 

this.className=this.className.replace(" over", "");

Det er dessuten unødvendig og starte en ny tråd om samme emne.

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...