html - Ved aktiv side, andet billede end ved ikke-aktiv - Udvikleren.dk

Tags: css html navigationsbar

<< < 1 2 > >>

Bruger #16833 @ 27.10.11 19:57

Hej.
Jeg har bygget min navigationsbar op således:

HTML kode

 <body>
 <center>
 <div id="logo"></div>
 <div>
 <ul id="ulnav">    
 <li id="linav" class="forside"><a href="#" class="forside">Forside</a></li>
 <li id="linav" class="jakobnissen"><a href="#" class="jakobnissen">Jakob Nissen</a></li>
 <li id="linav" class="produkter"><a href="#" class="produkter">Produkter</a></li>
 <li id="linav" class="referencer"><a href="#" class="referencer">Referencer</a></li>
 <li id="linav" class="kontakt"><a href="#" calss="kontakt">Kontakt</a></li>
 </ul>
 </div>
 <div id="content"><p>&nbsp;</p>
   <p>Hej :-)</p>
 </div>
 <div id="copyright">Copyright © Jakob Nissen</div>
 </center>
 </body>

Med følgende CSS:

CSS kode

 @charset "UTF-8";
 /* CSS Document */
 
 body {
     
     background-color:#FFF;
     font-family:Tahoma, Geneva, sans-serif;
     font-size:12px;
 }
 
 #logo {
     width:800px;
     height:80px;
     background-image:url(logo.gif);
     background-repeat:no-repeat
 }
 
 #content {
     width:800px;
     height:500px;
     background-image:url(content.png);
     margin-bottom:5px;
     margin-top:67px;
     text-align:left;
     text-indent:10px;
     color:#000;
 }
 
 #copyright {
     width:800px;
     height:17px;
     background-image:url(copyright.png);
     text-align:center;
     color:#000;
 }
 #ulnav {
     list-style-type: none;
     width: 800px;
 }
 #linav {
     float:left;
     width:150px;
     margin-right:2px;
 }
 a.forside:LINK, a.forside:visited {
     text-align: left;
     text-decoration: none;
     color:#fe9936;
 }
 a.jakobnissen:LINK,a.jakobnissen:visited {
     text-align: left;
     text-decoration:none;
     color:#fe9936;
 }
 a.produkter:LINK, a.produkter:visited {
     text-align: left;
     text-decoration: none;
     color:#fe9936;
 }
 a.blog:LINK, a.blog:visited {
     text-align: left;
     text-decoration: none;
     color:#fe9936;
 }
 a.kontakt:LINK, a.kontakt:visited {
     text-align: left;
     text-decoration: none;
     color:#fe9936;
 }
 a.forside:hover {
     color:#999;
 }
 a.jakobnissen:hover {
     color:#999;
 }
 a.produkter:hover {
     color:#999;
 }
 a.blog:hover {
     color:#999;
 }
 a.kontakt:hover {
     color:#999;
 }
 
 .forside {
     display:block;
     width:160px;
     height:50px;
     text-indent:-9999px;
 }
 .forside a {
     display:block;
     width:100%;
     height:100%;
     background:url(nav_forside.png) no-repeat top left;
     outline:none;
 }
 .forside a:hover {
     background-position:0 -50px;
 }
 
 .jakobnissen {
     display:block;
     width:160px;
     height:50px;
     text-indent:-9999px;
 }
 .jakobnissen a {
     display:block;
     width:100%;
     height:100%;
     background:url(nav_jakobnissen.png) no-repeat top left;
     outline:none;
 }
 .jakobnissen a:hover {
     background-position:0 -50px;
 }
 
 .produkter {
     display:block;
     width:160px;
     height:50px;
     text-indent:-9999px;
 }
 .produkter a {
     display:block;
     width:100%;
     height:100%;
     background:url(nav_produkter.png) no-repeat top left;
     outline:none;
 }
 .produkter a:hover {
     background-position:0 -50px;
 }
 
 .referencer {
     display:block;
     width:160px;
     height:50px;
     text-indent:-9999px;
 }
 .referencer a {
     display:block;
     width:100%;
     height:100%;
     background:url(nav_referencer.png) no-repeat top left;
     outline:none;
 }
 .referencer a:hover {
     background-position:0 -50px;
 }
 
 .kontakt {
     display:block;
     width:160px;
     height:50px;
     text-indent:-9999px;
 }
 .kontakt a {
     display:block;
     width:100%;
     height:100%;
     background:url(nav_kontakt.png) no-repeat top left;
     outline:none;
 }
 .kontakt a:hover {
     background-position:0 -50px;
 }

Siden kan ses her: Jakob Nissen

Det jeg gerne vil have er:
Når jeg står på siden velkommen, altså min index.html skal navigationsbaren være fuldstændig som den er nu, den eneste ændring skal være at "Velkommen"-teksten inde i navigationsbaren skal være sort. Det samme skal gælde når man trykker på de andre punkter. Det er 5 forskellige billeder og dermed skal jeg også have lavet 5 billeder med sort skrift, men hvordan får jeg det kodet, så billederne med sort skrift vises når "deres" side er aktiv.

Håber i forstår mit spørgsmål. :-)

Jakob

12 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 2 karma

Sorter efter stemmer Sorter efter dato

Bruger #13010 @ 27.10.11 21:39

440

Har du adgang til PHP ?

PHP kode

 <body>
 <center>
 <div id="logo"></div>
 <div>
 <ul id="ulnav"> 
 <?php
 
 $menu = array(
     'Forside' => 'forside.php'
    ,'Jakob Nissen' => 'jakob_nissen.php'
    ,'Kontakt' => 'kontakt.php'
 );
 
 foreach($menu as $tekst => $link){
 
    echo ' <li id="linav"><a href="' . $link . '"';
 
    if(basename($_SERVER["PHP_SELF"]) == basename($link)){
 
       echo ' id="aktuelside"';
 
    }
 
    echo '>' . $tekst . '</a></li>';
 
 }
 
 ?>
 </ul>
 </div>
 <div id="content"><p>&nbsp;</p>
 <p>Hej :-)</p>
 </div>
 <div id="copyright">Copyright © Jakob Nissen</div>
 </center>
 </body>

Indlæg senest redigeret d. 27.10.2011 21:41 af Bruger #13010

Bruger #9814 @ 27.10.11 20:36

1.302

Ligesom du i dag bruger A:hover i din css, kan du bruge a:active som virker på det aktive link du har klikket på.

Bruger #16833 @ 27.10.11 22:00

Hej Brian.
Vil det sige at jeg skal bruge det samme som jeg har gjort i .class a, bare med et andet billede?

Hej scootergrisen.
Ja, det har jeg. Dog har jeg ikke meget forstand på PHP, hvad foregår der i scriptet og er der noget jeg skal sætte op på en speciel måde?

Bruger #13010 @ 27.10.11 22:06

440

Hvis du vil lære PHP er det helt klart en fordel.

Bruger #16833 @ 27.10.11 22:11

Det vil jeg gå i gang med så snart jeg har lært det andet. Men kan du hjælpe mig med det script du har posted?

Indlæg senest redigeret d. 27.10.2011 22:13 af Bruger #16833

Bruger #9814 @ 27.10.11 22:35

1.302

Jeg må indrømme at jeg svarede uden at kigge på din css. Jeg forstår ikke lige måden du har lavet det på. Hvorfor ikke have to forskellige billeder, i stedet for at lave en background-position:0 -50px; ved hover? Jeg kan godt se at det fungerer, men jeg har aldrig set metoden blive brugt før.

Du har forresten stavet class forkert i din html under kontakt.

Jeg kan nok ikke helt fortælle dig hvordan det skal være i din CSS som det er lavet - sorry.

Bruger #10216 @ 27.10.11 22:57

4.283

du kan ikke bruge :active til en noget, hvis du skal have fremhævet hvilken side er den nuværende du er på. Altså hvis man står på siden "kontakt", så skal menupunktet være gråt. :active tilknyttes når du f.eks. holder museknappen ned over et link.

Du er nødt til at have en specifik css definition som du tilknytter hvert enkelt punkt som du ønsker skal fremhæves på hver enkelte side. Er du ikke ferm til server-side programmering, skal du skrive det direkte i HTML koden.

@Brian
Årsagen er at man sparer båndbredde og requests. Ved at samle mange billeder til færre, sparer du derved et antal requests som ellers ville forlænge load tiden. Det kaldes CSS sprites. Background-position er så en god måde at flytte rundt på det sprite billede man tidligere har hæftet på et element.

Indlæg senest redigeret d. 28.10.2011 09:24 af Bruger #10216

Bruger #13010 @ 28.10.11 00:30

440

Ku godt være du skulle vente med PHP så hvis du endnu ikke har check på HTML og CSS.

Hvis du er på forside.html så kan du jo bare skrive :

HTML kode

 <li id="linav" class="forside"><a href="#" class="forside" style="background-image:url(nav_forside_sort.png);">Forside</a></li>
 <li id="linav" class="jakobnissen"><a href="#" class="jakobnissen">Jakob Nissen</a></li>
 <li id="linav" class="produkter"><a href="#" class="produkter">Produkter</a></li>

Og når du er på den næste side skriver du :

HTML kode

 <li id="linav" class="forside"><a href="#" class="forside">Forside</a></li>
 <li id="linav" class="jakobnissen"><a href="#" class="jakobnissen" style="background-image:url(nav_jakobnissen_sort.png);">Jakob Nissen</a></li>
 <li id="linav" class="produkter"><a href="#" class="produkter">Produkter</a></li>

osv.

Men prøv og lav så menuen kan skifte side. Som den er nu linker den bare til "#" og hvor er den sorte grafik du vil have som knapper ?

Indlæg senest redigeret d. 28.10.2011 00:32 af Bruger #13010

Bruger #9814 @ 28.10.11 07:51

1.302

Michael har selvfølgelig ret omkring :active. Jeg har misforstået din oprindelige post.

Lige et spørgsmål Michael - af ren nysgerrighed :-) Jeg har ikke oplevet at der har været stillet krav omkring antal requests i webudvikling af en helt almindelig hjemmeside. Det burde trods alt ikke være nødvendigt pga. 5 grafikfiler der fylder det samme, om de er delt op i 5 filer der anvendes som CSS sprites eller 10 filer på "gammeldags" måde.

Mit spørgsmål er, hvor ofte får du i kravsspecifikationen et påbud om at håndtere trafikken på den måde? Jeg har ikke oplevet det endnu, men det kunne måske komme i forbindelse med mobil-udvikling.

Bruger #16025 @ 28.10.11 08:33

442

Du kan også gøre det med jQuery, der er der bare nogle negative sider

JScript kode

 $(document).ready(function() {
      $("#menupanel:first").addClass("aktiv");
  
      $("#menupanel a").click(function() {
          $("#menupanel a").removeClass("aktiv");
          $(this).addClass("aktiv");
      });
  });

Indlæg senest redigeret d. 28.10.2011 08:35 af Bruger #16025

<< < 1 2 > >>

Ved aktiv side, andet billede end ved ikke-aktiv

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler