Gå til innhold

automatisk generert meny

Mortenius

Anbefalte innlegg

Mortenius

Mortenius

Skrevet
Skrevet (endret)

Hei. Holder på å lage en personlig hjemmeside. Lurer på om du vet om noen funksjon eller oppskrift på hvordan jeg kan få en mappestruktur på serveren gjengitt automatisk på hjemmesiden. Det blir altså som en meny med hyperlenker til de forskjellige mappene og filene i mappestrukturen. Mappestrukturen og filene kan f.eks. være slik:

 

Hovedmappe (mappe)

- Hovedside (side) (dette blir gjerne indeks filen)

- bilder (mappe)

--- bilder fra i sommer (mappe)

------ båttur (side)

------ Sydentur (side)

------ st. hans (side)

--- bilder fra skitur (side)

- Nyheter (mappe)

--- nyheter1 (side)

--- nyheter2 (side)

- Blogger (mappe)

- Andre sider (mappe)

- Linker (side)

 

Eventuelle hjelpefiler som css og lignende legges utenfor mappen, og vises ikke i menyen.

 

Gjengitt på siden i en meny til venstre slik: (her er man inne på "nyheter1")

 

HOVEDSIDE

BILDER

NYHETER

NYHETER 1

NYHETER 2

BLOGGER

ANDRE SIDER

LINKER

 

Gjerne med forskjellige fonter og størrelser for de forskjellige nivåene, pluss markert med rødt for den siden man er inne på.

 

Når man går inn på en side, f.eks. "nyheter1" i mappen "nyheter", så lukkes de andre mappene ned slik at man bare ser innholdet i "hovedmappe", pluss innholdet i mappen "nyheter"

 

Alle sidene er hyperlenker, så når man trykker på en av dem så vises den filen i hovedvinduet på siden.

 

Jeg ønsker som sagt at menyen genereres automatisk, slik at jeg bare trenger å laste opp en ny side eller ny mappe dit jeg ønsker at den skal ligge på serveren, og menyen oppdateres.

 

Er dette vanskelig å lage? - har ikke kommet over noen templater eller enkle hjemmesideprogrammer som lar meg lage dette automatisk.

 

Er dette mulig?

 

- Mortenius : :hmm::hmm::hmm:

Endret av Mortenius
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Jonas

Jonas

Skrevet
Skrevet

Lagde et litt mer relevant eksempel til edit'en din, her. Se her for mappestruktur.

 

Kildekode til index:

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

<html>

<head>
 
 <title>index.html</title>
 
 <style type="text/css">
 	
 	* {
   margin: 0;
   padding: 0;
 	}
 	
 	body, html {
   background-color: #ECF3F6;
   height: 100%;
   color: #333;
   font: 13px Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
   line-height: 150%;
 	}
 	
 	#wrapper {
   margin: 0 auto 0 auto;
   width: 710px;
   height: 100%;
   background: url('background.gif') no-repeat;    
 	}
 	
 	h1 {
   padding: 40px;
 	}
 	
 	h2 {
   text-align: center;
   margin: 20px;
   padding-bottom: 20px;
 	}
 	
 	.heading {
   float: left;
 	}
 	
 	.posted {
   float: right;
   font-size: 13px;
   font-weight: normal;
 	}
 	
 	.menu {
   list-style-type: none;
   float: right;
   width: 120px;
   margin-right: 40px !Important;
   margin-right: 20px;
   margin-top: 50px;
 	}
 	
 	.menu ul {
   margin: 0 !Important;
   margin-left: 15px !Important;
   float: none;
   width: auto;
 	}
 	
 	.menu a {
   padding: 0px 5px 5px 5px;
   width: auto;
   display: block;
   color: #93D7F5;
   text-decoration: none;
   border-bottom: 1px solid #CCCCCC;
 	}
 	
 	.menu a:hover {
   text-decoration: underline;
 	}
 	
 	.menu li {
   margin-top: 10px;
 	}
 	
 	#content {
   width: 490px;
   margin: 40px;
 	}
 	
 	#content p {
   margin-bottom: 10px;
   text-align: justify;
 	}
 	
 </style>
 
</head>

