Menu dinamico con css

Vediamo insieme come creare un menu orizzontale con rollover in css.

Per chi non lo sapesse css sta per content system stylesheet ed è il linguaggio che dà lo stile al web,

è un linguaggio integrabile con l’html.

Creiamo una pagina html qualsiasi:

<html>

<head>

<style type=”text/css”>

#menu
{ width:650; margin:auto; height:25px; color:inherit; font-size:9pt; background-image: url(barra.png); background-repeat: repeat; background-attachment: scroll; background-position: 0 0; clear:both; }

.menu
{ width:150px; height:20px; float:left; font-family: Tahoma,sans-serif;
text-align:center; text-transform:uppercase; }

.menu a:link, .menu a:visited, .menu a:active
{ text-decoration: none; color:#fff; display:block; height:17px; padding-top:8px; font-weight:bold; font-size:7pt; background-color: transparent; background-image: inherit; background-repeat: inherit; background-attachment: inherit; background-position: inherit; }

.menu a:hover
{ color: white; text-decoration:none; background-image: url(roll.png); background-repeat: repeat; background-attachment: scroll; background-position: 0 0; }

</style>

</head>

<body>

<div id=”menu”>
<div class=”menu”><a href=”link1.html”>Link 1</a></div>
<div class=”menu”><a href=”link2.html”>Link 2</a></div>
<div class=”menu”><a href=”link3.html”>Link 3</a></div>
</div>
</div>

</body

</html>

Tra i tag stile notiamo il codice css,

per usarlo notiamo il codice tra i tag body che è il corpo fisico del nostro menu.
Adesso salvatevi sul vostro pc le immagini sottostanti e caricatele nel vostro spazio web:

Ps.Le immagini sono protette da copyright, sono state realizzate da ryanwolf ma potete tranquillamente utilizzarle nel vostro sito.

Lista contenuto cartella in una selectbox con php

Ecco a voi un codice da me sviluppato molto utile, sopratutto per chi è già sviluppatore di script o addirittura di cms.

Il codice sottostante ci permette di listare il contenuto di una determinata cartella in una selectbox.

Il codice è piuttosto commentato.

<select  name=”language” size=”1″>
<?php  if ($open_dir = opendir(“nomecartelladaaprire”)) { while (false !== ($open_lang = readdir($open_dir))) { //Apro la cartella che mi pare, avvio il ciclo while,leggo la cartella
if ($open_lang != “.” && $open_lang != “..” && $open_lang != “Thumbs.db” && $open_lang != “index.html”) { // Evito che files fantasma tipo Thumbs.db o … si vedano insieme ai veri files

echo “<option value=\”$open_lang\””;
echo “>$open_lang</option>”; } } //Stampo il nome delle pagine nel ciclo

closedir($open_dir); } //Chiudo la cartella
?>
</select>

Free Flash Gallery

Vi segnalo questa magnifica galleria in flash.

Semplice da installare,

pronta e sopratutto dinamica!

Funziona cosi’:

C’è un file swf interfacciato con un file xml e un file php.

Nel file xml sono presenti svariate preferenze sulla galleria, nel file php legge,invece tutte le immagini provenienti da una determinata cartella.

Vi seguo adesso nell’installazione passo passo.

1 ) Scaricate il pacchetto da qui:

http://www.flash-gallery.org/files/flashgallery.zip

2 ) Uppate tutto il contenuto del pacchetto nel vostro spazio web.

3) Andate nel codice della webpage in cui desiderate visualizzare la galleria e inserite tra i tag <head> e </head> questo codice:

<script language="javascript" type="text/javascript" src="swfobject.js" ></script>

Nei tag body, invece inserite questo codice:

<div id="gallery" align="center">
<h1>No flash player!</h1>
<p>It looks like you don't have flash player installed. <a href="http://www.macromedia.com/go/getflashplayer" >Click here</a> to go to Macromedia download page.</p>
</div>

<!– Script that embeds gallery. –>
<script language=”javascript” type=”text/javascript”>
var so = new SWFObject(“flashgallery.swf”, “gallery”, “640”, “480”, “8”); // Location of swf file. You can change gallery width and height here (using pixels or percents).
so.addParam(“quality”, “high”);
so.addParam(“allowFullScreen”, “true”);
so.addVariable(“content_path”,”img”); // Location of a folder with JPG and PNG files (relative to php script).
so.addVariable(“color_path”,”default.xml”); // Location of xml file with settings.
so.addVariable(“script_path”,”flashgallery.php”); // Location of php script.
so.write(“gallery”);
</script>

4)Nella cartella “img” uppate tutte le immagini che desiderate!!!

Buon divertimentO!