Vorrei fare un menù ad albero (o un qualche cosa di simile) che utilizzi i CSS e l'HTML (o altri linguaggi compatibili con qualsiasi Browser aderente agli Standard, non mi interessa se IE non li visualizza bene) senza usare altre cose (non voglio usare Javascript, Applet, DHTML, ecc..).
Ho provato a fare così (ed è già un miracolo visto che l'ho fatto oggi pomeriggio ed ho iniziato a studiare il css oggi pomeriggio), basandomi su un sito che usava questa struttura ( http://www.meyerweb.com/eric/css/edge/menus/demo.html
) e modificando il codice per adattarlo alle mie esigenze:
ma non fa molto al caso mio in quanto lo voglio mettere in un frame e così viene troppo grosso.codice:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//IT" "http://www.w3.org/TR/REC-html40/strict.dtd"> <html> <head> <title>Sommario</title> <style type="text/css"> <!-- body {background: white; color: black; margin: 0; padding: 0;} ul {padding: 0; margin: 0; border-bottom: 1px solid silver; font: 1em sans-serif;} ul li {list-style-type: none; border: 1px solid silver; border-width: 1px 1px 0 3px; position: relative; margin: 0; padding: 0;} ul ul {display: none;} ul li:hover > ul {display: block; position: absolute; top: -1px; right: 100%;} li a {display: block; padding: 5px 7px; text-decoration: none; background: #FFF;} ul#topmenu li a:hover {background: yellow;} li.sub > a {font-weight: bold; background: #FFE;} h1 {margin: 0; padding: 1em 0.25em 0; font: bold 2.5em Arial, sans-serif; line-height: 0.8em; border-bottom: 1px solid silver; text-align: left; color: #557; letter-spacing: 2px;} div#main {margin: 0 8em 0 1em; padding: 0; border-right: 1px solid silver;} div#main p {margin: 1em 3em 1em 0.5em;} ul#topmenu {width: 6em;} ul#topmenu > li:hover > ul {width: 10em; top: 1.5em; right: -3px;} ul ul {width: 10em;} #rtnv {position: absolute; top: 6em; left: 0; width: 8em; margin: 0; padding: 0; font-family: Arial, sans-serif;} #rtnv > ul {width: 9em; margin-right: -1px; font-size: 85%;} #rtnv ul {border: 1px solid silver; border-width: 0 0 0 1px;} #rtnv ul li {border-width: 1px 0; border-color: white; padding: 0 0 0 5px; line-height: 1.25em;} #rtnv ul ul {border-width: 0 1px 1px 1px; border-color: gray silver gray gray;} #rtnv ul ul li {border-color: #FEFEFC;} #rtnv li > a {background-color: transparent; padding: 3px;} #rtnv li:hover {background-color: #EED;} #rtnv li.sub:hover {margin-right: -10.2em; border: 1px solid gray; background: #DDB;} #rtnv li.sub:hover > a {color: #330;} #rtnv li.sub:hover > ul {top: 1.75em; right: -1px; background: #FEFEFC;} h4 {margin: 0 0.5em 0 0; padding: 0 0.25em; font-size: 95%; border-bottom: 1px solid silver; text-align: center; color: red; } --> </style> </head> <body> </p> </div> <div id="rtnv"> <h4>Formule Goniometriche</h4> <ul> <li class="sub">Grafici <ul>[*]Seno[*]Coseno [*]Tangente[*]Cotangente[/list] <li class="sub">Operazioni <ul> <li class="sub">Addizione <ul>[*]Seno[*]Coseno[*]Tangente[*]Cotangente[/list] <li class="sub">Sottrazione <ul>[*]Seno[*]Coseno[*]Tangente[*]Cotangente[/list] [/list][*]Compara[*]Home </div> </body>
Esiste un modo per fare aprire l'ultimo sottomenù a sinistra anziché a destra?.
Eventualmente c'è un altro modo (menù ad albero, ecc..)?
Grazie
Rispondi quotando
Auguri, è sempre bello vedere che qualcuno inizia a studiare cose nuove: