Utility
Home Messaggi odierni FAQ Ricerca avanzata Lo staff del forum Regolamento Utenti Archivio
Pagina 1 di 3 1 2 3 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 30

Discussione: Menu ad albero

  1. 19-04-2006, 12:32 #1
    Fenestren
    Fenestren non è in linea
    Utente di HTML.it L'avatar di Fenestren
    Registrato dal
    Apr 2006
    Messaggi
    18

    Menu ad albero

    Ciao a tutti.
    Sto iniziando da zero a costruire un sito senza pretese usando dreamweaver: vi prego "non sparate sul pianista".

    Vorrei inserire un menu a tendina o ad albero come quello disponibile tra gli script di questo sito ma apportando alcune modifiche di stile.
    Vorrei che nel menu principale tutte le voci avessero la stessa altezza di cella mentre come si vede la prima ha una cella troppo alta e che nel menu secondario le freccette arancioni fossero spostate più verso dx in modo da rendere maggiormente l'idea.
    Potreste aiutarmi, per favore.
    Grazie.

    Qui si vede bene com'è ora.



    Rispondi quotando Rispondi quotando
  2. 19-04-2006, 13:12 #2
    webdemo
    webdemo non è in linea
    Utente di HTML.it L'avatar di webdemo
    Registrato dal
    Oct 2003
    Messaggi
    4,454
    posta il codice html

    ciaux


    ps
    benvenuto nel forum
    Extrabold Creative Communication
    Rispondi quotando Rispondi quotando
  3. 19-04-2006, 13:34 #3
    Fenestren
    Fenestren non è in linea
    Utente di HTML.it L'avatar di Fenestren
    Registrato dal
    Apr 2006
    Messaggi
    18
    Grazie del benvenuto.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <title>Home Page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" href="mm_travel2.css" type="text/css" />
    <script language="JavaScript" type="text/javascript">
    //--------------- LOCALIZEABLE GLOBALS ---------------
    var d=new Date();
    var monthname=new Array("January","February","March","April","May"," June","July","August","September","October","Novem ber","December");
    //Ensure correct for language. English is "January 1, 2004"
    var TODAY = monthname[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear();
    //--------------- END LOCALIZEABLE ---------------
    </script>
    <style type="text/css">
    <!--
    .Stile3 {font-size: 9px}
    -->
    </style>
    <style TYPE="text/css">
    <!--
    A {text-decoration: none; color : Black;}
    A:HOVER{ Color : red; }
    A:VISITED { text-decoration : none; }
    H3 {font-family: Verdana,Arial,Helvetica;font-size:9pt;font-weight:bold;}
    TT{font-family:monospace;}
    B I{color:#993366;font-size:100%;}
    DIV,TD{font-family:Verdana,Arial,Helvetica;font-size:12px;}
    SPAN SMALL{font-size:80%;}
    SPAN.times{font-family:Times New Roman,Times,serif;font-size:100%;}
    -->
    </style>
    <script language="JavaScript" type="text/javascript">
    <!--
    var bV=parseInt(navigator.appVersion);
    NS4=(document.layers)?true:false;
    IE4=(document.all)?true:false;
    ver4=(NS4 || IE4)?true:false;
    if (document.images) {
    arImLoad=new Array ("up.gif");
    arImList=new Array ();
    for (counter in arImLoad) {
    arImList[counter]=new Image();
    arImList[counter].src=arImLoad[counter] + ".gif";
    }}
    function expandIt(){return}
    function expandAll(){return}
    //-->
    </script>
    <script LANGUAGE="JavaScript1.2">
    <!--
    isExpanded=false;
    function reDo(){
    window.location.reload() }
    function getIndex(el) {
    ind=null;
    for (i=0; i<document.layers.length; i++) {
    whichEl=document.layers[i];
    if (whichEl.id==el) {
    ind=i;
    break; }}
    return ind; }
    function arrange() {
    nextY=document.layers[firstInd].pageY + document.layers[firstInd].document.height-10;
    for (i=firstInd+1; i<document.layers.length; i++) {
    whichEl=document.layers[i];
    if (whichEl.visibility != "hide") {
    whichEl.pageY=nextY;
    nextY += whichEl.document.height-10; }}}
    function initIt() {
    if (NS4) {scrollTo(0,pageYOffset-10)
    for (i=0; i<document.layers.length; i++) {
    whichEl=document.layers[i];
    if (whichEl.id.indexOf("Child") != -1) {
    whichEl.visibility="hide";
    whichEl.isExpanded=false; }}
    arrange();
    setTimeout("window.onresize=reDo",1000) }
    else {
    tempColl=document.all.tags("DIV");
    for (i=0; i<tempColl.length; i++) {
    if (tempColl(i).className == "child") {
    tempColl(i).style.display="none";
    tempColl(i).isExpanded=false; }}}}
    function expandIt(el) {
    if (!ver4) return;
    if (IE4) {expandIE(el)} else {expandNS(el) }}
    function expandIE(el) {
    whichEl=eval(el + "Child");
    whichIm=event.srcElement;
    if (whichEl.style.display == "none") {
    whichEl.style.display="block";
    whichEl.isExpanded=true;
    whichIm.src="up.gif"; }
    else {
    whichEl.style.display="none";
    whichEl.isExpanded=false;
    whichIm.src="down.gif"; }}
    function expandNS(el) {
    whichEl=eval("document." + el + "Child");
    whichIm=eval("document." + el + "Parent.document.images['imEx']");
    if (whichEl.visibility == "hide") {
    whichEl.visibility="show";
    whichEl.isExpanded=true;
    whichIm.src="up.gif"; }
    else {
    whichEl.visibility="hide";
    whichEl.isExpanded=false;
    whichIm.src="down.gif"; }
    arrange(); }
    function showAll() {
    for (i=firstInd; i<document.layers.length; i++) {
    whichEl=document.layers[i];
    whichEl.visibility="show"; }}
    function expandAll(isBot) {
    newSrc=(isExpanded)?"down.gif":"up.gif";
    if (NS4) {
    document.images["imEx"].src=newSrc;
    for (i=firstInd; i<document.layers.length; i++) {
    whichEl=document.layers[i];
    if (whichEl.id.indexOf("Parent") != -1) {
    whichEl.document.images["imEx"].src=newSrc; }
    if (whichEl.id.indexOf("Child") != -1) {
    whichEl.visibility=(isExpanded)?"hide":"show";
    whichEl.isExpanded=(isExpanded)?false:true; }}
    arrange();
    if (isBot && isExpanded) scrollTo(0,document.layers[firstInd].pageY);}
    else { divColl=document.all.tags("DIV");
    for (i=0; i<divColl.length; i++) {
    if (divColl(i).className == "child") {
    divColl(i).style.display=(isExpanded)?"none":"bloc k";
    divColl(i).isExpanded=(isExpanded)?false:true;}}
    imColl=document.images.item("imEx");
    for (i=0; i<imColl.length; i++) {
    imColl(i).src=newSrc;}}
    isExpanded=!isExpanded;}
    with (document) {
    write("<STYLE TYPE='text/css'>");
    write(".parent {");
    if (NS4) {write("position:absolute; visibility:hidden;")};
    if (IE4) {write("margin-top:-15;")};
    write("margin-left:3;");
    write("color:#000099");
    write("}");
    write(".child {");
    if (NS4) {write("position:absolute; visibility:hidden;")};
    if (IE4) {write("display:none;")};
    write("margin-left:3;");
    write("}");

    write(".other {");
    if (NS4) {write("position:absolute; visibility:hidden;")};
    write("margin-left:2;");
    write("}");
    write("</STYLE>");}
    function linkIt(whichEl, whichHref) {
    lay=(NS4)?eval("document."+whichEl+"Child"):eval(w hichEl+"Child");
    if (!lay.isExpanded) expandIt(whichEl);
    nlay=(NS4)?lay.document.images[whichHref]:document.images[whichHref];
    if (NS4) {
    sY=nlay.y+lay.pageY-20
    window.scrollTo(0,sY);}
    else{nlay.scrollIntoView();scroll(0,document.body. scrollTop-2);
    nlay.parentElement.style.backgroundColor="#FF99FF" ;setTimeout("nlay.parentElement.style.backgroundCo lor='white'",1000);}}
    window.onload=initIt;
    // -->
    </script>

    <base target="principale">
    <style TYPE="text/css">
    <!--
    A {text-decoration: none; color : Black;}
    A:HOVER{ Color : red; }
    A:VISITED { text-decoration : none; }
    H3 {font-family: Verdana,Arial,Helvetica;font-size:9pt;font-weight:bold;}
    TT{font-family:monospace;}
    B I{color:#993366;font-size:100%;}
    DIV,TD{font-family:Verdana,Arial,Helvetica;font-size:12px;}
    SPAN SMALL{font-size:70%;}
    SPAN.times{font-family:Times New Roman,Times,serif;font-size:50%;}
    -->
    </style>
    <script language="JavaScript" type="text/javascript">
    <!--
    var bV=parseInt(navigator.appVersion);
    NS4=(document.layers)?true:false;
    IE4=(document.all)?true:false;
    ver4=(NS4 || IE4)?true:false;
    if (document.images) {
    arImLoad=new Array ("up.gif");
    arImList=new Array ();
    for (counter in arImLoad) {
    arImList[counter]=new Image();
    arImList[counter].src=arImLoad[counter] + ".gif";
    }}
    function expandIt(){return}
    function expandAll(){return}
    //-->
    </script>
    <script LANGUAGE="JavaScript1.2">
    <!--
    isExpanded=false;
    function reDo(){
    window.location.reload() }
    function getIndex(el) {
    ind=null;
    for (i=0; i<document.layers.length; i++) {
    whichEl=document.layers[i];
    if (whichEl.id==el) {
    ind=i;
    break; }}
    return ind; }
    function arrange() {
    nextY=document.layers[firstInd].pageY + document.layers[firstInd].document.height-10;
    for (i=firstInd+1; i<document.layers.length; i++) {
    whichEl=document.layers[i];
    if (whichEl.visibility != "hide") {
    whichEl.pageY=nextY;
    nextY += whichEl.document.height-10; }}}
    function initIt() {
    if (NS4) {scrollTo(0,pageYOffset-10)
    for (i=0; i<document.layers.length; i++) {
    whichEl=document.layers[i];
    if (whichEl.id.indexOf("Child") != -1) {
    whichEl.visibility="hide";
    whichEl.isExpanded=false; }}
    arrange();
    setTimeout("window.onresize=reDo",1000) }
    else {
    tempColl=document.all.tags("DIV");
    for (i=0; i<tempColl.length; i++) {
    if (tempColl(i).className == "child") {
    tempColl(i).style.display="none";
    tempColl(i).isExpanded=false; }}}}
    function expandIt(el) {
    if (!ver4) return;
    if (IE4) {expandIE(el)} else {expandNS(el) }}
    function expandIE(el) {
    whichEl=eval(el + "Child");
    whichIm=event.srcElement;
    if (whichEl.style.display == "none") {
    whichEl.style.display="block";
    whichEl.isExpanded=true;
    whichIm.src="up.gif"; }
    else {
    whichEl.style.display="none";
    whichEl.isExpanded=false;
    whichIm.src="down.gif"; }}
    function expandNS(el) {
    whichEl=eval("document." + el + "Child");
    whichIm=eval("document." + el + "Parent.document.images['imEx']");
    if (whichEl.visibility == "hide") {
    whichEl.visibility="show";
    whichEl.isExpanded=true;
    whichIm.src="up.gif"; }
    else {
    whichEl.visibility="hide";
    whichEl.isExpanded=false;
    whichIm.src="down.gif"; }
    arrange(); }
    function showAll() {
    for (i=firstInd; i<document.layers.length; i++) {
    whichEl=document.layers[i];
    whichEl.visibility="show"; }}
    function expandAll(isBot) {
    newSrc=(isExpanded)?"down.gif":"up.gif";
    if (NS4) {
    document.images["imEx"].src=newSrc;
    for (i=firstInd; i<document.layers.length; i++) {
    whichEl=document.layers[i];
    if (whichEl.id.indexOf("Parent") != -1) {
    whichEl.document.images["imEx"].src=newSrc; }
    if (whichEl.id.indexOf("Child") != -1) {
    whichEl.visibility=(isExpanded)?"hide":"show";
    whichEl.isExpanded=(isExpanded)?false:true; }}
    arrange();
    if (isBot && isExpanded) scrollTo(0,document.layers[firstInd].pageY);}
    else { divColl=document.all.tags("DIV");
    for (i=0; i<divColl.length; i++) {
    if (divColl(i).className == "child") {
    divColl(i).style.display=(isExpanded)?"none":"bloc k";
    divColl(i).isExpanded=(isExpanded)?false:true;}}
    imColl=document.images.item("imEx");
    for (i=0; i<imColl.length; i++) {
    imColl(i).src=newSrc;}}
    isExpanded=!isExpanded;}
    with (document) {
    write("<STYLE TYPE='text/css'>");
    write(".parent {");
    if (NS4) {write("position:absolute; visibility:hidden;")};
    if (IE4) {write("margin-top:-15;")};
    write("margin-left:3;");
    write("color:#000099");
    write("}");
    write(".child {");
    if (NS4) {write("position:absolute; visibility:hidden;")};
    if (IE4) {write("display:none;")};
    write("margin-left:3;");
    write("}");

    write(".other {");
    if (NS4) {write("position:absolute; visibility:hidden;")};
    write("margin-left:2;");
    write("}");
    write("</STYLE>");}
    function linkIt(whichEl, whichHref) {
    lay=(NS4)?eval("document."+whichEl+"Child"):eval(w hichEl+"Child");
    if (!lay.isExpanded) expandIt(whichEl);
    nlay=(NS4)?lay.document.images[whichHref]:document.images[whichHref];
    if (NS4) {
    sY=nlay.y+lay.pageY-20
    window.scrollTo(0,sY);}
    else{nlay.scrollIntoView();scroll(0,document.body. scrollTop-2);
    nlay.parentElement.style.backgroundColor="#FF99FF" ;setTimeout("nlay.parentElement.style.backgroundCo lor='white'",1000);}}
    window.onload=initIt;
    // -->
    </script>

    <base target="principale">

    </head>
    Rispondi quotando Rispondi quotando
  4. 19-04-2006, 13:53 #4
    Fenestren
    Fenestren non è in linea
    Utente di HTML.it L'avatar di Fenestren
    Registrato dal
    Apr 2006
    Messaggi
    18
    <body bgcolor="#C0DFFD">
    <table width="100%" height="58" border="0" cellpadding="0" cellspacing="0" bgcolor="#C0DFFD">
    <tr>
    <td width="100%" height="58" bgcolor="#C0DFFD" scope="col"></td>
    </tr>
    </table>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">

    <tr bgcolor="#CCFF99">
    <td height="25" colspan="4" bordercolor="#D4D0C8" id="dateformat">
    <script language="JavaScript" type="text/javascript">
    document.write(TODAY); </script></td>
    </tr>
    <tr>
    <td height="1" colspan="4" bgcolor="#003366">[img]mm_spacer.gif[/img]</td>
    </tr>

    <td width="226" height="310" valign="top" bgcolor="#E6F3FF"><table border="0" cellspacing="0" cellpadding="0" width="165" id="navigation">
    <tr>
    <td width="165">


    </td>
    </tr>
    <tr>
    <td width="165"><div ID="elOneParent" CLASS=parent>
    <h3>Voce1</h3>
    </div>
    <div ID="elOneChild" CLASS="child">
    sottovoce1.1

    sottovoce1.2



    </div></td>
    </tr>
    <tr>
    <td width="165" bgcolor="#E6F3FF">Pesca</td>
    </tr>
    <tr>
    <td width="165">Immagini varie </td>
    </tr>
    <tr>
    <td width="165">Contatti</td>
    </tr>
    </table>
    </td>
    <td width="67"></td>
    <td width="422" valign="top">[img]mm_spacer.gif[/img]


    <span class="pageName">BENVENUTI</span>

    <table width="369" height="103" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="313" class="pageName"></td>
    </tr>
    <tr>
    <td bgcolor="#C0DFFD" class="bodyText"><p align="justify" class="navText">Ho deciso di mettere online queste poche pagine per comodit&agrave;, un pizzico di curiosit&agrave; (il mio primo sito web) e senza pretesa alcuna.</p>
    <p align="justify" class="navText">Troverete essenzialmente pagine dedicate ai miei acquari e/o ad argomenti loro connessi e magari, con l'avvento della bella stagione, qualche fotografia di pesca. </p> <p align="justify" class="navText">La sezione &quot;Immagini varie&quot; &egrave; semplicemente un album di fotografie fatte per gioco e da assoluto principiante. </p></td>
    </tr>
    </table>
    _
    </td>
    <td width="300" valign="top">[img]Ninfee Lato sito.jpg[/img]</td>
    </tr>
    </table>

    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td height="1" colspan="4" bgcolor="#003366">[img]mm_spacer.gif[/img]</td>
    </tr>
    <tr>
    <td bordercolor="#669900" bgcolor="#CCFF99"><div align="right"><span class="Stile3">Sito web realizzato da Luca </span></div></td>
    </tr>
    </table>
    <script LANGUAGE="JavaScript1.2">
    // prelevato su http://www.web-link.it
    <!--
    if (NS4) {
    firstEl="elOneParent";
    firstInd=getIndex(firstEl);
    document.layers[firstInd].pageY-=1;
    showAll();
    arrange();}
    //-->
    </script>
    </body>
    </html>


    Già che ci siete seganlatemi eventuali errori e correzioni, per favore.
    Grazie mille!
    Rispondi quotando Rispondi quotando
  5. 19-04-2006, 14:35 #5
    webdemo
    webdemo non è in linea
    Utente di HTML.it L'avatar di webdemo
    Registrato dal
    Oct 2003
    Messaggi
    4,454
    ma... tutta questa "roba" è frutto di Dreamweaver?

    hai un quintale di codice per quattro box

    farei dietrofront e mi studierei una soluzione più manuale e più pulita:
    Vatti a vedere come si fanno i menu con i css (vedi nuovo sito di html.it)


    Comunque per quanto riguarda i diversi spazi del tuo menu, devi cambiare le impostazioni di:

    codice:
    <div ID="elOneParent" CLASS=parent>
<h3>Voce1</h3>
</div>
    che, presumo, si trova in:

    codice:
    <link rel="stylesheet" href="mm_travel2.css" type="text/css" />
    ciaux
    Extrabold Creative Communication
    Rispondi quotando Rispondi quotando
  6. 19-04-2006, 14:45 #6
    Fenestren
    Fenestren non è in linea
    Utente di HTML.it L'avatar di Fenestren
    Registrato dal
    Apr 2006
    Messaggi
    18
    Originariamente inviato da webdemo
    ma... tutta questa "roba" è frutto di Dreamweaver?

    hai un quintale di codice per quattro box

    farei dietrofront e mi studierei una soluzione più manuale e più pulita:
    Vatti a vedere come si fanno i menu con i css (vedi nuovo sito di html.it)
    Fatto tutto con Dreamweaver partendo da una delle sue pagine di esempio e modificando qua e là.
    Dato che non ho molto tempo e ho intenzione di fare un cosa semplice ho pensato che fosse la soluzione + rapida e semplice.
    Stilisticamente immagino sia un abominio, al limite dell'anatema, ma l'importante è che la pagina si apra e sia fruibile: magari col tempo potrei decidere di spprofondire lo stile
    Puoi darmi un link diretto al paragrafo in questione, per favore?

    Comunque per quanto riguarda i diversi spazi del tuo menu, devi cambiare le impostazioni di:

    codice:
    <div ID="elOneParent" CLASS=parent>
<h3>Voce1</h3>
</div>
    che, presumo, si trova in:

    codice:
    <link rel="stylesheet" href="mm_travel2.css" type="text/css" />
    ciaux
    Avevo immaginato di dover cambiare questo, ma dimmi: se lo modifico, poi tutte le altre pagine del sito che usano tale "mm_travel.css" verrebbero sballate, no?
    Posso salvarlo con un altro nome e usarlo insieme a quello di partenza?

    Grazie mille.
    Rispondi quotando Rispondi quotando
  7. 19-04-2006, 14:56 #7
    webdemo
    webdemo non è in linea
    Utente di HTML.it L'avatar di webdemo
    Registrato dal
    Oct 2003
    Messaggi
    4,454
    codice:
    <link rel="stylesheet" href="mm_travel2.css" type="text/css" />
    in poche parole significa: mi carico gli stili css che trovo nel file: mm_travel2.css

    se vuoi salvaguardare il file mm_travel2.css fai così:

    duplicalo, rinominalo (diciamo in: stili.css) e cambia la riga così:

    codice:
    <link rel="stylesheet" href="stili.css" type="text/css" />

    per quanto riguarda il menu css fatti un giro nel forum css, ne troverai decine:
    http://forum.html.it/forum/forumdisp...=64&daysprune=

    ciaux
    Extrabold Creative Communication
    Rispondi quotando Rispondi quotando
  8. 19-04-2006, 17:46 #8
    Fenestren
    Fenestren non è in linea
    Utente di HTML.it L'avatar di Fenestren
    Registrato dal
    Apr 2006
    Messaggi
    18
    I menu coi css sono belli ma non sono come lo vorrei io.
    Ho smanettato un po' e sono riuscito a far si che le celle abbiano la stessa altezza ma devo ancora risolvere due punti:

    1) il menu rimane aperto e si chiude se ci clicco sopra, quindi l'opposto di quello che dovrebbe essere.

    2) le sottovoci sono ancora allineate alla voce principale e ciò non va bene.

    Ho aperto il css con TopStyle editor ma non mi sono chiare due cose: esiste una preview delle modifiche faccio?
    Se salvo il css modificato poi come lo associo alla sola sottovoce del menu evitando che anche il resto subisca le modifiche?
    Rispondi quotando Rispondi quotando
  9. 19-04-2006, 17:56 #9
    webdemo
    webdemo non è in linea
    Utente di HTML.it L'avatar di webdemo
    Registrato dal
    Oct 2003
    Messaggi
    4,454
    codice:
    <div ID="elOneParent" CLASS=parent>
<h3>Voce1</h3>
</div>
    In questo caso, ad esempio, "Voce1" e il div che la contiene fa riferimento a ID="elOneParent" e CLASS=parent che troverai nel tuo foglio di stili mm_travel2.css (ora rinominato non so come).

    ciaux
    Extrabold Creative Communication
    Rispondi quotando Rispondi quotando
  10. 19-04-2006, 18:01 #10
    Fenestren
    Fenestren non è in linea
    Utente di HTML.it L'avatar di Fenestren
    Registrato dal
    Apr 2006
    Messaggi
    18
    Non credo di aver capito a cosa ti riferisci di preciso
    Comunque per il problema relativo al menu che appare esteso invece che compresso, dove devo cercare il problema? nella funzione onclick? o nel foglio di stile?
    In quest'ultimo ho cercato tra le varie voci quella in cui compare la freccia che voglio spostare ma modificandola non succede nulla...
    Rispondi quotando Rispondi quotando
« Discussione precedente | Prossima discussione »

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  

Regole del Forum

Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.