Gå til innhold

Faner - valgt fane del av innholdet

indigestion

Anbefalte innlegg

indigestion

indigestion

Skrevet
Skrevet

Prøvar å laga ein horisontal meny bassert på Dynamic Drive - Overlapping horizontal tabs

 

Problemet gjeld forsåvidt alle typar menyar med faner der den valgte fana blir ein del av innhaldet. For å få til dette må det valgte <li> elementet ha ein "selected" class i html-koden. Dette er forsåvidt greit så lenge du basserer på å ha ei fullkoda html-fil for kvar side. Men i mitt tilfelle vil eg bruka php-include for å lima inn "content"-delen i fila og dermed gjera endringar i layout enklare. Men då får eg problem av di den selekterte fana ikkje kan fylgja innhaldet slik som det er sett opp her.

 

Kodane er stort sett den same som på www.dynamicdrive.com, berre at det er lagt til include-scriptet.

 

html-kode:

Klikk for å se/fjerne innholdet nedenfor

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

<html>

 

<head>

 

<title>Testside</title>

 

<link rel="stylesheet" type="text/css" href="css/dynamic.css" />

<?php

 

$handlername = 'side'; // her blir linkane ?side=xxx. Forandre til det du bruker

$defaultSide = 'framside.php'; // den fila som blir inkludert dersom inga side er etterspurt i URL-en

$includePath = 'filer/'; // stien til mappa sidene som skal inkluderast ligg i

$errorPage = '404.php'; // fila som blir inkludert dersom ei side som ikkje ligg i mappa blir etterspurt

$filendelse = '.php'; // filendelsen på filane som skal inkluderast

 

/* S C R I P T S T A R T */

/* Første delen henter variabelen i url-en og alle filnavn i mappa du skal inkludere frå */

/* Treng ikkje endrast */

 

$URLside = &$_GET[$handlername]; // lagar ein enklare variabel for variabelen sendt gjennom url-en

 

$rep = opendir($includePath); // åpnar mappa som er satt i $includePath

while ($file = readdir($rep))

{

if($file != '..' && $file !='.' && $file !='' && !is_dir($file)) // unngår mapper

{

$filer[]=$file; // legg alle filane i mappa inn i $filer-arrayet

}

}

closedir($rep); // lukker mappa

 

 

 

if (!isset ($URLside)) // viss det ikkje blir sendt ein variabel gjennom url-en for å bestemma kva side som skal inkluderast

{

$side = $includePath . $defaultSide; // blir filen satt i $defaultSide inkludert

} else {

$side = $URLside . $filendelse; // legg til filendelsen satt i $filendelse for å

 

if (in_array ($side, $filer)) { // sjekker om den etterspurte sida er i arrayet

$side = $includePath . $side; // inkluder sida

} else { // ellers

$side = $includePath . $errorPage; // inkluder filmeldinga, satt i $errorPage

}

}

?>

</head>

 

<body>

 

 

<div class="ddoverlap">

<ul>

<li><a href="?side=side1">Side1</a></li>

<li><a href="?side=side2">Side2</a></li>

<li class="selected"><a href="?side=side3">Side3</a></li>

<li><a href="?side=side4">Side4</a></li>

</ul>

<br style="clear: left" />

</div>

<div id="content">

 

 

<?php

 

/* I N K L U D E R I N G S D E L */

/* Lim inn der innhaldet skal inkluderast */

 

include_once $side; // inkluderer sida

 

?>

 

</div>

 

</body>

</html>

 

css-kode:

Klikk for å se/fjerne innholdet nedenfor

#content {

 

border: 1px solid #bbb8a9;

}

 

/*

.ddoverlap{

border-bottom: 1px solid #bbb8a9;

} */

 

.ddoverlap ul{

padding: 0;

margin: 0;

font: bold 90% default;

list-style-type: none;

}

 

.ddoverlap li{

display: inline;

margin: 0;

}

 

.ddoverlap li a{

padding: 3px 7px;

text-decoration: none;

padding-right: 32px; /*extra right padding to account for curved right edge of tab image*/

color: blue;

background: transparent url(../media/righttabdefault.gif) 100% 1px no-repeat; /*give illusion of shifting 1px down vertically*/

border-left: 1px solid #dbdbd5;

position: relative;

display: block;

float: left;

margin-left: -20px; /*shift tabs 20px to the left so they overlap*/

left: 20px;

}

 

.ddoverlap li a:visited{

color: blue;

}

 

.ddoverlap li a:hover{

text-decoration: underline;

}

 

.ddoverlap li.selected a{ /*selected tab style*/

color: black;

z-index: 100; /*higher z-index so selected tab is topmost*/

top: 1px; /*Shift tab 1px down so the border beneath it is covered*/

background: transparent url(../media/righttabselected.gif) 100% 0 no-repeat;

}

 

.ddoverlap li.selected a:hover{

text-decoration: none;

}

 

 

 

<!--[if IE]>

 

.ddoverlap{

height: 1%; /*Apply Holly 3px jog hack to get IE to position bottom border correctly beneath the menu*/

}

<![endif]-->

 

Er takknemlig for alle tips om korleis eg kan koma meg vidare. Mulig dette ligg meir under php og at eg kanskje må bruka eit eige include-script for menyen.

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...