<body>
 
 <div id="wrapper">
 	
 	<h1><Heading goes here></h1>
 	
 	<?php
   
   $dir = 'Sider/';
   $err = '404.php';
   
   ListFiles( $dir, '' );
   
   function ListFiles( $dir, $folder )
   { 
   	
   	echo '<ul class="menu">';
   	
   	$dh = opendir( $dir . $folder ); 
   	
   	if ( $folder != '' ) { $folder = $folder . '/'; }
   	
   	while ( $file = readdir( $dh ) )
   	{
     
     if ( $file != '.' && $file != '..' && $file != 'index' ) {
     	
     	echo '<li><a href="?side=' . $folder . $file . '">' . $file . '</a>';
     	
     	if ( is_dir( $dir . $folder . $file ) && isset($_GET['side'] ) && substr( $_GET['side'], 0, strlen( $folder . $file ) ) == $folder . $file ) {
       
       ListFiles( $dir, $folder . $file );
       
     	}
     	
     	echo '</li>';
     	
     }
     
   	}
   	
   	echo '</ul>';
   	
   }
   
 	?>
 	
 	<div id="content">
   
   <?php
   	
   	if ( isset( $_GET['side'] ) ) {
     
     $file = $dir . $_GET['side'];
     
   	} else {
     
     $file = $dir . 'Home';
     
   	}
   	
   	if ( file_exists( $file ) && !is_dir( $file ) ) {
     
     include( $file );
     
   	} elseif ( is_dir( $file ) && file_exists( $file . '/index' ) ) {
     
     include( $file . '/index' );
     
   	} else {
     
     include( $err );
     
   	}
         
   ?>
   
 	</div>
 	
 </div>
 
</body>

</html>

Lenke til kommentar
Jonas

Jonas

Skrevet
Skrevet

HTML er markert på en slik måte at alt du trenger å gjøre er å endre litt i CSS-koden, som er den mellom <styke> og </style>. Endre floating-egenskapen til .menu og #content. Her er den nye koden.

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

<html>

<head>
 
 <title>index.html</title>
 
 <style type="text/css">
 	
 	* {
   margin: 0;
   padding: 0;
 	}
 	
 	body, html {
   background-color: #ECF3F6;
   height: 100%;
   color: #333;
   font: 13px Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
   line-height: 150%;
 	}
 	
 	#wrapper {
   margin: 0 auto 0 auto;
   width: 710px;
   height: 100%;
   background: url('background.gif') no-repeat;    
 	}
 	
 	h1 {
   padding: 40px;
 	}
 	
 	h2 {
   text-align: center;
   margin: 20px;
   padding-bottom: 20px;
 	}
 	
 	.heading {
   float: left;
 	}
 	
 	.posted {
   float: right;
   font-size: 13px;
   font-weight: normal;
 	}
 	
 	.menu {
   list-style-type: none;
   float: left;
   width: 120px;
   margin-left: 20px !Important;
   margin-left: 10px;
   margin-top: 50px;
 	}
 	
 	.menu ul {
   margin: 0 !Important;
   margin-left: 15px !Important;
   float: none;
   width: auto;
 	}
 	
 	.menu a {
   padding: 0px 5px 5px 12px;
   width: auto;
   display: block;
   color: #93D7F5;
   text-decoration: none;
   border-bottom: 1px solid #CCCCCC;
 	}
 	
 	.menu a:hover {
   text-decoration: underline;
 	}
 	
 	.menu li {
   margin-top: 10px;
 	}
 	
 	.folder {
   background: url('folder.gif') no-repeat;
   background-position: 0px 4px;
 	}
 	
 	#content {
   width: 490px;
   margin: 40px;
   float: right;
 	}
 	
 	#content p {
   margin-bottom: 10px;
   text-align: justify;
 	}
 	
 </style>
 
</head>

<body>
 
 <div id="wrapper">
 	
 	<h1><Heading goes here></h1>
 	
 	<?php
   
   $dir = 'Sider/';
   $err = '404.php';
   
   ListFiles( $dir, '' );
   
   function ListFiles( $dir, $folder )
   { 
   	
   	echo '<ul class="menu">';
   	
   	$dh = opendir( $dir . $folder ); 
   	
   	if ( $folder != '' ) { $folder = $folder . '/'; }
   	
   	while ( $file = readdir( $dh ) )
   	{
     
     if ( $file != '.' && $file != '..' && $file != 'index' ) {
     	
     	
     	
     	if ( is_dir( $dir . $folder . $file ) && isset($_GET['side'] ) && substr( $_GET['side'], 0, strlen( $folder . $file ) ) == $folder . $file ) {
       
       echo '<li><a class="folder" href="?side=' . $folder . $file . '">' . $file . '</a>';
       
       ListFiles( $dir, $folder . $file );
       
     	} else {
       
       echo '<li><a href="?side=' . $folder . $file . '">' . $file . '</a>';
       
     	}
     	
     	echo '</li>';
     	
     }
     
   	}
   	
   	echo '</ul>';
   	
   }
   
 	?>
 	
 	<div id="content">
   
   <?php
   	
   	if ( isset( $_GET['side'] ) ) {
     
     $file = $dir . $_GET['side'];
     
   	} else {
     
     $file = $dir . 'Home';
     
   	}
   	
   	if ( file_exists( $file ) && !is_dir( $file ) ) {
     
     include( $file );
     
   	} elseif ( is_dir( $file ) && file_exists( $file . '/index' ) ) {
     
     include( $file . '/index' );
     
   	} else {
     
     include( $err );
     
   	}
         
   ?>
   
 	</div>
 	
 </div>
 
</body>

</html>

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