CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

sir_madsen Nybegynder

29. oktober 2011 - 23:30 Der er 10 kommentarer og
1 løsning

Menu med hover effekt mm.

Kære eksperter,

Jeg søger en tutorial på en simpel horizontal menu (uden drop down), som der er hover effekt ved når man kører musen over, men også en der husker hvilket link man trykkede på og derfor er en anden farve end de andre links i menuen, når du er inde på den bestemte side. Jeg ved ikke om dette kan laves uden jquery?

Jeg includer selve menuen med noget php.

Mvh. Martin

Synes godt om

olsensweb.dk Ekspert

29. oktober 2011 - 23:40 #1

>men også en der husker hvilket link man trykkede på og derfor er en anden farve
du kunne lade dig inspirer af http://www.eksperten.dk/spm/950205 #2 eller 3

og lidt css til hover
a:hover{
background-color:yellow;
}

Synes godt om

sir_madsen Nybegynder

30. oktober 2011 - 00:29 #2

Det er præcis det jeg er ude efter. Men min er ikke opbygget i ul/li, den er opbygget i td/tr. Hvordan vil den så se ud?

Synes godt om

olsensweb.dk Ekspert

30. oktober 2011 - 00:52 #3

nu er tabeller ikke beregnet til design, men men til tabulære data, men hurtig tilretning:
index.php, examples.php osv

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" href="menu.css" />
</head>
<body>
<?php
include "menu.php";
?>
</body>
</html>

menu.php

<div id="menubar">
<table id="menutable">
<?php
$dirs = explode('/', $_SERVER['PHP_SELF']);       
$size = sizeof($dirs)-1;

$menu = array(
    // bør nok være array("parth","index.php","Home"), hvis parth er forskellig 
    array("index.php","Home"), 
    array("examples.php","Examples"),
    array("page.php","A Page"),
    array("another_page.php","Another Page"),
    array("contact.php","Contact Us")
);
$lng = count($menu);
for ($i=0; $i<$lng; $i++){
    if($menu[$i][0] == $dirs[$size]){
        echo '<tr>';
            echo '<td class="selectet"><a href="'.$menu[$i][0].'">'.$menu[$i][1].'</a></td>';        
        echo '</tr>';    
        echo "\n";
    }    
    else{
        echo '<tr>';
        echo '<td><a href="'.$menu[$i][0].'">'.$menu[$i][1].'</a></td>';
        echo '</tr>';    
        echo "\n";
    }
}
?>
</table>
</div>

menu.css

a:hover{
    background-color:yellow;
} 

.selectet{
    background-color:red;
}

#menutable{
    width: 100%:
}

Synes godt om

olsensweb.dk Ekspert

30. oktober 2011 - 01:00 #4

kan se jeg er ved at være træt, det skulle være et semicollon i stedet for et collon

width: 100%;

Synes godt om

sir_madsen Nybegynder

30. oktober 2011 - 21:13 #5

Det virker ganske udemærket, bortset fra at jeg ikke kan få den til at være horizontal (kun vertikal). Har du et fif der?

Synes godt om

olsensweb.dk Ekspert

30. oktober 2011 - 21:28 #6

>til at være horizontal (kun vertikal). Har du et fif der?
så smider du bare dine <tr>'er ude for løkken

menu.php

<div id="menubar">
<table id="menutable">
<?php
$dirs = explode('/', $_SERVER['PHP_SELF']);       
$size = sizeof($dirs)-1;
$menu = array(
    // bør nok være array("parth","index.php","Home"), hvis parth er forskellig 
    array("index.php","Home"), 
    array("examples.php","Examples"),
    array("page.php","A Page"),
    array("another_page.php","Another Page"),
    array("contact.php","Contact Us")
);
$lng = count($menu);
echo '<tr>';
for ($i=0; $i<$lng; $i++){
    if($menu[$i][0] == $dirs[$size]){        
        echo '<td class="selectet"><a href="'.$menu[$i][0].'">'.$menu[$i][1].'</a></td>';                
        echo "\n";
    }    
    else{        
        echo '<td><a href="'.$menu[$i][0].'">'.$menu[$i][1].'</a></td>';        
        echo "\n";
    }
}
echo '</tr>';
?>
</table>
</div>

Synes godt om

sir_madsen Nybegynder

30. oktober 2011 - 21:41 #7

Super. Mange tak. Et sidste spørgsmål. Min default link font farve er sort, men når den er "selected" vil jeg gerne have at den er hvid. Ville tro man gjorde det under .selectet, men der sker intet. Hvor skal jeg definere at den skal være hvid?

Synes godt om

olsensweb.dk Ekspert

31. oktober 2011 - 01:47 #8

prøv dette

.selectet{
    background-color:red;
}
.selectet a {
    color:#FFFFFF;
}  
a:hover{
    background-color:yellow;
} 
#menutable{
    width: 100%;
}

.selectet a => klasses selectet's anchor skal have farven #FFFFFF (white)

nb husk Rækkefølgen for anchor
LoVeFuckHAte for
a:link
a:visited
a:focus
a:hover
a:active
http://groups.google.com/group/dk.edb.internet.webdesign.html/browse_thread/thread/2aaf9f8c24996085/26d9ffbb57c3ba1d

Synes godt om

sir_madsen Nybegynder

31. oktober 2011 - 08:07 #9

Hmm, ser ikke ud til at hjælpe:S

Synes godt om

sir_madsen Nybegynder

31. oktober 2011 - 10:54 #10

Sorry, my bad. En mindte stavefejl kom i vejen. 1000 tak for hjælpen. Læg et svar, så giver jeg point.

Synes godt om

olsensweb.dk Ekspert

31. oktober 2011 - 14:11 #11

får du her

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS