menù verticali ..

**JANUS70** · 14-12-2009, 15:07

Ciao ..
Ho letto nella rubrica 'articoli' delle cose molto interessanti sui 'menù' ..

http://css.html.it/articoli/lista/168/css-menu/

purtroppo non sono riuscito a trovar niente sui menù verticali .. tipo quelli che si vedono anche in questo sito.
C'è qualcuno che mi può aiutare ?
Grazie mille

**miki003** · 14-12-2009, 16:46

Originariamente inviato da JANUS70
Ciao ..
Ho letto nella rubrica 'articoli' delle cose molto interessanti sui 'menù' ..

http://css.html.it/articoli/lista/168/css-menu/

purtroppo non sono riuscito a trovar niente sui menù verticali .. tipo quelli che si vedono anche in questo sito.
C'è qualcuno che mi può aiutare ?
Grazie mille

Se stai chiedendo un esempio di codice ecco qua! Lo puoi adattare alle tue esigenze:

codice:

<!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>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                <title></title>
                <style type="text/css">
<!--
body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        margin: 0;
        font-size: 80%;
        font-weight: bold;
        background: #FFF;
        }

h2 {
        font: bold 14px Verdana, Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0px;
        padding: 0px 0px 0px 15px;
}

ul {
        list-style: none;
        margin: 0;
        padding: 0;
        }

img {
    border: none;
}

/*- Menu 12--------------------------- */

#menu12 {
        width: 200px;
        margin: 10px;
        }

#menu12 li a {
        height: 32px;
          voice-family: "\"}\"";
          voice-family: inherit;
          height: 22px;
        text-decoration: none;
        }

#menu12 li a:link, #menu12 li a:visited {
        color: #666;
        display: block;
        background:  url(menu12.gif);
        padding: 10px 0 0 35px;
        }

#menu12 li a:hover, #menu12 li #current {
        color: #000;
        background:  url(menu12.gif) 0 -32px;
        padding: 10px 0 0 35px;
        }
-->
</style>
        </head>

        <body>
                <h2>Tab Menu 12</h2>
                <div id="menu12">
                        <ul>
                                [*]Home[*]Products[*]Services[*]Support[*]Order[*]News[*]About
[/list]
                </div>
</body>
</html>

**JANUS70** · 15-12-2009, 10:08

grazie mille ..
mi metterò all'opera !

**JANUS70** · 15-12-2009, 10:17

Ho un piccolo problema !!

da un esempio scaricato sugli angoli arrottondati, e in particolare su un esempio di menù (con float) ho provato ada ggiungerci qualcosa sotto ..
il risultato è che con 'firefox' non riesco a distanziare (margin) il 'div' del menù ('content') dal 'div' sottostante ('corpo') ..
C'è qualcuno che mi può aiutare ?

----------------

<!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>Nifty Corners: Javascript CSS rounded corners</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
html,body{margin:0;padding:0}
body{
background-image: url(../sfondi/sfumatura_2.jpg);
font: 70% Arial,sans-serif}

/* ----------------------------- */
#content{margin:0 5em;
margin-top: 50px; }
/* ----------------------------- */
#menu{float:left;
width: 100%;
padding-top:20px; /* altezza fascia menu */
background: #BBD9EE;
}
#nav,
#nav li{list-style-type:none;
margin:0;
padding:0}
#nav{margin-left: 100px;
width:650px} /* distanza a sx del menu' (prima linguetta) */

#nav li{float:left;
margin-right: 0.3em; /* distanza tra linguette */
text-align: center}
#nav a{float:left;
width: 7em; /* larghezza linguette */
padding: 5px 0; /* altezza linguette */
background: #E7F1F8;
text-decoration:none;
color: #666}
#nav a:hover{background: #FFA826;
color: #FFF}
#nav li.activelink a,
#nav li.activelink a:hover{background: url(../sfondi/sfumatura_2_linguetta.jpg) repeat-x ;
color: #003}

/* ----------------------------- */

#corpo{margin:10em 5em;
clear right; }

#riga_1{margin-top: 0.2em;
margin-left: 10em;
padding: 0;
background: #000;
font: 30% Arial,sans-serif}

#image{background: #000;
margin: 10px; }

#minipics {width: 130px;
background-color: #999;
text-align: center; }
#minipics img{width: 100px;
height: 100px;
margin: 7px 2px 7px 2px ;
padding: 7px 2px 7px 2px ; }
/* ----------------------------- */

</style>
<link rel="stylesheet" type="text/css" href="niftyCorners.css">
<link rel="stylesheet" type="text/css" href="niftyPrint.css" media="print">
<script type="text/javascript" src="niftycube.js"></script>

<script type="text/javascript">
window.onload=function(){
Nifty("#menu","big transparent top");
Nifty("#nav a","transparent top");
Nifty("#minipics", "big tl bl br");
}
</script>

</head>
<body>
<div id="content">
<div id="menu">
<ul id="nav">
<li id="home" class="activelink">Home
<li id="who">About
<li id="prod">Product
<li id="serv">Services
<li id="cont">Contact us [/list]
</div>
</div>

<div id="corpo">
<div id="riga_1">

a </p>
</div>

<div id="minipics">
[img]arabo.jpg[/img]
</div>
</div>

</body>
</html>

**JANUS70** · 18-12-2009, 17:04

nessuno che mi sa aiutare ?

**JANUS70** · 23-12-2009, 17:59

Ciao ..
sui menù verticali .. che si riesca a trovare qualche esempio con 'cascata' ?
grazie mille

**firagaspell** · 26-12-2009, 00:48

Se quello che ti serve sapere è un buon modello di grafica per fare il tuo menu purtroppo online non si trova molta originalità. Io personalmente prendo come esempio i webmaster di http://www.dofus.com/it.
Sono veramente bravissimi e in grado di creare siti a dir poco fantastici secondo me. Una cosa utile che puoi fare è anche quella di aiutarti con gimp nel fare l'anteprima dell'intero sito o del menu nel tuo caso e poi tagliare i vari pezzi che ti servono

**JANUS70** · 26-12-2009, 17:33

Originariamente inviato da firagaspell
Se quello che ti serve sapere è un buon modello di grafica per fare il tuo menu purtroppo online non si trova molta originalità. Io personalmente prendo come esempio i webmaster di http://www.dofus.com/it.
Sono veramente bravissimi e in grado di creare siti a dir poco fantastici secondo me. Una cosa utile che puoi fare è anche quella di aiutarti con gimp nel fare l'anteprima dell'intero sito o del menu nel tuo caso e poi tagliare i vari pezzi che ti servono

Grazie per i consigli
ma dimmi una cosa ..
cosa sarebbe questo 'gimp' ?

grazie

**marco.carrieri** · 26-12-2009, 21:21

Gimp è un programma di grafica gratuito.

**firagaspell** · 27-12-2009, 19:55

Ti permette di ottenere effetti grafici molto buoni senza dover comprare photoshop. Se vuoi vedere in dettaglio cos'è vai su youtube e cerchi GIMP. Prendi il primo video che trovi e dagli unp sguardo. Capirai subito tutto ^_^

Discussione: menù verticali ..

Strumenti discussione

Ricerca discussione

Visualizza

menù verticali ..

Re: menù verticali ..

Permessi di invio