Avatar billede ettol Nybegynder
06. oktober 2006 - 11:39 Der er 9 kommentarer og
1 løsning

css menu - hvordan får jeg det valgte til at forblive valgt

Jeg har lavet nogle forskellige sider, der alle indeholder samme menu, men kan ikke finde ud af at få det valgte punkt til at forblive valgt

Min menu:

<div id="menuWrapper">
  <div id="hovedMenu">
    <div>
      <p>
        <a title="" href="01_tryksager.html" onfocus="blur()">menupunkt1</a>
        <span>&nbsp;|&nbsp;</span>
      </p>
    </div>
    <div>
      <p>
        <a title="" href="01_tryksager.html" onfocus="blur()">menupunkt2</a>
        <span>&nbsp;|&nbsp;</span>
      </p>
    </div>
    <div>
      <p>
        <a title="" href="01_tryksager.html" onfocus="blur()">menupunkt3</a>
        <span>&nbsp;|&nbsp;</span>
      </p>
    </div>
  </div>
</div>

Min css:

#menuWrapper{
  width: 800px;
  position: relative;}
#menuWrapper span{
  display: none;}
#hovedMenu a{
  clear: both;
  text-decoration: none;
  font-family: Helvetica, Arial, san-serif;
  font-size: 13px;
  margin: 2px 2px;
  padding: 2px 5px;
  color: #444;
  height: 19px;
  background-image: url(../billeder/knapOp.gif)}
html>body #hovedMenu a{
  height: 21px;}
#hovedMenu a:hover{   
  background-image: url(../billeder/knapNed.gif)}
#hovedMenu a:active{
  background-image: url(../billeder/knapNed.gif)}
html>body #hovedMenu p{
  margin: 8px 0px;}
#hovedMenu div{
  float: left;}

Jeg har kigget lidt rundt på en masse andre spørgsmål og svar, men kan ikke overføre løsningerne til min menu - ikke så det virket i hvert fald.

Håber der er nogen der kan hjælpe
Avatar billede roenving Novice
06. oktober 2006 - 16:52 #1
Hvordan mener du valgt ?-)
Avatar billede notes2c Nybegynder
06. oktober 2006 - 17:09 #2
Et mulighed kunne være sådan:

Ændre lige bagrunds farven så jeg kunne se at det virkede... Det kan du jo bare fjerne i css'en (selected)

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

<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
    margin: 0;
    padding: 0;
}
#menuWrapper{
  width: 800px;
  position: relative;}
#menuWrapper span{
  display: none;}
#hovedMenu a{
  clear: both;
  text-decoration: none;
  font-family: Helvetica, Arial, san-serif;
  font-size: 13px;
  margin: 2px 2px;
  padding: 2px 5px;
  color: #444;
  height: 19px;
  background-image: url(../billeder/knapOp.gif)}
html>body #hovedMenu a{
  height: 21px;}
#hovedMenu a:hover{   
  background-image: url(../billeder/knapNed.gif)}
#hovedMenu a:active{
  background-image: url(../billeder/knapNed.gif)}
html>body #hovedMenu p{
  margin: 8px 0px;}
#hovedMenu div{
  float: left;}
.selected {
background: url(../billeder/knapNed.gif) red;
}

-->
</style>
<script type="text/javascript">
function myBlur(elm) {
    var d = document.getElementById('menuWrapper');
    var dd = d.getElementsByTagName('a');
    for (i = 0; i < dd.length; i++) {
        // clear class name
        dd[i].className = '';
    }
    elm.className='selected';
}
</script>
</head>

<body>
<div id="menuWrapper">
  <div id="hovedMenu">
    <div>
      <p>
        <a title="" href="#" onfocus="myBlur(this);">menupunkt1</a>
        <span>&nbsp;|&nbsp;</span>
      </p>
    </div>
    <div>
      <p>
        <a title="" href="#" onfocus="myBlur(this);">menupunkt2</a>
        <span>&nbsp;|&nbsp;</span>
      </p>
    </div>
    <div>
      <p>
        <a title="" href="#" onfocus="myBlur(this);">menupunkt3</a>
        <span>&nbsp;|&nbsp;</span>
      </p>
    </div>
  </div>
</div>



</body>
</html>
Avatar billede mclemens Nybegynder
06. oktober 2006 - 17:43 #3
^ - virker kun ved brug af # og ikke ved linking til externe filer...
... såfremt der er behovet for at klik ned knappen bevares ved eksterne filer
kan der leges med http://www.eksperten.dk/spm/732560#rid6429728
Avatar billede mclemens Nybegynder
06. oktober 2006 - 17:47 #4
Eksempel:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
#menuWrapper{
  width: 800px;
  position: relative;}
