sottomenù/lista in Css è possibile farlo?

**Ms-Keng** · 20-12-2004, 19:40

ciao dinuovo a tutti, oggi sono attivissimo (sempre nel chiedere mai nell'aiutare, scusatemi ma sono abbastanza "Gnurante" :P)....

io ho una barra di link laterale (sx) che viene visualizzata come una lista UL...

questa barra ha tre link...

l'ultimo dei tre link ha altri tre sottolink....

è possibile fare in modo che quando faccio click sull'ultimo dei tre link:

a)il link si attivi (quindi activelink)

b)mi appaiano questi tre sottolink un pò rientrati del tipo:

:: link 1
:: link 2
:: link 3

(click sul link 3)

codice:

:: link 1
:: link 2
:: link 3
    >link3a
    >link3b
    >link3c

avevo pensato di fare in questo modo:

creare un doppione co i tre sottolink per ogni pagina, ma c'è un inconveniente:

Non mi passa più...

allora mi chedo se posso associare un'azione al link 3 in modo che quando ci faccio click sopra mi vengano visualizzati questi tre sottolink...

grazie moltissime in anticipo, amici!

**Kreatore** · 20-12-2004, 19:43

http://www.constile.org/DHTML/menu_ad_albero/

ti va bene questo?

**Ms-Keng** · 20-12-2004, 19:54

me lo studio e ti faccio sapere....

speriamo di riuscirci!!

tnks a lot....

**Ms-Keng** · 21-12-2004, 19:03

ciao,

senti vorrei chiederti una cosa:

ma il codice java script posso inserirlo nel foglio di stile esterno, oppure corro il rischio che il foglio di stile non mi venga validato???

grazie!

Ps. lo ho implementato ma ho due problemi:

a) i link non vengono spostati ma vengono messi sotto al macromenu tipo:

::macromenu
sottolink1
sottolink2

b) come faccio a dire al browser che quando clicko per aprire i sottomenù il macromenù me lo deve vedere come un active link e quindi dargli lo stile che io ho impostato per gli activelink?

magari lo stile posso darglielo sempre tramite JS??

grazie!

**Kreatore** · 22-12-2004, 09:07

allora. js serve anche per cambiare i colori, ma sarebbe più logico lasciarlo per fare determinate azioni e non per sostituire i css.
Quindi usa i css con una classe per attribuite i colori, per quanto riguarda la posizione imposta un margin relativo a left per i sottomenu.

<ul>[/list]
<li class="sottomenu">

.sottomenu{
bcakcround:#ccc;
margin:0 0 0 30px;
}
.sottomenu a:link, .sottomenu a:hover{
color:#000;
text-decoration:none;
}
.sottomenu a:hover{
collor:#f00;
text-decoration:none;
}

No il codice js non lo puoi inserire nel foglio esterno di stile, ma in un foglio esterno js:

<script src="foglio.js"></script>

**Ms-Keng** · 22-12-2004, 16:28

ciao grazie per la risposta, ma non mi è molto chiaro come devo fare.

allora io ho questo codice css associato ai link laterali:

codice:

#sidebar-a UL {
	PADDING-RIGHT: 0px; MARGIN-TOP: 0px; PADDING-LEFT: 3px; FONT-SIZE: 12px; LIST-STYLE-TYPE: none; PADDING-BOTTOM: 0px; MARGIN-LEFT: 0px; COLOR: #686997; PADDING-TOP: 0px; FONT-FAMILY: verdana, arial, sans-serif; TEXT-DECORATION: none;  FONT-WEIGHT: bolder
}
#sidebar-a LI {
	PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; FONT-WEIGHT: bolder; LIST-STYLE-TYPE: none; COLOR: #5b5b5c; TEXT-ALIGN: left; FONT-SIZE: 14px
}
li.menu { 
	LIST-STYLE-TYPE: none; 
}
.sub {
	MARGIN-LEFT: 30px;
}
.sideactive {
	FONT-WEIGHT: bolder; FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: verdana, arial, sans-serif; PADDING-TOP: 0px; TEXT-DECORATION: none
}
#sidebar-a A {
	FONT-WEIGHT: bolder; FONT-SIZE: 12px; COLOR: #686997; FONT-FAMILY: verdana, arial, sans-serif; TEXT-DECORATION: none
}
#sidebar-a A:hover {
	FONT-WEIGHT: bolder; FONT-SIZE: 12px; COLOR: #5b5b5c; FONT-FAMILY: verdana, arial, sans-serif; PADDING-TOP: 0px; TEXT-DECORATION: none
}
#sidebar-a LI#activelink A {
	FONT-WEIGHT: bolder; FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: verdana, arial, sans-serif; PADDING-TOP: 0px; TEXT-DECORATION: none
}
DIV#sidebar-a LI#activelink A:hover {
	FONT-WEIGHT: bolder; FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: verdana, arial, sans-serif; PADDING-TOP: 0px; TEXT-DECORATION: none
}

mentre per quanto riguarda il codice html che ho fatto per i sottomenu è questo:

codice:

<div id="sidebar-a">
			<ul>
        		<li title="come partecipare">:: come partecipare
        		<li  id="activelink" title="richiesta info">:: <span class="sideactive">richiesta info</span> 
        		<li class="menu" title="edizioni precedenti">:: edizioni precedenti
				<ul class="submenu" id="submenu-1">
				[*]<span class="sub">> 1995</span>
				[*]<span class="sub">> 1996</span>
				[*]<span class="sub">> 1997</span>
				[*]<span class="sub">> 1998</span>
				[*]<span class="sub">> 1999</span>
				[*]<span class="sub">> 2000</span>
				[*]<span class="sub">> 2001</span>
				[*]<span class="sub">> 2002</span>
				[*]<span class="sub">> 2003</span>
				[*]<span class="sub">> 2004</span>
				[/list]
				
			[/list]
			</div>

quello che mi servirebbe fare è solo colorare il macromenu di nero quando apro i sottomenu.
Per quanto riguarda i vari link risolverei con un normalissimo #activelink!

ti riangrazio infinitamente per la tua disponibilità!

**Kreatore** · 22-12-2004, 16:43

quindi se ho capito tu vorresti evidenziare il 'titolo' del sottomenu aperto?
be, in tal caso potresti rivolgere il tuo sguardo a js.

ora non ho tempo per provarlo e poipassartelo corretto comunque:

assegni a[*] anche un id
quindi
<li class.. title... id="edizioni">

la chiamata da <a> verso js la modifichi in

javascript:mmenu('submenu-1','edizioni');

e nel codice js inserisci :
func... (..,titolo){
var ti = document.getElementById(id);
ti.style.background="#000";
...
}
in teoria dovrebbe funzionare.

prova e famme sape

**Ms-Keng** · 22-12-2004, 17:10

grazie ma non funziona...

ho provato a fare come mi hai detto ma questo codice non funziona:

func... (..,titolo){
var ti = document.getElementById(id);
ti.style.background="#000";
...
}

neppure se scrivo:

function (titolo){
var ti = document.getElementById(id);
ti.style.background="#000";
}

a che servono i puntini?

ps. ma come faccio a creare un foglio .js?

se copio ed incollo in un normalissimo txt il codice js e lo salvo come menu.js funziona?

oppure ci vuole qualche tag dichiarativo?

ti ringrazio ancora per la pazienza che hai con un tontolone come me!

**Kreatore** · 22-12-2004, 18:47

allora
1. i puntini indicano che c'è del testo. Quando ti ho inserito i puntini facevo riferimento alla funzione che hai nel tuo header, e che serve a far funzionare il menu.
più precisamente, avrai una funzione che si chiama menu
e inizia cosi

/* gestione del menu */
function mmenu(ID) {
var menu = document.getElementById(ID);
var display = menu.style.display;
...
}

/* inizializzazione del menu */
window.onload = function() {
var uls = document.getElementsByTagName("ul");
for (i=0;i<uls.length;i++) {
if(uls[i].getAttribute("class")=="submenu")uls[i].style.display = "none";
if(uls[i].getAttribute("id") && uls[i].getAttribute("id").search("submenu-")!= -1) uls[i].style.display = "none";
}
}
ti ricordo che i puntini indicano che c'è altro testo

tu devi quindi modificarla cosi;

function mmenu(ID,titolo) {
var menu = document.getElementById(ID);
var display = menu.style.display;
var ti = document.getElementById(titolo);
ti.style.background="#000";
...
}
e modificare linizializzazione del menu in questo modo:
window.onload = function() {
var as = document.getElementsByTagName("a");
for (i=0;i<as.length;i++) {
if(as[i].getAttribute("class")=="submenu")as[i].style.background = "#fff";
}
}
ora come ti ho detto prima,non l'ho provato ma in teoria dovrebbe funzionare

**Ms-Keng** · 22-12-2004, 20:04

ho seguito le tue istruzioni ma purtroppo non funge...

tengo a precisare che però il mio menù in javascript è:

<script type="text/javascript">

</script>

probabilmente è dovuto anche a questo ma io il tuo script l'ho modificato in maniera conforme al mio menù!

io ti ringrazio tanto in tutti i modi, spero di trovare al più presto una soluzione, ora faccio una ricerca su internet.

grazie molte ancora amico!

Discussione: sottomenù/lista in Css è possibile farlo?

Strumenti discussione

Ricerca discussione

Visualizza

sottomenù/lista in Css è possibile farlo?

Permessi di invio