Hoe krijgen mijn hyperlinks de juiste opmaak?

jaccostam · 7 mei 2007

Ik ben pas beginnend met HTML. Ik wil een menu bouwen met onderstaand script, dat ik op internet gevonden heb. Het is een menu met "hoofdknoppen", die vervolgens uitklappen met daaronder een aantal 'subknoppen". Deze twee wil ik graag laten verschillen van opmaak.

Echter, soms wil ik de uitklappende subknoppen gebruiken, soms ook niet. Maar ik kan maar een style instellen voor mijn hyperlinks. Dus ofwel de hyperlinks van mijn subknoppen hebben de jusite opmaak, of de hoofdknoppen. Hoe kan ik dit oplossen?

Script:

<html>
<head>
<style type="text/css">
.menutitle{
cursor

ointer;
margin-bottom: 0px;
background-color:#FFFF99;
color:#008000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
font-family:'Arial',Arial;
font-size: small
}

.submenu{
cursor

ointer;
margin-bottom: 0px;
background-color:#FFFF99;
color:#008000;
width:140px;
text-align:center;
font-family:'Arial',Arial;
font-weight:normal;
font-size: x-small
}

A:link {
cursor

ointer;
margin-bottom: 0px;
background-color:#FFFF99;
color:#008000;
width:140px;
padding:2px;
text-align:center;
text-decoration:none;
font-weight:normal;
font-family:'Arial',Arial;
font-size: x-small
}

A:visited {
cursor

ointer;
margin-bottom: 0px;
background-color:#FFFF99;
color:#008000;
width:140px;
padding:2px;
text-align:center;
text-decoration:none;
font-weight:normal;
font-family:'Arial',Arial;
font-size: x-small
}

A:active {
cursor

ointer;
margin-bottom: 0px;
background-color:#FFFF00;
color:#008000;
width:140px;
padding:2px;
text-align:center;
text-decoration:none;
font-weight:normal;
font-family:'Arial',Arial;
font-size: x-small
}

A:hover {
cursor

ointer;
margin-bottom: 0px;
background-color:#FFFF99;
color:#008000;
width:140px;
padding:2px;
text-align:center;
text-decoration:none;
font-weight:normal;
font-family:'Arial',Arial;
font-size: x-small
}

</style>

<script type="text/javascript">

if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span");
if(el.style.display != "block"){
for (var i=0; i<ar.length; i++){
if (ar.className=="submenu")
ar.style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
</script>
</head>

<body>

<div id="masterdiv">

<div class="menutitle"><a href="../vieringen/actueel.htm" target="onder"
onmouseover="this.style.backgroundColor='#FFFF00';"
onmouseout="this.style.backgroundColor='#FFFF99';">Contact</a></div>

<div class="menutitle"
onmouseover="this.style.backgroundColor='#FFFF00';"
onmouseout="this.style.backgroundColor='#FFFF99';"
onclick="SwitchMenu('sub_route')">Routebeschrijving</div>
<span class="submenu" id="sub_route">
<a href="../route/auto.htm" target="onder"
onmouseover="this.style.backgroundColor='#FFFF00';"
onmouseout="this.style.backgroundColor='#FFFF99';">Per Auto</a><br />
<a href="../route/fiets.htm" target="onder"
onmouseover="this.style.backgroundColor='#FFFF00';"
onmouseout="this.style.backgroundColor='#FFFF99';">Per Fiets</a>
<a href="../route/ov.htm" target="onder"
onmouseover="this.style.backgroundColor='#FFFF00';"
onmouseout="this.style.backgroundColor='#FFFF99';">Per Trein</a>
</span>

</div>
</body>
</html>

Egel · 8 mei 2007

Probeer het eens hiermee:

PHP:

<html>
 <head>
  <title>Menus en submenus | Egel 070508 ;)</title>
  <style type="text/css">

   .menutitle, .submenu, a {
    display: block;
    width: 140px;
    background-color: #fe9;
    text-align: center;
    color: #080;
    font-family: Verdana;
    font-size: 13px;
    line-height: 20px;
    }

   .menutitle { font-weight: bold; cursor: pointer;}
   .submenu   { font-weight: normal;}

   a { text-decoration: none;}
   a:visited { background-color: #fe9;}
   a:hover   { background-color: #ffc;}
   a:active  { background-color: #fe9;}

  </style>

  <script type="text/javascript">
   if (document.getElementById) { 
    document.writeln('<style type="text/css">\r\n .submenu {display: none;}\r\n</style>');
    };
   function SwitchMenu(obj) {
    if(document.getElementById) {
     var el = document.getElementById(obj);
     if(el.style.display != 'block') {
      var ar = document.getElementById('masterdiv').getElementsByTagName('span'); 
      for (var i = 0; i < ar.length; i++) if (ar[i].className == 'submenu') ar[i].style.display = 'none';
      el.style.display = 'block';
      } else {
      el.style.display = 'none';
      };
     };
    };
  </script>
  <base target="onder">
 </head>
 <body>

  <div id="masterdiv">
   <div class="menutitle"><a href="../vieringen/actueel.htm">Contact</a></div>
   <a href="../vieringen/actueel.htm">Actueel</a>
   <div class="menutitle" onclick="SwitchMenu('sub_route')">Routebeschrijving</div>
   <span class="submenu" id="sub_route">
    <a href="../route/auto.htm">Per Auto</a>
    <a href="../route/fiets.htm">Per Fiets</a>
    <a href="../route/ov.htm">Per Trein</a>
   </span>
   <div class="menutitle"><a href="#" onclick="SwitchMenu('sub_koffie'); return false;">Koffie?</a></div>
   <span class="submenu" id="sub_koffie">
    <a href="../koffie/zwart.htm">Zwart</a>
    <a href="../koffie/melk.htm">Melk</a>
    <a href="../koffie/suiker.htm">Suiker</a>
    <a href="../koffie/melk_en_suiker.htm">Melk en suiker</a>
   </span>
  </div>

 </body>
</html>

'Contact' en 'Actueel' zijn verschillende enkele links, 'Routebeschrijving' en 'Koffie?' verschillende uitklap-stijlen.

Vr.Gr. Egel.

jaccostam · 8 mei 2007

Bedankt voor je hulp.... het werkt

Egel · 8 mei 2007

Graag gedaan!

Maar kijk ook nog even naar de nieuwe versie die is wat overzichtelijker. Ik paste namelijk net m'n reaktie aan.

Vr.Gr. Egel.

Hoe krijgen mijn hyperlinks de juiste opmaak?

jaccostam

Nieuwe gebruiker

Egel

Terugkerende gebruiker

jaccostam

Nieuwe gebruiker

Egel

Terugkerende gebruiker

Nieuwste berichten

Wij waarderen jouw privacy