#menuWrapper span{
  display: none;}
#hovedMenu a{
  clear: both;
  text-decoration: none;
  font-family: Helvetica, Arial, san-serif;
  font-size: 13px;
  margin: 2px 2px;
  padding: 2px 5px;
  color: #444;
  height: 19px;
  background: #00f url(../billeder/knapOp.gif)}
html>body #hovedMenu a{
  height: 21px;}
#hovedMenu a:hover{ 
  background: #0ff url(../billeder/knapNed.gif)}
#hovedMenu a:active{
  background: #0ff url(../billeder/knapNed.gif)}





#hovedMenu #activelink {
  background: #0ff url(../billeder/knapNed.gif);
}





html>body #hovedMenu p{
  margin: 8px 0px;}
#hovedMenu div{
  float: left;}
</style>

<script type="text/javascript">

if(window.addEventListener)window.addEventListener("load", function(){wload();}, false);
else if(window.attachEvent)window.attachEvent("onload", function(){wload();});

function wload(){
  var links=document.getElementById("hovedMenu").getElementsByTagName("a");
  for(i=0,i2=links.length;i<i2;i++){
    if(links[i].href==window.location.href||links[i].href.replace("index.html","")==window.location.href){
      links[i].setAttribute("id","activelink");
      i=i2;
    }
  }
}

</script>

</head><body>
<div id="menuWrapper">
  <div id="hovedMenu">
    <div>
      <p>
        <a title="" href="01_tryksager.html" onfocus="blur()">menupunkt1</a>
        <span>&nbsp;|&nbsp;</span>
      </p>
    </div>
    <div>
      <p>
        <a title="" href="02_tryksager.html" onfocus="blur()">menupunkt2</a>
        <span>&nbsp;|&nbsp;</span>
      </p>
    </div>
    <div>
      <p>
        <a title="" href="03_tryksager.html" onfocus="blur()">menupunkt3</a>
        <span>&nbsp;|&nbsp;</span>
      </p>
    </div>
  </div>
</div>
</body></html>



(gem som 01_tryksager.html samt 02_tryksager.html og 03_tryksager.html og klik)
Avatar billede mclemens Nybegynder
06. oktober 2006 - 17:49 #5
scriptet kan så lægges externt som:

jsmenu.js
med indholdet:

if(window.addEventListener)window.addEventListener("load", function(){wload();}, false);
else if(window.attachEvent)window.attachEvent("onload", function(){wload();});

function wload(){
  var links=document.getElementById("hovedMenu").getElementsByTagName("a");
  for(i=0,i2=links.length;i<i2;i++){
    if(links[i].href==window.location.href||links[i].href.replace("index.html","")==window.location.href){
      links[i].setAttribute("id","activelink");
      i=i2;
    }
  }
}




og så indsættelse af denne linje på dine sider

<script type="text/javascript" src="jsmenu.js"></script>
- src skal nok lige rettes til ...
Avatar billede mclemens Nybegynder
06. oktober 2006 - 17:52 #6
scriptet kan godt forkortes hvis det ikke skal tage hensyn til filer som index.html
(index.html skulle måske være index.php eller andet afhængig af hvad der catchede request på http:// domænenavn.dk/underdir/ ) men en forkortelse af scriptet kunne være:

function wload(){
  var links=document.getElementById("hovedMenu").getElementsByTagName("a");
  for(i=0,i2=links.length;i<i2;i++){
    if(links[i].href==window.location.href){
      links[i].setAttribute("id","activelink");
      i=i2;
    }
  }
}
Avatar billede notes2c Nybegynder
06. oktober 2006 - 18:30 #7
Men hvis det hele styres fra server site kunne men jo blot sætte klassen på det menupunkt som var valgt. Så var man helt fri for at bruge javascript.
Avatar billede mclemens Nybegynder
06. oktober 2006 - 18:48 #8
Jeps, det ville være det bedste :)
(det gør jeg også på mit site via php)
Avatar billede ettol Nybegynder
09. oktober 2006 - 10:10 #9
>>mclemens

mange tak for hjælpen - det var lige det jeg skulle bruge - er blevet meget rusten i det der med kodning, da det er nogle år siden jeg sidst har leget med det.

Siden skal hostes et sted hvor der ikke bliver understøttet alt muligt fancyt (med mindre man betaler en million... plus minus) så det skal bare ind på html siden det hele
Avatar billede mclemens Nybegynder
09. oktober 2006 - 10:35 #10
Velbekom, og tak for point :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester